Before You Start Your Price Test

This guide will walk you through the necessary steps to prepare your store for price testing. There are three main tasks to complete:

1. Integrating the SDK script into your theme code to enable price testing functionality.
2. Adding a filter script to prevent duplicate product appearances.
3. Inserting a price update script to ensure the correct pricing is displayed to users.

Step 1: Integrating the SDK script into your theme code to enable price testing functionality

The first step is to integrate the SDK script into your theme code to enable price testing functionality. There are two methods to achieve this, but we recommend directly adding the script to your theme code for better performance. Here’s how:

Recommend: Directly Add the Script to the Theme Code

Directly adding the script ensures faster execution. Follow these steps:

1. Go to your admin portal, locate the management panel on the left, and click Apps -> WorthTestify -> Settings.
2. In the Settings page, you will see your unique Theme Script. Click the Copy to Clipboard button to copy the script.
3. Next, in the left panel, click Sales Channels, then select Online Store.
4. In the left panel, go to Online Store -> Themes to see your store's active theme. Click the Customize button.
5. On the theme customization page, click the ... button next to your theme name and select Edit Code.
6. Open the layout folder and find theme.liquid. Paste the copied script under render 'meta-tags'.
7. After completing this step, proceed to add the filter script as described in the next section.

Optional: Using Shopify App Embed

1. Log in to your admin portal and navigate to Apps -> WorthTestify from the left-side menu.
2. On the WorthTestify app page, find the Setup App Embed section and click the Open App embed button.
3. You will be redirected to the App Embeds page of your store's theme.
4. Ensure that the WorthTestify Script toggle is enabled, and click Save on the top-right of the screen.
5. After saving, you can find the ... button next to your theme name, click it and select Edit Code to continue with the next two steps.

Step 2: Add the Filter Script to Prevent Duplicate Products

To ensure that duplicate products don't appear on your website or in search results, you need to modify your Liquid code to filter out these duplicates. This process involves updating several files.

1. Locate Product Grid Sections

   • First, identify the files containing product grid sections. Search for the keyword product-grid. It may appear in the following files:
     • main-search.liquid
     • related-products.liquid
   • To easily find where to insert the script, use the Shopify Theme File Search by EZFY Chrome plugin. Use this tool to search for product-grid. If you're not using the plugin, manually search for the relevant classes within your theme files.

2. Update Product Grid Sections

   • In each identified file, add a filtering condition to exclude products tagged as variants:

       {% unless product.tags contains 'wt-price-test' %}
         <!-- Existing product display code -->
       {% endunless %}

3. Modify Search Results

   • Locate the search results section by searching for predictive-search-results-products-list. It may appear in the following files:
     • predictive-search.liquid
   • Apply the same filtering condition to the search results.

Example: in search section

<ul
  id="predictive-search-results-products-list"
  class="predictive-search__results-list list-unstyled"
  role="group"
  aria-labelledby="predictive-search-products"
>
    {%- for product in predictive_search.resources.products -%}
        {% unless product.tags contains 'wt-price-test' %}
        <li
          id="predictive-search-option-product-{{ forloop.index }}"
          class="predictive-search__list-item"
          role="option"
          aria-selected="false"
        >
          ...
        </li>
        {% endunless %}
    {%- endfor -%}
</ul>

Step 3: Add the Price Update Script to Display Correct Pricing

Lastly, you need to add the price update script to ensure customers see the correct prices during the A/B test.

1. In the admin portal, click Sales Channels -> Online Store -> Themes, and click Customize for your active theme.
2. Click the ... button next to your theme name and select Edit Code.
3. To easily find where to insert the script, use the Shopify Theme File Search by EZFY Chrome plugin. Use this tool to search for class="price-item".
4. If you're not using the plugin, manually search for the relevant classes within your theme files.
5. Look for two types of classes:
   • class="price-item price-item--regular"
   • class="price-item price-item--sale"
6. For each class, add the following tags after the class attribute to ensure the correct price is updated:
   • wt-price-id={{ "price-regular-" | append: product.handle }}
   • wt-price-id={{ "price-sales-" | append: product.handle }}

Example 1: Regular Price

<span>
  <s class="price-item price-item--regular" wt-price-id={{ "price-regular-" | append: product.handle }}>
    {% if settings.currency_code_enabled %}
      {{ compare_at_price | money_with_currency }}
    {% else %}
      {{ compare_at_price | money }}
    {% endif %}
  </s>
</span>

Example 2: Sale Price

<span class="price-item price-item--sale" wt-price-id={{ "price-sales-" | append: product.handle }}>
  {{ money_price }}
</span>

Conclusion

Once you've added all the necessary scripts, your store will be fully prepared for price testing. Congratulations! You're now ready to run A/B tests with confidence.

Happy A/B testing!