Themes and Page Builder Support
Theme Support
Vitals supports all Shopify themes. It was tested to function with all the themes from the Shopify Theme Store, but even if you're using a custom theme, we're able to customize Vitals to work with it.
There are, however, a few theme features that might interfere with Vitals, including:
- Page preloading - Some themes are shipped with functionality designed to increase the page load speed when browsing a store by preloading the page when the mouse hovers on a link. However, this feature doesn't reload apps on every page load - so you'll need to reload the page to see apps in action. One of these themes is Turbo - read more about the workaround here: Switching to Sport Mode.
- Cart drawers - Multiple themes provide a functionality called "a drawer" themes." When this feature is enabled, the cart is updated in a non-standard way and can cause discount miscalculations. See more here: Known Discount Conflicts.
- Dynamic checkout buttons - This is not per se a theme option, rather, a Shopify one. Customers can use the dynamic checkout buttons to skip the cart and quickly buy the product they're viewing. Unfortunately, this can cause discounts not to be applied at checkout. Read more about it here: Known Discount Conflicts.
On the positive side, Vitals never modifies your theme's layout, so there is no need to uninstall and reinstall the app when changing themes. Uninstalling and reinstalling an app affects your billing cycle, and you can be charged twice by Shopify for the same period.
If something seems to be out of place on your theme files, adjust the positioning of various elements or let us know, and we'll do it for you. Our support team is here to help you enjoy Vitals!
Our apps automatically adjust based on your new theme. However, there might be some exceptions regarding a few custom themes on which some elements can be misaligned. Contact us so we can help.
Page Builder Support
💡 Interested in integrating our Vitals apps into your Page Builder? Check out these articles from the respective Help Centers of the Page Builder for step-by-step guidance.
GemPages - How to insert Vitals apps in Gempages
PageFly - How to insert Vitals apps in PageFly
EComposer - How to insert Vitals apps in EComposer
Page Builders usually don't integrate all that well with Vitals or other apps. Vitals may work with some of them but only to some extent, at least.
Using a page builder like GemPages, PageFly, Shogun, Ecomposer, and others changes the page layout and the code behind your store's theme. It's harder to implement apps on such a customized page since the underlying code and structure are now wholly custom-made.
Vitals works with all of Shopify's themes because these themes follow Shopify standards in rendering shop elements on pages, such as having a unique and usable element ID and classes. For example, with our demo store, we can see that the Add to Cart (ATC) button has the standard attributes present, such as its classes "btn" and "product-form__cart-submit", with other attributes such as type="submit" and aria-label="Add to cart".
With page builders, the ATC button is wholly modified with random letter classes, which are generated differently for each product page, like from the example below having classes "sc-dvUynV", "dMGmXk" and "pf-27_". Because of this, it becomes tough for our app to pinpoint and detect these crucial elements on the page, and when this happens, our apps and Vitals Editor will not be able to work with these customized elements.
