How to Set Up the Subscription Widget on the Collection Page
Follow these steps to display the Easy Subscription widget on your collection pages for each product card:
Step 1: Copy the Widget Snippet Code
- Navigate to the Easy Subscriptions App from the left sidebar of your Shopify admin.
- Go to Settings > Widget.
Copy the provided snippet:
<div class=”easy-dynamic-subscription-container” data-product-object='{{ card_product | json | escape }}’ style=”display: none;”> </div>
Step 2: Open Theme Customization
- From your Shopify admin panel, go to Online Store > Themes.
- Click the Customize button on your active theme.
Step 3: Select the Collection Template
- Once in the Theme Editor, click the dropdown menu at the top center.
- Select Collections > Default Collection (or any custom collection you want to edit).
Step 4: Locate Product Grid Section
- On the left sidebar under Template, find and click on Product grid (or whichever section displays your product cards in the collection).
- Select the ‘STANDARD’ style option.
Step 5: Add App block
- Click on the ‘+’ icon on the left navigation panel of the section.
- Click on App tab on the popped up menu.
- Click on Easy Subscription Widget option to add the app block.
Step 6: Edit Code for Product Card
- Return to Online Store > Themes, click the three-dot menu beside your theme, and choose Edit Code.
- In the code editor:
– Search for the card-product.liquid file inside the Snippets folder.
– Open it and locate the code block that renders each product.
– Paste the copied widget snippet just below the product form, as shown in the highlighted example.
Step 7: Save & Preview
- Click Save in the code editor.
Preview your collection page—each product card should now load the subscription widget dynamically.
Your subscription widget will now appear on collection pages, allowing customers to interact with subscription options directly from the product cards.
If you need help at any step, feel free to reach out to our support team—we’re happy to assist!
