One Widget Per Product

There are times when you would like to add a different widget for each of your product pages, but adding the snippet to the Description field doesn’t work well with your theme/layout. This tutorial will show you how to modify your product.liquid page to achieve this desired layout.

Prerequisites

In order to set this functionality up, you will need to have first done the following:

  1. Create a different campaign for each of the products that you would like to show this functionality.
  2. Create a widget for each of the campaigns you created in step one.
  3. Find the handle for each product you want to support.
  4. Figure out which of your template files is used on your product details page.

Steps

  1. Go to your Shopify Admin Dashboard.
  2. Click Online Store and then Themes.
  3. On the resulting page, click the button on the top right that says […] and select Edit HTML/CSS.
  4. Open the product.liquid template.

Once you have decided where in the page you want it displayed, you can add the following code:

  • Now check that everything is working by looking at your site and the product page (where the widget should show up) and any other product page (where it should not show up). If your looking to only show the widget on one product page, then you’re done!

Steps to add the widgets to more than one product page

To add a new widget to multiple products, so each product can have its own set of images displayed follow the steps below:

  1. Find the code that you added above.
  2. Add an elsif statement as bellow (note that this includes both product pages and should be a replacement for the above code, not added to the above code).
  • Continue adding elsif statements, one per product that you would like to add.

Finding Your Product Handle

A product with the title “Shirt” will automatically be given the handle  shirt.

If there is already a product with the handle shirt, the handle will auto-increment.

In other words, all “Shirt” products created after the first one will receive handles like shirt-1shirt-2, and so on.

Whitespace in titles are replaced by hyphens in handles. For example, the product title  My rainbow shirt will result in the handle my-rainbow-shirt.