NOTE: The add-on is available exclusively with the Advanced plan. To access it, you will need to upgrade your plan here.
Overview
ThirstyAffiliates now includes the Product Displays feature in its link management tools. With this feature, you can seamlessly convert plain text links into visually appealing product showcases, complete with images, detailed descriptions, pricing information, and a prominent “buy now” call-to-action button.
Furthermore, this tool provides supplementary engagement options such as a recommended badge and an extra call-to-action button.
This guide explains how to install and use the Product Displays add-on on your website.
What Are Product Displays?
Product displays enhance your website by showcasing products in an engaging format.
They replace basic text links with visually appealing representations, featuring images, descriptions, prices, and ‘buy now' buttons.
This user-friendly format helps visitors quickly understand the products you're promoting.
Beyond aesthetics, product displays improve the website's overall user experience, making it easier for visitors to navigate and explore, potentially leading to increased commissions and sales.
Instal and Active the Product Display Add-on
Your first task is to install the Product Displays add-on.
- Navigate your WordPress Dashboard > ThirstyAffiliates > Add-ons. If you don’t see this page, you’ll need to update your version of the ThirstyAffiliates plugin.
- Locate the Product Displays add-on and click the Installation and Activation buttons to install it.
Once activated, the product display option will be added to the affiliate link editor screen.
Configure Product Displays Settings
Prior to creating your product displays, you have the option to configure the button colors for these displays.
Navigate to ThirstyAffiliates > Settings > Product Displays. Here you can choose the following colors:
- Button Background Color
- Button Text Color
- Button Hover Background Color
- Button Hover Text Color
Additionally, you can add your Affiliate Disclosure text to be displayed within your product displays.
How to Create a Product Display
Product displays can be enabled and customized individually for each of your affiliate links.
Here's how to set them up:
- Navigate to ThirstyAffiliates > Affiliate Links.
- Click on the New Affiliate Link button and create your ThirstyAffiliates link by adding the necessary data. Additionally, a product display can be added to an existing affiliate link by hovering over the link and clicking Edit.
- While editing the link, scroll down to the Product Display section:
- Select your desired product display Theme from the available options: Basic, Boxed, or Sharp.
- Next, under the Product Image option, click the Update Image button. This will open a popup where you can upload an image or select one from your media library. Click Use this image to add it as your product image.
- Type in the product description in the Description field. This description will appear next to the product image.
- Product displays by default come with a single Buy Now call-to-action button. You can modify the button label by adding your custom text to the Primary Button Text field.
- You can also add the price of a product (Price) and a custom badge (Badge Text).
- Optional: you can add a review button that links to additional information associated with the product on display. Just add the linking page URL (Review URL) and the button label (Review Button Text)
- Click the Save Link button to save changes.
Product Displays offer a live preview feature in the top section. Any adjustments you make to the product information will instantly reflect in the preview.
How to Add Product Displays to Your Content
After you've added the product display to your affiliate link, the next step is to incorporate it into your website content. You can achieve this in 2 ways:
- ThirstyAffiliates Product Displays Block (Gutenberg): If you're using the Gutenberg editor, you can simply insert a ThirstyAffiliates Product Displays block. This block allows you to easily integrate the product display into your content.
- Shortcode: Alternatively, you can use a shortcode to insert the product display into your content. This method is applicable if you prefer using the classic editor or other content creation tools that support shortcodes.
Add a Product Display Block (Gutenberg)
This method is specifically designed for users who utilize the default WordPress Block editor, also known as Gutenberg, for creating their content.
In this case, you can easily add any of your product displays using the dedicated block:
- Start editing your content (page, post, etc.) with the Block editor.
- Click on the block inserter (the + icon) button and search for the “TA Product Display”.
- Drag and drop, or click on the TA Product Display block to add it to the desired place in your content.
- Click the Add Display button to open the popup.
- Select a Single Link, and type in the name of the link you need into the search field. This will automatically pull in the product display for the chosen link.
- Click Update to save changes to your content.
Add a Product Display Shortcode
You can also incorporate your product displays using a shortcode. This approach allows you to embed product displays into your content using any editor that supports shortcodes.
This is the method to choose if you're working with Elementor, Divi, or another page builder, including the default Gutenberg editor.
Product display shortcodes are available within the affiliate links settings:
- Navigate to ThirstyAffiliates > Affiliate Links.
- Find the affiliate link you need, and click Edit to access the link settings.
- Scroll down to the Product Display section.
The shortcode will be automatically saved to your clipboard.
Open the content you wish to add your product display to.
- Start editing your content (page, post, etc.) with the editor of your choice.
- Add the shortcode element of your editor (e.g. Elementor’s Shortcode widget, or Divi’s Code module) to the content.
- Paste the product display shortcode into the shortcode element.
4. Click Update to save changes to your content.
Product Display Groups
Product Display Groups allow you to showcase multiple product displays together. Thus, you can group your individual links and import them all into your content using only one shortcode.
How to Create Product Display Groups
Product Display Groups allow you to collectively showcase multiple product displays, making it easy to group individual links and insert them into your content.
NOTE: You must have already created product displays for each individual link before you can move forward with creating a group.
- Navigate to ThirstyAffiliates > Display Groups.
- Click on the Add New Post button.
- Add the Display Group name.
- Under the Group Type dropdown, choose if the product display should be organized as a List or a Grid.
Note: By default, if the Group Type is set to Grid, product displays will be shown in two columns. On smaller screens and smaller content widths, the Grid will organize product displays into a single column. Thus, the recommended content width (max-width) is 1200px to ensure that the displays show in the two-column layout. - In the Links field, start typing the name of the first affiliate link you wish to add to this group. Select the link from the link to add it to the group.
- Repeat the previous step for all of the affiliate links that should be included in this group.
- Click the Publish button to create a group.
If needed, you can remove links from your groups by clicking the X icon of the link.
How to Insert a Product Display Group via Block
The TA Product Display block functions seamlessly with your groups, operating in the same manner as it does for individual links.
The only variation occurs in step 4 of the process when inserting a group into your content using the block.
In this step, rather than selecting “Single Link,” opt for the “Display Group” option.
Now, type in the name of the group you need in the search field to pull in the display group.
How to Insert a Product Display Group via Shortcode
Again, you can include a product display group in your content using a shortcode, just as you would an individual product display.
To find your product display group shortcodes, follow these steps:
- Navigate to ThirstyAffiliates > Display Groups.
- Find the display group you need, and click Edit to access the group settings.
- Click on the Copy Shortcode button.
The shortcode will be automatically saved to your clipboard.