Shopify - Test PDP Template

Last updated on Apr 22, 20263 min read

Table of contents

• In short
• Create new template
• Create a new experiment in Varify
• Configure and start experiment targeting

In short

With Varify, you can easily test alternative PDP templates for your Shopify store. To do this, first create a new PDP template with all the desired customizations. Create a new A/B test and add the JavaScript from this guide. No changes to products or Shopify settings are necessary.

Create new template

First create a new template for your product detail page (PDP). This allows you to test alternative arrangements, app widgets or other elements.

How to create a new template in just a few steps:

1. Go to Online Store > Themes > Customize
2. Click on the drop-down menu at the top, which is set to "Home page" by default
3. Select the Products area in the dropdown
4. Click on Create Template to create your new PDP template

1. Give the new template a name, such as: new-pdp.
2. Under „Based on,“ select the template you’re currently using—it will serve as the starting point for your new template.

1. Now make all the desired changes to the new template:

• Test widgets of a Shopify app
• Create new blocks, elements or texts
• Change the order of existing blocks
• Customize the color scheme
• and much more

2. Then save the new version of your PDP template. It is not yet visible as your products are still set to the original template.

Create a new experiment in Varify

1. Create a new experiment on one of your product pages
2. Click on the code symbol at the top right
3. Select "Add JavaScript"
4. Insert the following JavaScript
5. In line 5, change the value of the constant pdpVariationName 'new-pdp' and replace it with the name of your new template
6. In lines 3 and 4, change the experiment and variant IDs to the IDs of the experiment accordingly. (Important: You must save the test once beforehand so that the IDs are created at all. You can then save it via Edit again and replace the IDs).
7. Save the experiment

`

(function () {
  // ─── CONFIG ───
  const experimentId = 32898;
  const variationId = 49279;
  const viewValue = 'new-pdp'; //"view"-value (z.B. Template-Name)

  // ─── HELPERS ───
  if (window.varify.helpers.isInEditor()) {
    return
  }

  // ─── LOGIC ───
  const params = new URLSearchParams(window.location.search);
  const paramAsBase64 = btoa(`${experimentId}:${variationId}`).replace(/=/g, '');

  const needsView = params.get('view') !== String(viewValue);
  const needsVa = params.get('va-red') !== paramAsBase64;

  if (needsView || needsVa) {
    params.set('view', String(viewValue));
    params.set('va-red', paramAsBase64);

    const newUrl =
      `${window.location.origin}${window.location.pathname}?${params.toString()}${window.location.hash || ''}`;

    window.location.href = newUrl;
  }
})();

`

Configure and start experiment targeting

The experiment should be displayed on all product pages. Therefore, a small adjustment in page targeting is necessary.

1. Open the page targeting of the experiment
2. Set the targeting to /products/ with the matching type "Contains"
3. If your product detail pages are not clearly identifiable via the URL, you can also use a unique CSS selector that only appears on your PDPs. The "Buybox" selector is usually suitable for this.
4. Start the experiment