Creating and Populating Content Widgets

From Wiki

Jump to: navigation, search

What are Content Widgets?

Content Widgets are a linking method enabling you to populate websites and emails with visual links to specific products. The products displayed in a Content Widgets are typically chosen by you and can be made as specific or generic to the site content.

Themed Widget displaying a variety of products
Merchant Widget

Getting Started with Content Widgets

First click on the link to Content Widgets from the Links & Tools menu from within your Darwin account.

Finding Content Widgets from the Darwin Dashboard

Step 1 – New to ShopWindow?

If this is the first time you have accessed a ‘ShopWindow enabled product’ you will be asked to activate your ShopWindow Dataset (you may have to wait for up to one hour for Affiliate Window servers to compile this).

Once you have an active ShopWindow Dataset the ‘Content Widgets’ link will bring you to the following screen, where you can choose to create a new Content Widget by clicking either of the links circled below.

New Content Widget links on the initial screen

Step 2 - Choose a Content Widget Template

Click any one of the templates on this screen. There are a number of tabs that you can choose to view the Standard Content Widgets, Themed Widgets, Branded Widgets or My Widgets (which are template backgrounds you have supplied to us to upload for your exclusive use). You can also refine the selection down by size etc via the ‘Refine By’ column on the left.

In this example we have selected the 600 x 520 Standard Content Widget.

The Content Widget template selection screen

Step 3 - Add Products to the Content Widget

Your Content Widget needs a pool of products to draw from. Each Content Widget product pool can only hold a maximum of 100 products. You can either build your own pool or use existing pre-built pools.

Entering the product search term "green"

The Nano-Shops, (which are the larger Content Widgets), have a scroll button across the bottom. Browsers can click the scroll buttons on an active Nano-Shop to the see the second, third, fourth etc, pages of stored products.

For purposes of this overall demonstration we are going to build a ‘green’ themed Nano-Shop. To find suitable products we can run a search for the term "green".

Entering the product search term "green"

The term “green” returns a set of 100 results taken from every sector merchant on the Affiliate Window network with a product feed. The page showing our “green” results below highlights the drag & drop feature of the Product Pool.

Product Results for the term "green"

A maximum of 100 products can be saved into a Content Widget product pool allowing a ready replacement if an ‘active’ product should be removed from a merchant’s feed. The results can be ranked by a number of factors:

  • Relevance (relevance to your search terms)
  • Popularity (based on click through rates, as tracked by Affiliate Window)
  • Price (most expensive or cheapest first)
  • Product Name (ordered alphabetically)
  • Product Category (Christmas Gifts, Women’s Jewellery, etc)
  • Merchant Name (ordered alphabetically)


After generating a list of products you can refine the list down with the ‘Refine By’ tool located on the left hand side. You can refine the results further by:

  • Price
  • Brand
  • Retailer

By selecting ‘More options’ you can search for products from

  • Specific merchants (one or several)
  • A specific product category (e.g. Clothing & Accessories, Shoes, etc)

You can also choose to

  • Include/exclude products with an ‘Adult’ theme, (default excluded)
  • View only products that have been identified as 'Hotpicks' (note each merchant has a maximum of 10 ‘Hotpicks’ products)
  • Exclude products that are not accompanied by an image
Finding Products, ‘More options’ expanded

Step 4 – Re-rank and Add Items to the Product Pool

Click & Drag items into or out of, the Product Pool. The rank order of the products in the Pool is the same as the order they will appear in your Content Widget. With each new selection the system will automatically save your Product Pool.

You can carry out as many searches as you want, each time adding more products to your Product Pool.

Image:Cw11.JPG The Hand Tool - Pick up and move each product around via this hand symbol. You can do this to change the order of the products within the product pool or to remove the product completely.

Image:Cw12.JPG The Magnifying Glass - Click this icon to see the product image, all the price details and the complete description in isolation.

Image:Cw13.JPG Minus - Click the minus sign to easily remove a product from the product pool




























Spider a webpage for appropriate search terms

Content Widgets can also look at a webpage and suggest search terms to help you find products that match the content of the site. To begin this process, click the ‘Spider Now’ button.

Starting the ‘Spider My Site’ process

You will see a new window where you can enter a specific URL, figure 11. Click the ‘Go’ button to have system identify appropriate search terms.

Enter a URL to spider

Below you can see a results page displaying terms suggested for the home page of www.allthingsgreen.com. Boldness and size reflect relevance for the search terms. Clicking on any of the terms/phrases adds it to your list of Selected Keywords. Once completed, click ‘Search’ to be shown a list of products matching these keywords.

Selecting suggested product search terms

Disappearing Products

A product deleted from a merchant product feed is automatically deleted from any Content Widget using it. When this occurs your widget products re-rank and the vacant position is filled with the next available product in your product pool.

To prevent all the products from being deleted from your product pool we run a script every seven days, refilling any depleted product pools with items that match the last search conducted on creation of the Content Widget. This ensures that your Content Widgets are always populated.

When you are happy with the products in your Content Widget and their rank order click the ‘NEXT’ button.


Step 5 – Customise the Look & Feel

A Content Widget (This does not include BrandedWidgets or Themed Widgets) can be coloured to suit the display environment.

The main way to customise a Content Widget is to change the colour of the product title, description, price, background or borders (the display title will be covered when we explore ‘More Options’)

Editing Colours

To change the colour of an element of your Content Widget, select the colour box of the corresponding heading, as shown below.

Changing the colours of your Content Widget

After selecting a colour tab you can choose any colour from the palette.

The colour selection palette and hexadecimal colour reference

Alternatively if you know the hexadecimal colour reference (e.g. F1F1F1 -the background colour for posts on the Affiliates4U forum) you can enter it at the bottom of the palette box and then click ‘go’.

Saving & Loading ‘My Palette’

In time you may choose to build many different Content Widgets with different products but maintaining the same look and feel. To speed this up the system can save any number of colour palettes. Simply name the palette and click the ‘Save as Palette’ button.

When you come to make your next Content Widget choose a palette name from the ‘Load Palette’ drop-down box and the saved profile will be applied to the current Content Widget.

More Options

Selecting ‘More options’ displays a set of checkboxes to help you further customise your Content Widget.

Customise Template, ‘More options’

The ‘Show Items’ options box

The ‘Show Items’ box, figure 19a&b, displays checkboxes to include the option of;

  • Price
  • Description (as supplied by the merchant)
  • Merchant Logo (some template restrictions)
  • Shop Dropdown (enables the user to view the product in the Content Widget from a specific merchant selected by a drop down menu. This feature is only available on certain templates)
  • Buy Now Button
  • Border
  • Image Border
  • Image Hover (enables the user to see a bigger image when they mouse over the product image. This feature is only available on certain templates)
Customise Template, ‘Show Items’

Ticking a relevant check box will automatically include it in your current Content Widget. Some features are only available on certain templates.

Widget elements

The ‘Behaviour’ options

The ‘Behaviour’ options box controls additional elements of your Content Widget including;

  • Display Title (adds text to the top of your Content Widget, some template restrictions)
  • Link Target (when the user clicks a link, it either opens up in a new or existing window)
  • Link Image (make the image a clickable link)
  • Link Description (make the description text a clickable link)
  • Link Merchant Logo (make the logo a clickable link)
  • Corner Style (opt for square or rounded corners for the widget)
  • Buy now or Info button design (opt for “Info” or “Buy now” buttons)
Customise Template, ‘Behaviour’
Widget elements

When you are happy with the look of your Content Widget, click the ‘NEXT’ button to move on to the next step.


Step 6 - Name & Save the Content Widget

In order to identify your Content Widget you should assign it a name. You have the option to also add a description, (e.g. the web page where it’s featured).

Naming your Content Widget

Click the ‘Save’ button to finish creating your Content Widget.


Step 7 –Add the Content Widget to your website

To display the Content Widget on your website, you will need to use the generated HTML code and place it within the make up code of your webpage.

To see all your Content Widgets simply click the ‘List Content Widgets’ button.

Four key functions can be initiated from this screen:

Image:Cw12.JPGPreview Widget to see a full size version of this specific Content Widget

Image:Cw27.JPGEdit Palette to edit the look, feel and/or name of a Content Widget

Image:Cw28.JPGEdit Products to change items in the Product Pool

Image:Cw29.JPGDelete will permanently remove a Content Widget from your list


Finally the code for any widget is accessed by clicking Pick up code.

Copy and paste the script onto your webpage or email.