# Shopify variations

URL: https://docs.ablyft.com/guides/experiments/shopify-variations/

> Test a draft theme or an alternative template in your Shopify store.



If your website runs on Shopify, you can test whole themes or page templates without writing code. ABlyft offers two
variation types for it: **Shopify Theme** and **Shopify Template**.

Before you start, the ABlyft [snippet](https://docs.ablyft.com/developers/installation/snippet/) must be installed in your Shopify theme, and
the experiment needs a [page](https://docs.ablyft.com/guides/audiences-and-delivery/pages/) and a [goal](https://docs.ablyft.com/guides/goals-and-measurement/configure-goals/)
like any other experiment.

## Shopify Theme

Shows a draft theme of your store to a part of your customers before you publish it.

1. In Shopify, go to **Online Store → Themes** and prepare your draft theme (do not publish it).
2. Open the **Edit code** page of the draft theme. The theme ID is part of the URL, for example `themes/123456789`.
3. In ABlyft, create a variation of the type **Shopify Theme**, see [Variations](https://docs.ablyft.com/guides/experiments/variations/).
4. In the section **Shopify Theme**, enter the **Draft theme ID** (numbers only, up to 12 digits) and save.

When a visitor is assigned to the variation, the snippet waits until Shopify is available on the page. If the visitor
does not see the draft theme yet, the snippet redirects to the preview of that theme and hides Shopify's preview bar.

## Shopify Template

Shows an alternative template of a page type, for example a second product page layout. It works with all page types:
product, collection, page, blog, article, cart, search and customers.

1. In your theme, create the alternative template, for example `product.alternate.liquid` or `product.alternate.json`.
2. In ABlyft, create a variation of the type **Shopify Template**.
3. In the section **Shopify Template**, enter the **Template name**. Only the part between the page type and the file
   ending is used. For `product.alternate.liquid` enter `alternate`.
4. Save.

The snippet then reloads the page with the parameter `?view=alternate`, which makes Shopify render the alternative
template. If the page already has a `view` parameter, the snippet does not redirect.

> **Template and theme must exist:** ABlyft does not check whether the theme ID or the template exists in your store. Preview the variation (see below)
> before you start the experiment.

## Preview and goals

* Use **Show in browser** in the menu of the variation, or the preview of the experiment, to check how the theme or
  template looks. See [Preview & QA](https://docs.ablyft.com/guides/experiments/preview-and-qa/).
* Goals work as in every other experiment. See [Goal types](https://docs.ablyft.com/guides/goals-and-measurement/goal-types/). For purchases
  and revenue in Shopify, ABlyft supports order tracking through a webhook or through the Customer Event pixel, see
  [Shopify tracking](https://docs.ablyft.com/developers/tracking-and-events/shopify/).

## Related

For developers: the underlying functions are `shopifyPreviewTheme` and `shopifySwitchTemplate` in the
[JavaScript tools](https://docs.ablyft.com/developers/reference/javascript-api/tools/#shopify).

## Next steps

- [Variations](https://docs.ablyft.com/guides/experiments/variations/): All variation types.
- [Preview & QA](https://docs.ablyft.com/guides/experiments/preview-and-qa/): Check the variation before it goes live.