Theme Development
Overview
Shoplift works seamlessly with Shopify's theme architecture, but there are some things to know when making updates to your themes to ensure your tests and theme development workflows continue to run smoothly.
Theme development with Git
Merchants, theme developers, and development teams will often push updates to live and unpublished themes through Git to manage versions of their themes. If your team uses Git to control and publish new versions of your themes, follow the best practices below to ensure you don't run into issues when running tests with Shoplift.
Ensure any changes to your theme are pulled down to your repository prior to pushing updates
Many times merchants and apps will make changes to the theme or theme assets through the Theme Editor or Asset APIs.
At Shoplift, we attempt to mitigate the frequency with which we do this. Occasionally, we will ship updates to our shoplift.liquid snippet, and while we make efforts to make these updates backwards compatible, there could be issues if the current version of the snippet is accidentally overwritten or restored to an outdated or previous version.
We recommend always pulling down the latest changes to your theme prior to pushing any updates from Git to ensure the latest version of the snippet is present.
In the case that the snippet is removed, overwritten, or modified, Shoplift will attempt this and correct the issue every hour. We will also perform this check any time an entirely new main theme is published.
Ensure the Shoplift snippet exists and is referenced in the <head> of your theme.liquid
<head> of your theme.liquidFor the Shoplift script to function correctly, it must exist in the themes snippets directory (shoplift.liquid) and must be referenced in the <head> of your theme.liquid via a render tag. Whenever making updates or changes to your theme, double check to ensure that both the snippet and the render tag are present in your theme directory.
Possible issues if the Shoplift snippet is outdated, modified, or removed
All tests cease to collect visitor data until the script is restored, as there would be no way for Shoplift to track and collect essential visitor events
If running theme tests, theme preview bars could show on the B side themes until the script is restored, as there would be no way for Shoplift to suppress it
If running theme tests, website visitors could get stuck on the preview theme until the script is restored, as there would be no way for Shoplift to return visitors to the main theme when necessary
Avoiding theme development and theme preview workflow interactions due to theme tests
Shoplift has various methods of ensuring that visitors on theme tests do not remain on the preview theme after a test has concluded. Sometimes, these methods may interfere with normal theme development and theme preview workflows. Read below to learn how to minimize these interferences and keep your workflows running smoothly.
How to use the 'isShopliftMerchant' query parameter to exclude yourself and others from script behaviors intended for website visitors
When a theme test has concluded, Shoplift will redirect any visitors to the B side of that theme test back to the main theme. This includes merchants' browsers if you were included in the test.
Secondly, if a website visitor is not tracked by Shoplift, and is on a theme preview, Shoplift will redirect them back to the main theme, because they could be a website visitor. This includes merchants' browsers if you are previewing a theme but your browser does not contain Shoplift tracking in local storage or cookies.
To circumvent this behavior when previewing themes, you can append an isShopliftMerchant=true parameter to your theme preview URL. This parameter will set an isMerchant=true value in your browser's local storage that indicates to Shoplift that you are a merchant, and our theme kickback behavior will be ignored. An example preview URL with this parameter would look like:
This parameter will also work for preview links that you share or view in incognito browsers, as well as for automated testing tools that leverage a browser like Selenium or Puppeteer.
How to remove the 'isMerchant' parameter
To reset the isMerchant value in your local storage from true to false, simply re-add the isShopliftMerchant parameter to your store URL or theme preview URL and set the value to false. This will reenable theme kickback script behavior intended for website visitors.
How to check your 'isMerchant' local storage value
If you ever need to determine what your isMerchant local storage value is currently set to, you can look at your Shoplift_Essential local storage item in your browser's storage settings.
Open up the developer tools window in your browser. In Chrome, the shortcut for this is CMD + Shift + C on MacOS.
Within this window, click the tab titled "Application" (depending on your browser, this may also be called "Storage") and locate your local storage.
In your local storage you can find an item called
Shoplift_Essential. Click this item.There will be a value for an attribute called isMerchant. If no attribute is set, then it means that it has not been set by the parameter, and the Shoplift script will recognize you under the
isMerchant=falselogic.To set the value, or change it, you can either enter the attribute and value manually, or use the parameter described above to set your desired value.
Last updated