Themes and Page Builder Support

Theme Support

Vitals supports Shopify themes, and even if you're using a custom theme, we're able to customize Vitals to work with it.

Vitals works with any Online Store 2.0 theme edited in Shopify's regular theme editor through app embeds and app blocks. For the smoothest setup, we recommend Shopify's free Dawn or Horizon themes, or their sister themes such as Refresh, Sense, and Craft. Vitals has built-in support for their cart drawer and cart page, and we test on these themes.

Shopify Canvas, which uses Sidekick to edit your theme, doesn't support app embeds or app blocks yet, for any app. As a result, Vitals storefront features won't appear on a theme edited in Canvas.

A theme edited in Canvas can't be opened in the regular theme editor. For now, you can use your previous theme or a fresh copy of a Shopify theme from the Theme Store, edited using Online Store > Themes > Customize. You can keep your Canvas design as an unpublished theme.

If you use another theme, turn on the Vitals Cart Drawer to keep upsells, discounts, gifts, and spending goals working consistently.

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 - Some theme cart drawers don't refresh when Vitals updates the cart, so offers or discounted prices may not show until the page reloads. Turning on the Vitals Cart Drawer avoids this.
• Dynamic checkout buttons - This is not per se a theme option, rather, a Shopify one. Buy it now buttons send only the product being viewed to checkout, so offers that need several items in the cart (such as bundles) can't apply.

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.

When you switch to a new theme, turn on the Vitals app embed in that theme (Online Store > Themes > Customize > App embeds) and save. Add again any Vitals app blocks you placed in the old theme. See Enabling the Vitals app via App Embed.

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!

Once the app embed is on, our apps adapt to 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

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 will not be able to work with these customized elements.