Add a price comparison to your WordPress website

By Neil on February 26, 2014

Promoting other companies products is a great way to earn money from your website/blog. Whenever someone clicks through a link on your website and is taken to a retailer where the product can be purchased you stand a chance of earning a commission on any sales (assuming you have an affiliate agreement set up). This is known as affiliate marketing.

There are many ways to increase the likelihood of visitors clicking through and buying products, and one such method is to add a price comparison. This adds real value to the person looking to buy a product, and will likely increase their chances of returning to your website and also clicking through to the retailer to make a purchase.

About this tutorial

This tutorial shows you how to use the WordPress plugin Datafeedr to add a price comparison set to your website. You will learn how to create a price comparison set and embed it on your WordPress website, with all links to retailers encoded with tracking codes so you will be credited with any commissions on sales you generate.

To read more about datafeedr visit the official datafeedr website.

This tutorial is part of a bigger case study series that is building an affiliate website from start to finish. Learn more here…

Small update of the price comparison shortcode

Step-by-step tutorial

Step 1: Sign up for datafeedr, which is an affiliate store platform for WordPress.

Step 2: While on the datafeedr website (www.datafeedr.com) click on the ‘Member’s Area’ link in the top right of the screen. Once in the member’s area click on the ‘The Factory’ link. The Factory is where you set up your affiliate stores and price comparisons.

Step 3: In The Factory area on the left hand side there is an area for ‘Your Stores’. Click on ‘Create a new store’. A pop-up window will appear asking you to input a store name. Call your store anything you like (here I called mine ‘Turbo Trainer Case Study Store’), and click ‘Create’.

Step 4: You will be taken to your store page ready to set up your affiliate store. In the top right of this page is a dropdown CHECKLIST showing you which store set up stage you have completed, but the first thing you should do is hover your mouse cursor over the ‘Store’ menu tab and in the dropdown list select ‘Basic Store Settings’ (see Figure 1).

Figure 1 Setting up the Basic Store Settings in datafeedr.

Step 5: A pop-up window will appear, put in the domain name of your website where the store (or price comparison as in this tutorial) will be shown. Do not put the http:// or the www. part of your URL (i.e. youwebsitename.com not www.yourwebsitename). Leave the ‘Auto update interval’ as default and change the ‘Currency sign’ to your currency. Click ‘Save’ and then have a look at the CHECKLIST in the top right of the screen to see if this stage is marked as complete.

Step 6: You need to add your merchants to the datafeedr factory. These merchants are the companies whose products you will be promoting, and are often linked to bigger affiliate networks, such as Commission Junction and Affiliate Window for example. You need to sign up to these affiliate networks yourself by visiting their websites because you will be assigned a unique affiliate ID for each one. You cannot sign up to affiliate networks through datafeedr itself.

Hover your mouse cursor over the ‘Factory’ menu tab and select ‘Your Merchants’. On the merchant page there is a big list of affiliate networks down the left side. Select the affiliate network you are signed up to and all of the companies (aka merchants) within this affiliate network are listed. Click on all merchants you are signed up to and whose products you want to promote. Once you have selected all of the affiliate merchants that you want in your datafeedr factory you are ready to filter these merchants down for your specific store.

NOTE: The datafeedr factory is the main set up area for all of your individual stores (you can have more than one store depending on which package you signed up for). It is like a general settings area. Stores are individual entities within the factory, and are set up specifically for individual websites on which they will appear.

Step 7: Click the ‘Store’ menu tab again and select your store from the left side list (if this is your first store there will only be one available). On your main store home page there will be a link to ‘Select merchants’, and this link is also shown under the ‘Store’ menu tab. Click this link and a pop-up window will appear showing all of the merchants you selected in the previous step. Check the boxes of the merchants that you want to use specifically with this store (this could be all of them or just a select few). See Figure 2.

Figure 2 Selecting store merchants in datafeedr.

Step 8: After you have chosen your store’s merchants you need to assign your unique reference ID’s so that all clicks are tracked to your account (so you get the commissions for any sales). From your store’s home page (also under the ‘Store’ menu tab) click ‘Add your affiliate ID’s’. A pop-up window will appear and you need to scroll down the list of affiliate networks and input your unique tracking ‘Affiliate ID’ next to the affiliate networks you are signed up to. You find these ID’s on the individual affiliate network companies websites.

Step 9: ‘Views’ are where you set up how different parts of your store look. We are setting up a price comparison ‘View’ in this tutorial, so from the list on the left side of the store home page click on the ‘Views’ tab. Several sub-categories will appear, and we need to select ‘Custom Views’. Now choose ‘Add a new view’. A pop-up window will appear where you need to input a View name (I called mine Price Comparison Case Study). Leave all other fields and options as default and click the ‘Create’ button.

A blank Custom Page view opens up and you need to drag modules into the module area. Drag the ‘Comparison set’ module into the module area (see Figure 3).

Once the module is in place click on the ‘Edit module template’ tab on the right side of this newly placed module (see Figure 4). A ‘Comparison set template’ window will pop up, and if you click on ‘Comparison Sets’ on the left hand list you will see a ‘Template 1’ in there. Hover your mouse cursor over this ‘Template 1’ link and a preview of what this template will look like is shown. This is how your price comparison will appear on your website if you choose to use this template layout. Click ‘Template 1’ so the code is placed into the comparison module. Click save changes.

Figure 3 Creating a new price comparison View in datafeedr.

Figure 4 Selecting the ‘Edit module template’ tab.

Step 10: Click on the ‘Categories’ menu tab to open the categories page. Here we will set up a new category under which we will create a comparison set. Click the ‘add a new category’ link at the top of the page. A pop up window will appear asking you to input a name. Call this new category something and then click ‘Create’.

Once this category is created you should click the ‘add products to the category’ link, or alternatively this link can be selected via the main ‘Category’ menu tab. You will be taken to a product search page, where you should search for a product you want to create a price comparison set for. In this tutorial I search for an ‘Elite Qubo Digital’ under the ‘Keyword’ filter, as shown in Figure 5. Remember it is only showing products that are supplied by the merchants you selected in Step 7.

If you are happy that the list of products includes the product you are looking for, click on the ‘create comparison set’ link below a representative product, as highlighted in Figure 5. The product you clicked will be highlighted at the top of the list and a new ‘Comparison sets’ tab will appear on the left hand column of the page. If you expand this ‘Comparison sets’ tab you will see the new product that you just selected. Now find the same product in the list from different companies and click on the ‘add to comparison set’ link, which is found in the same location as the ‘create comparison set’ link was for the first product you selected. Add as many products as you can find or so you are happy you have a good range of prices for your website users to compare.

Figure 5 Product search in datafeedr. Red circles highlight the Keyword search area and the ‘create comparison set’ link.

If you want to display Amazon products and prices you need to set this up separately. You need to configure the Amazon API settings within datafeedr, which are found by hovering your mouse over the ‘Factory’ menu tab and selecting ‘Amazon API Settings’. You will need to have signed up for an Amazon Associates account first to gain access to some configuration keys. Once you have Amazon access you simply click on the ‘Amazon Products’ tab on the product search page and do a search again for the product you want. Add any Amazon products to your comparison set. Note, make sure you add a new filter and select a ‘Locale’ filter. Set it to the country you want to get Amazon products for.

Step 11: The store/comparison set is set up now on your datafeedr factory, but you now need to link it to your WordPress website. Visit www.datafeedr.com/members-area/ and click on the ‘Download the Plugin’ link. You’ll be redirected to a new page, and here click the ‘Download Plugin’ button. This downloads a .ZIP file to your computer.

In your WordPress website dashboard click on the ‘Plugins’ tab and ‘Add New’. Next select ‘Upload’, ‘Choose File’, and find the datafeedr .ZIP file you just downloaded and click ‘Open’. Then click ‘Install Now’. Finally, once installed click ‘Activate Plugin’.

Under ‘Tools’ in your WordPress dashboard you will see a link for Datafeedr. Select this to open up the datafeedr configuration page within your website. The first thing you need to configure is your ‘Connection Key’. This key is found on your datafeedr store and is shown in the upper corner under ‘Store Connection Key’. See #3 in Figure 6. Copy your store key into your WordPress website and click ‘Save’. Two new ‘Update Settings’ buttons will now be shown in your dashboard, click on the ‘Update Products and Settings’ button to link up your website to your datafeedr store.

Still in your WordPress dashboard area for datafeedr click on the ‘Directories’ tab on the left side of the window. Then click the top ‘Set Up’ button. This configures all the directories for things like merchant logos etc. The only other configuration that is needed is the Amazon API settings, and these are the same as you filled in on your datafeedr factory (if you are using Amazon).

Step 12: Now that your datafeedr store is set up and linked to your WordPress website you need to place some code on the webpage (or in our case our custom post type) to display your stores price comparison set. This [short]code can be placed in to a standard body text area or in to a WYSIWYG (what you see is what you get) custom field area. See Figure 7

Input the shortcode [DFR:Custom View Name?compset_id=Compset ID], with the underlined bits replaced by your stores values. The ‘Custom View Name’ is the name you gave to your View, so in my case this was ‘Price Comparison Case Study’. The ‘Compset ID’ is the ID of the individual comparison set and can be found in the URL when you are clicked on your comparison set. See Figure 6 to see where to get the Compset ID from and Figure 7 to see the shortcode inserted in to a WordPress post.

Figure 6 datafeedr store highlighting (1) Custom View Name, (2) Compset ID, and (3) Store Connection Key.

Figure 7 Shortcode to display a datafeedr comparison set within a page or post.

When you save your page or post and view it you should see your product price comparison set with links through to each affiliate merchant. If you input your affiliate ID’s in to your datafeedr store then these clicks will be tracked and commissions generated if someone buys the product.

Figure 8 shows an example price comparison that was created through this tutorial. Also, one of my websites www.turbobiketrainer.com has many embedded price comparison sets, so head over there and have a browse if you want to see the datafeedr comparison sets on a live website. This website also has examples of custom post types and product filters/lists. If you want to learn more about these head over to my case study section of this website.

Figure 8 Embedded datafeedr price comparison set in a WordPress post.

Summary

Thanks for reading/watching this tutorial and if you have any questions please ask below in the comments or contact me via the contact page here or on Google+, Twitter, or Facebook. Adding a price comparison to your affiliate website will add real value to your users and will hopefully translate to more affiliate commissions.

Make sure you check out datafeedr if you are interested in making money by promoting affiliate products.

Good luck and again, please ask any questions no matter how simple they may seem to you.