Subscription services are a huge part of daily life and recently, subscriptions have become one of the fastest-growing categories in eCommerce. Repeat customers are 50% more likely to make another purchase than new customers, and they spend 33% more on average!
With the Subscription app integrations in the Elements popup available for Loop (via Shopify App Block), Appstle, Seal and Recharge you can easily add a subscription widget to your Buy Boxes on Zipify Pages:
📝Important Notes
Loop:
The widget is added via the Shopify App Block integration element and is able to be added to product pages only. More details below.
Appstle:
On the Free and Starter plans of the Appstle app, the widget is limited to product pages only.
Recharge:
For merchants who've enabled the Recharge integration at Settings > Integrations within Zipify Pages, the element remains on the published pages.
If the merchant adds the element to a section, it won't be duplicated with the integration already enabled, allowing the merchant to manage it as a single element.
If a merchant adds the element, but later disables the integration in Settings, the element will remain on that specific page.
To do this, you'll first need to meet the following conditions:
Ensure that the supported Subscriptions app is installed to your Theme and their subscription widget is active.
Create a subscription selling plan in the Subscriptions app and select the product you want to use for your subscription offer.
Add a "Product Box" or "Product Grid" section to your Zipify Page and assign the same product you just created a subscription plan for. More Details
Adding the Subscription Widget
Once you have met the conditions above, please proceed with the following steps:
In a "Product Box" or "Product Grid" section, click on an element where you want to add the subscription widget.
Click the the blue + sign above/below the element selected, depending on where you want the widget added.
In the Elements popup, click into the "Integrations" tab
Select your subscription app (Appstle, Seal or Recharge) or select App Block for Loop subscriptions.
Publish or Update the page if it is already published.
Once these steps are completed, check the published page to ensure that the widget is rendering correctly:
Loop Subscriptions
Loop Widget v2
To add the Loop subscriptions widget to your Zipify Pages product page, follow the steps below:
In the Zipify Pages app, open the Product Page where you want to display the Loop widget.
In the builder, add a new App Block element from the "Integrations" category of the elements popup and place it above the add to cart button. Save changes and update the page if it is published:
Click on the Shopify App Block element in the builder, then on the Open Shopify Editor button in the sidebar:
In the Shopify Editor, click on the + Add block button. Select Loop subscription widget under the Apps tab. Once the app block is added, note down the product template name and click on Save.
Open the Loop Subscriptions app and navigate to Widgets. Open the widget which you want to be visible on the ZipifyPages product page and click on the "Change" link to map the product template:
Click on Add more templates and select the ZipifyPages product template. Click on Map to add the widget on the product template:
Head back to the Zipify Pages product page in the Zipify Pages app. Click on Preview page to see view the product page. The Loop subscription widget should now be visible on the live product page:
Loop Widget v1
To add the Loop subscriptions widget v1 to your Zipify Pages product page, follow the steps below:
In the Zipify Pages app, open the Product Page where you want to display the Loop widget. Alternatively, create a new one and select the product which you want to map the subscription to.
Click on the "Product Button" element, then click on the blue ➕ sign above it and add the HTML element.
Insert the following liquid code into the HTML element and click Save. Then click the Save button in the builder to save changes changes, then the Update button to update the published page:
{% render 'loop-subscriptions' type: 'product-widget', product: product %}
In your Shopify admin, head to Sales Channels > Online Store > Themes > Edit code for the published theme.
Locate the file theme.zipifypages.liquid and click on it to edit. Add the JS and CSS tags as shown below, then click on Save.
Add JS after the</head>tag:<script type="text/javascript" id="loop-subscription-script" src="{{ 'loop-widget.js' | asset_url }}"></script>
Add CSS after the<body>tag:<style class="loop-style"> {% render 'loop-widget.css' %} </style>
The Loop Widget should now be active on the published product page. If it's not, try clicking the "Update" button in the Zipify Pages builder, then check the published page once again.