From Shopify Wiki

Google Website Optimizer is now integrated with Shopify! Check it out under the Marketing tab in your shop admin.

What is Google Website Optimizer?

It's a free tool to help you find the combination of text and images that will increase your conversion rates. It eliminates the guesswork from your shop design because you can scientifically test multiple variations on a page and let the results decide which design is right for you.

How does it work?

1. You choose a subject for your experiment that you want to test. This may be a information related to a product or a page.
2. Choose sections of your page to test. You can mark blocks of text, such as descriptions or titles, and even images for testing. Then give Google different descriptions or images to test with and launch your experiment.
3. Google Website Optimizer will then mix and match the different variations that you created so that each customer will see a different version of your pages. Google Website Optimizer will record which variations of your pages yield the best results so you can maximize your conversion rates.

Learn more about Google Website Optimizer

Editing Liquid for Google Website Optimizer

Google Website Optimizer does require you to modify your Liquid templates. In order to modify your shop Liquid templates go to the Theme Editor page under the Assets tab in your shop admin. The new Liquid tag that needs to be added to your template is called 'section'. You will find that Google Website Optimizer works well with Shopify to test product description and page content.

If you now follow the instructions presented within Shopify, you should be able to carry out your experiment.

Testing Product Descriptions

To test variations on the product description, you would replace the following in your product.liquid (you will find it under the Templates section of the Theme Editor page):

{{ product.description }}

with

{% section 'description' %}
  {{ product.description }}
{% endsection %}

Testing Buy Buttons

To test variations on the Buy button, you would replace the following in your product.liquid (you will find it under the Templates section of the Theme Editor page):

<input type="image" src="{{ "add.png" | asset_url }}" alt="BUY THIS" id="add" />

with

<input type="image" {% section 'buy-image' %}src="{{ "add.png" | asset_url }}" {% endsection %} alt="BUY THIS" id="add" />

asset_url

"http://cdn.shopify.com/blablabla.jpg"

Testing Page Content

To test variations of content on your pages (such your About Us page), you would replace the following in your page.liquid (you will find it under the Templates section of the Theme Editor page):

{{ page.content }}

with

{% section 'page' %}
  {{ page.content }}
{% endsection %}

Testing Other elements

You can test different parts of your product page content by adding different section tags for those elements on that same page. Make sure they have different names.

The structure of the code is as follow where you modify the items "the liquid tag" and "descriptive name" accordingly:

You replace

{{ the liquid tag }}

with

{% section 'descriptive name' %}
  {{ the liquid tag }}
{% endsection %}

So you could also test variations on the product title:

{% section 'title' %}
  {{ product.title }}
{% endsection %}

Check Status Failed

If in step 5 of the instructions, Google Website Optimizer Installation Status gives you the following message "Installation not started yet", make sure your store is not password protected.

Examples In Google Optimizer

When looking at examples of the variations, it may take 30 seconds for it to display properly.

Note

You use the section and endsection tags to mark up the beginning and end of a section of Liquid/HTML in your template, and not to replace any Liquid tag. Give each of your section tags a unique name for your experiment.