In 2021, Shopify released Online Store 2.0 (OS2), an end-to-end overhaul of the Shopify theme architecture that brought drag-and-drop sections to every page, rather than just the home page.
Themes developed before the advent of OS2 are considered legacy themes, which are much less flexible and often require developers to attempt elaborate workarounds to achieve the level of flexibility and customization offered by OS2. Because of these workarounds, many legacy themes have slow load times and are harder to integrate with third-party apps.
While Shoplift works with both legacy and Online Store 2.0 themes, if your theme is a legacy theme, the edits you will be able to make for the purposes of testing will be more limited.
Occasionally, themes have custom code that can impact theme compatibility or the creation of variants for testing. If you are experiencing an issue with theme compatibility or test variants, contact support via our chat widget or reach out to us at help@shoplift.ai.
While Shoplift is intended for use with JSON templates, testing is supported on Liquid templates, but the degree of customization in the Shopify Theme Editor will depend on your theme and which customization settings have been exposed in the Shopify Theme Editor.
The good news is that we’ve developed a method to support testing for some legacy templates by dynamically upgrading them to the newer architecture. However, not all legacy templates are able to be dynamically upgraded for the purposes of testing.
If a liquid template is able to be converted, then when duplicating the template for testing, the Liquid and HTML code on the original Liquid template will be copied into a section file and included in the new JSON template (variant).
This upgraded JSON template will enable you to add additional sections from your theme, as well as drag, drop, and reorder them.
Occasionally, themes will have custom code that prevents alternate template variants (JSON copies of the original template with a suffix in the filename) from inheriting the CSS styles from their original counterpart. This can prevent the variant template from being a pixel-perfect copy of the original.
Examples of conditional code that prevent duplicate templates created for testing could be any of the following:
-
conditional code such as template == 'index'
-
CSS that references the <div> or #id of specific elements instead of the class
-
any code that is limited to styling a specific template
If this occurs during test creation, we suggest you review your theme directory for any code that might prevent an alternate template of the same type from correctly inheriting the CSS styles of the original.
We’re here to help if you encounter any issues when testing with Shoplift. If you would like us to speak with your theme developer to discuss theme compatibility, you can reach out to us at help@shoplift.ai.