This article helps developers create a custom subscription widget on the product page along with variants in below format.
Shopify Theme Setup
Add Custom CSS
Go to Online Store > Themes > Edit Code.
Create a new asset file named
recurpay-custom.cssand include that intheme.liquidAdd your custom CSS here to override the default theme styles and match the subscription widget design.
You won’t need to modify any JavaScript - the layout can be achieved entirely through CSS.
Create Variants & Metafields
Set up product variants in Shopify for each size option (e.g., Mini, Small, Medium, Large).
Optionally, use metafields to store and display additional details (such as dimensions or descriptions) for each variant.
Add a Custom Snippet
Create a new snippet called
custom-variant.liquidand insert it into your main product template at the location where you want the variant selection to appear.In this snippet, loop through all the product variants and render them in the card format.
Use liquid to display each variant’s image, title, pricing (with compare-at price if available), and metafields.
Style the layout with your
recurpay-custom.cssso it visually matches the subscription widget. Here is a sample code to loop in variants:
<div class="variant-cards">
{% assign sel_variant = product.selected_or_first_available_variant %}
{% for variant in product.variants %}
<label class="variant-card{% if variant.id == sel_variant.id %} is-active{% endif %}{% unless variant.available %} is-disabled{% endunless %}">
<input
type="radio"
name="id"
value="{{ variant.id }}"
{% if variant.id == sel_variant.id %}checked{% endif %}
{% unless variant.available %}disabled{% endunless %}
>
{% if variant.featured_media %}
{{ variant.featured_media | image_url: width: 300 | image_tag: alt: variant.title }}
{% endif %}
<h4>{{ variant.title }}</h4>
{%- if variant.metafields.custom.dimensions %}
<p>{{ variant.metafields.custom.dimensions }}</p>
{%- endif %}
<p>
{% if variant.compare_at_price > variant.price %}
<span class="compare-price">{{ variant.compare_at_price | money }}</span>
{% endif %}
<span class="current-price">{{ variant.price | money }}</span>
</p>
</label>
{% endfor %}
</div>Save your changes and check the entire flow once from checkout to subscription flowing in the Recurpay dashboard.
Facing any issue with setting this up? Click the green chat button on Recurpay dashboard and we will get it done for you or write us at help@recurpay.com