App reviews, troubleshooting, and recommendations
This document is meant for merchants and theme partners who are encountering issues with the 1P Subscription App Block. It specifically applies to those who are not using a default version of an OS 2.0 theme created by Shopify. This includes custom themes, third-party themes, and modified versions of Shopify's themes.
This document will explain how the various components of our app block integrate with the theme, what elements are required for our app block to work, and how you can update your theme to work with our app block. You will learn:
If you don’t know your theme architecture version (whether or not your theme is an Online Store 2.0 theme), you can follow these steps to find out.
Don’t forget to make a copy of your theme before making any modifications. This will ensure that you can always revert back to a previous version if needed.
To ensure that the 1P Subscriptions app block functions properly, the theme needs to have two specific implementations. These implementations allow the app block to effectively search and retrieve the necessary elements and data from the product page’s structure.
To determine if your theme is using sections, verify that your main product or featured product is wrapped with one of these tags using the developer tools. The tag should start with shopify-section-.
<section id="shopify-section-${sectionId}" ...>
To determine if your theme is using independent sections, you can test in the Online Store Theme Editor that the product elements on the product page can be removed, added and reordered one independently of the other(s).
For example, a featured product can be removed without removing the main product, and vice versa.
If you do not find this shopify section in your theme, then the main product or featured product is not using sections. You will need to implement them as sections that support app blocks to be compatible with the 1P Subscriptions app block.
Here is the documentation to help you achieve that. This requires technical knowledge.
If your sections are not independent of one another, you will need to split them into individual sections, each with app block support.
Here is the documentation to help you achieve that. This requires technical knowledge.
In order for the 1P Subscriptions App Block to successfully find the product forms required for the functionality of the app block, the theme must use the action="/cart/add" on the section’s main product form.
The app block will use the forms for 2 things:
To determine if your theme is using the action="/cart/add" attribute, use the developer tools to find the product form. You can hover over form elements in the product section, like the add to cart buttons, or variant options.
Best practice is for forms to use forms tags, so searching for the form keyword in the elements can work too.
There are two ways to solve this issue
You’ll also want to make sure that any code in your theme that expects the form to use the previous action is modified to expect the new action attribute.
We search for an input or a select element with the attribute name=”id”.
These are the most common elements used for variant selection. Additionally, them being named id is expected, since this is the field the form expects for the variant id.
This means, in order for your theme to be compatible with the app block, the variant id will need to be stored in one of these element types.
To determine if your theme uses a select or input, use the developer tools Elements tab to search for the attribute name="id". Alternatively, you can find the add to cart forms, and check that this input or select element exists as one of its children.
You can follow this documentation to implement variant selection. The key section is creating a master variant selector using the input or select tag, with the attribute name=”id”.
In order to display the correct selling plans associated with the selected variant, the app block listens for the variant change.
First, the app block will need to find the form, then it will listen to this form for an onchange event to be emitted when the variant changes. It’s important that the value of the variant input is updated to the currently selected variant id before the event is emitted, since this is the value the app block will use to determine which selling plans are displayed.
To determine if the form is emitting an event when the variant changes, you can:
If you see the text, “The form is emitting an event.”, then this means the app block can listen to the variant change.
There are some exceptions where the app block may be able to listen to the variant change, but it still can’t identify the correct variant id.
For example, your theme may trigger a form change before the variant id is updated. In this case, the app block would be using the previously selected variant id to display the selling plans, causing unpredictable behaviors.
<script> document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('form').forEach((addToCartForm) => { addToCartForm.addEventListener('change', () => { console.log("The form is emitting an event.") }) }) }) </script>
You will need to understand how your theme works and emit an event when the variant is updated in the correct javascript file. If the form does emit an event, but you are seeing selling plans that belong to the previously selected variant, you need to make sure the form event is emitted when the variant id is updated. The solution for this incompatibility is different for every theme.
You may have noticed that the subscriptions widget appears in the quick buy modal of your theme. We currently do not support this feature, however, due to the way the quick buy modal is implemented in your theme, it may be visible.
This can be fixed by adding custom CSS to the theme.
To determine if the 1P Subscriptions widget is visible in the quick buy modal, you will need to follow these steps.
If the 1P subscriptions widget is visible in the quick buy modal, you can hide it by adding some custom CSS to your theme. Note that if you choose not to hide the widget, the 1P subscriptions app does not support the quick buy feature, therefore it will be visible, but non-functional.
To add custom CSS to your theme, follow these steps.
If you’re using the modal classname, use this snippet
.<modal-classname> .shopify_subscriptions_app_block { display: none; } If you’re using the modal id, use this snippet #<modal-id> .shopify_subscriptions_app_block { display: none; }
Thanks for Sharing this article.
thanks for sharing
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024