Implementation Guide for Price Comparisons in Commerce

Implementing Price Comparisons are quick, easy, and simple. This guide will walk you through the basics of how to create, edit, and maintain your Price Comparisons. Want to know more about how Price Comparisons work? Check out our overview of Price Comparisons here.

How do I implement a Price Comparison?

To get started, go to your Platform and click the "Create" button under Commerce. From here, you will see the option for "Price comparison". On this page, if you have previously created any Price Comparisons, they will be listed here. 

To create a new Price Comparison, select the site you want to add the Price Comparison to under the "SITE" dropdown menu. Then, click the blue "+ Create a price comparison" button in the top right-hand corner. 

A menu card should now appear prompting you to double check which site you are creating the Price Comparison for and the country that you want to include merchants from. If you need to modify any of these options, click the dropdown menu to select a new option.

Now you can start putting the product you want to showcase in your Price Comparison! In the search bar, you can search for a product either by the name of the product, the URL of the product, or the UPC of the product. Hit enter or click the "Search" button to return a list of available products and merchants.

Your Price Comparison will default to showing up to four merchants depending on the product that you have submitted for the Price Comparison. To modify what products/merchants appear in the Price Comparison, click the "Filter merchants" button in the top-right corner of the "Configure and preview" tile. Here, you can select/deselect merchants that appear in your Price Comparison or adjust the price range of the product you're looking to promote. 

 On the left side of the "Configure and preview" tile, you can modify the appearance of your Price Comparison using the following settings:

• Display type: the format that your Price Comparison is displayed as (table, text, or buttons)

• Template layout: modifies the way that the Price Comparison appears, such as the colors of the buttons, images that appear, etc. Click here to learn more about making your own template.

• Number of merchants: the number of merchants that appear on the Price Comparison

• Geolocate: customizes the Price Comparison to display merchants based on the geolocation of the reader (i.e. a reader from the UK would see UK merchants instead of US merchants)

• Tracking ID (optional): appends a tracking code called a CUID to track the performance of clicks and revenue associated with your Price Comparison. Click here to learn more about how CUIDs work.

When you are satisfied with the appearance of your Price Comparison, click the blue "Get Code" button at the bottom of the menu. Two snippets of code will appear - the Price Comparison code (i.e. the raw code that generates your Price Comparison module) and the Commerce JavaScript (i.e. the code that empowers the affiliate links in the Price Comparison). Both code snippets are necessary for the Price Comparison to appear.

How do I install the Price Comparison?

To install the Price Comparison, you will need two snippets of code:

• Price Comparison code: the code that provides the actual Price Comparison widget, which is modified by selections you make when you create/edit your Price Comparison

• Commerce JavaScript: the code that empowers the affiliate links and monetizes the links on the Shopping Gallery

Both of these code snippets are necessary for your Price Comparison to work properly! If you do not implement these both in conjunction with one another, you will not be able to properly monetize your content nor will you be able to populate your Price Comparison.

Price Comparison Code

The raw code for the Price Comparison can be placed wherever on the page you'd like the Price Comparison to appear. This can be within your blog content, editorial content, etc.

Commerce JavaScript

This code must appear on any page in which a Price Comparison is present. This code can be placed anywhere on the page, but we recommend placing it just before the </body> at the end of your page. As long as this code snippet loads when the page loads, that's all that matters! You can check out this article for more information about how the Commerce JavaScript code snippet works. If you have multiple Price Comparisons on the same page, only one Commerce JavaScript code snippet needs to be on the page for the Price Comparison to function correctly.

How do I create my own Template for Price Comparisons?

When creating your Price Comparison, you may notice that you have the ability to create your own template. This allows you to build out a theme/aesthetic that matches your publication and can be reused in all your subsequent Price Comparisons!

To make a new template, you can craft one under your "Template layout" settings when building a Price Comparison. Click on the arrow in the dropdown menu and click "Create a new template" to get started. You will be prompted to name your template - enter a name under "Template name" and click "Save" when you are finished.

You should now see a "Customize" arrow appear at the bottom of the list of options in the left column under "Configure and preview." Click on "Customize" to edit the template. You can modify the template using the following settings:

• Font: the style that the text will appear in your Price Comparison

• Font color: the color that the text will appear as in your Price Comparison

• Font size: the size that the text will appear as in your Price Comparison

• Call to action text: the text that will appear in the buttons/links to your product

• Button font size: the size that the text will appear as in the buttons/links to your product

• Button font color: the color that the call to action text will appear as to your product

• Button background color: the color of button within your Price Comparison

Additionally, if you would like more customization, you can click "Edit CSS" to open up a code editor that allows you to manually code your template. Make sure to click "Save" in the code editor if you do modify any code!

Once you are satisfied with the appearance of your template, click on the "Save template" button at the bottom of the column on the left-hand side. Text should appear in the bottom right-hand corner of your screen stating "Your template has successfully been saved." when the template is finished. 

If you ever need to modify your template in the future, select the template you'd like to modify under the "Template layout" dropdown menu and modify the appearance of your template to your liking. Click on the "Save template" button at the bottom of the column on the left-hand side. Text should appear in the bottom right-hand corner of your screen stating "Your template has successfully been saved." when the template is updated.

I still need help.

Feel free to reach out to our support team if you have any additional questions or concerns about getting started with Price Comparisons.