Affiliate Box Using GenerateBlocks Free Version

In this GenerateBlocks post, we will see how you can easily create an affiliate box using GenerateBlocks free version.

With the rising trend of affiliate marketing, multiple bloggers have shifted their focus on Amazon affiliates and many other big affiliate networks.

However, writing information about products, product reviews, etc. requires content creators to add specialized affiliate boxes that pops out for readers. Eventually, converting into sales or affiliate commissions, to be precise.

Therefore, if there is a way to create these nice looking affiliate boxes for free, then that is a bonus for affiliate marketers.

Hence, I bring you a step-by-step guide on how to create an affiliate box using GenerateBlocks

  1. Create an outer Container block that holds the entire affiliate box
  2. Insert a GenerateBlocks Grid block of two columns to hold ‘Best Seller’ and ‘Sale’ labels
  3. Insert an inner Container block that holds product image, name, description, and affiliate buttons
  4. Add a Grid block of two columns
  5. In the first container of grid block add product image
  6. In the second container of grid block add Headline blocks for title and product features
  7. Lastly, add a GenerateBlocks button block to add affiliate button link

What is an Affiliate Product Box?

An affiliate product box is simply a content box that can be placed anywhere within your content.

It basically has 4 important elements;

  • Product Name
  • Product Image
  • Features or short description
  • CTA buy now button with an affiliate link to the product’s website

Imagine, you’ve written a great review about a hair product, and your content only has a few affiliate links within the text.

Do you think that is going to generate better CTR, compared to a specialized affiliate product box?


An affiliate product box contains product name, image, some unique features and a buy now button that straight-away takes the reader to the product’s website.

Inserting a small cookie on your reader’s computer.

You can create an Amazon affiliate product box, Walmart affiliate product box, or any other major affiliate network for that matter.

The difference lies only within the design style and your affiliate link.

How To Create An Affiliate Box Using GenerateBlocks?

First you’ll need to install and activate the GenerateBlocks plugin.

It is free for download, and helps you create practically anything on your website.

Plus, its works flawlessly with any other WordPress theme, and does not even slow down your site.

I’d also like to show you what we are trying to create before we actually start making it. So, you have an overall idea.

affiliate and deals product box using generateblocks with sale badge and multiple buttons
An Affiliate and Deals Product Box using GenerateBlocks

Time needed: 15 minutes

I am making this affiliate box using GenerateBlocks free version on GP Premium theme. However, your theme does not need to be a premium one.
Accomplishing this box has nothing to do with the theme.

  1. Add a GenerateBlocks Container Block

    This is the outer most GenerateBlocks container block and it will hold all the contents of affiliate product box within it.

    Websites with 1200 pixels to 1300 pixels site layout with or without sidebar can set the container block’s contained width to 700 pixels.
    Plus, apply right and left padding, border width, and border color to your container block.

    I have given;

    Contained width – 700 pixels
    Right padding – 10 pixels
    Left Padding – 10 pixels
    Border width – 2 pixels overall
    Border color – ECECEC

    outer container block for affiliate box using generateblocks

  2. Add an Inner Container block to hold GenerateBlocks Grid block

    In this step, we need to place two labels on the top corners of the outer container block.

    For that, we need to add an inner container block followed by a GenerateBlocks 2 column grid block.

    If you choose a 2 column grid block, you get 2 container blocks (as 2 columns) within it.

    The first container block will hold a GenerateBlocks Headline block of paragraph tag, with the text ‘Best Seller’. While the second container block will hold another GenerateBlocks Headline block of paragraph tag, with the text ‘Sale’.

    In this step, I’m only going to add that inner container block and show its image.

    gb inner container block to hold a two column grid block

  3. Insert a GenerateBlocks Grid block of 2 columns

    Now, from the list view, click on the inner container block and insert a two column grid block.

    Change Horizontal Gap between both the columns to 487 pixels.

    Note:- The values mentioned here will only display a good design if you have followed from the beginning.

    Change Vertical Alignment from default to top.

    customizing grid block for adding top labels in affiliate product box

  4. Customize both the Container blocks of the Grid block

    For the labels to stay at the top corner of the outer container block, you will need to customize padding and margin of both the containers present inside the grid block.

    Plus, apply background color to make them really pop out, when your reader looks at the affiliate product box.

    Customization I’ve made;

    Grid block first container block
    Top padding – 3 pixels
    Bottom padding – 3 pixels
    Right margin – -8 pixels
    Left margin – -10 pixels
    Background color – E47911
    Text color – FFFFFF

    Grid block second container block
    Top padding – 3 pixels
    Bottom padding – 3 pixels
    Right margin – -10 pixels
    Left margin – 45 pixels
    Background color – 27AE60
    Text color – FFFFFF

    customizing sale and best seller container blocks in affiliate box

  5. Add a Headline block to the Grid’s first Container block

    Insert a GenerateBlocks headline block to the first container block and add text ‘Best Seller’.

    Change the tag to paragraph, customize font size to 15 pixels and transform text to uppercase.

    Settings done are as follows;

    Headline Tag – Paragraph tag
    Font size – 15 pixels
    Font Transform – Uppercase
    Bottom margin – 0 pixels

    headline block in grid's first container block of affiliate product box with generateblocks

  6. Insert a Headline block to the Grid’s Second Container block

    Insert another GenerateBlocks headline block to the second container block and add text ‘Sale’.

    Change its tag to paragraph, customize font size to 15 pixels and transform its text to uppercase.

    Similarly, settings are as follows;

    Headline Tag – Paragraph tag
    Headline align – center
    Font size – 15 pixels
    Font Transform – Uppercase
    Bottom margin – 0 pixels

    headline block in grid's second container block of affiliate product box using generateblocks

  7. Add a new Container block

    Go to your list view, click on the outermost container block and add a new container block.

    We are going to accommodate all the product information like image, name, features, etc. in this GenerateBlocks container.

    Plus, give an overall padding of 30 pixels to this container block.

    generateblocks container block to hold affiliate product's information

  8. Insert a Grid block in the above Container

    You need to add a two column grid block to the container block.

    Give a horizontal gap between both the columns of 20 pixels.

  9. Customize first container of grid block

    From the list view, click on the first container from the grid block and reduce its layout to 35%

    Next, change the vertical alignment from default to center.

    Give top padding of 20 pixels and reduce the top margin to -5 pixels

    Now, add a GenerateBlocks image block and upload the product image.

    generateblocks container block to hold affiliate product image

  10. Customize the second container block of grid block

    The left hand side of our affiliate box now has a product image. It is time to customize the right hand side.

    In this side, we are going to add multiple GenerateBlocks headline blocks to display product title and product features.

    Increase the container block’s width to 65% and reduce its top margin by -5 pixels.

    generateblocks container block to hold affiliate product title and product features

  11. Add GenerateBlocks Headline block for affiliate product title

    From the list view, click on the second container and add a GenerateBlocks headline block.

    Change the headline block tag to paragraph tag, align to center, reduce the font size to 18 pixels, and select font weight as 600.

    Also, give bottom margin of 20 pixels and add the product’s affiliate link to it.

    Changes done are as follows;

    Align Headline – Center
    Font size – 18 pixels
    Font weight – 600
    Bottom margin – 20 pixels

    affiliate box product title using generateblocks headline block

  12. Insert GenerateBlocks Headline block for product description

    Since, products have lot of description, we are going to make an ordered list, but not using the core list block.

    In fact, we will adjust the font size and margin of the first headline block and just duplicate it to make few more points that describes the product in brief.

    Click on the second container block, from the grid block, and insert a headline block.

    Change its tag to paragraph tag, reduce the font size to 14 pixels, and add a bottom margin of 6 pixels.

    Under GenerateBlocks Icons, select an icon, and make the icon size 6 pixels.

  13. Duplicate the Headline block for creating description points

    Now that you already have a product description point ready, just duplicate that GenerateBlocks headline block to create few more points, and update the content.

    affiliate box product description list

  14. Insert affiliate product buy now buttons

    By now our affiliate product box is almost ready and it also looks very good.

    The quality of our design is premium and is at par with the latest affiliate product box plugins. By using the free version of GenerateBlocks if you can achieve this level of design, imagine what you can do if you’ve got GenerateBlocks pro.

    Now, click on the inner container block, that is holding the two column grid block and insert a GenerateBlocks Buttons block and increase the top margin to 25 pixels and align it to the right.

    customizing generateblocks button block for affiliate box

  15. Customize the button relevant to the product

    The GenerateBlocks buttons block creates a button within the block.

    You need to make that button relevant to the product. Meaning, add text like ‘Buy Now’ or ‘Check on Amazon’, add an icon, change colors, etc.

    In the list view, under the main GenerateBlocks button block there will be a Button, click on that button.

    Do the following changes;

    Change text – Check on Amazon
    Font size – 16 pixels
    Letter spacing – Medium
    Add icon – Right Chevron icon
    Icon placement – Right
    Icon size – 16 pixels
    Top padding – 8 pixels
    Right padding – 13 pixels
    Bottom padding – 8 pixels
    Left padding – 13 pixels
    Right margin – 10 pixels
    Border Size – 2 pixels overall
    Border Radius – 5 pixels overall

    Normal Button Colors

    Background color – 1D7E9E
    Text color – FFFFFF
    Border color – 1D7E9E

    Hover Button Colors

    Background color – FFFFFF
    Text color – 1D7E9E
    Border color – 1D7E9E

    designing affiliate product box button

  16. Duplicate the button

    Now that you already have a button ready, just duplicate the button, change the text from Amazon to Walmart, change the link and color settings.

    For duplicating the button, you will need to click on the main buttons container and press the + icon.

    Following that, adjust the spacing between the buttons accordingly.

    There you go, your affiliate product box is completely ready.

Creating this affiliate box was not only easy, but it also gives a similar look like the ones you see created via premium plugins.

Such affiliate boxes are independent of affiliate networks. Meaning, you can just apply the affiliate link offered by the provider and you are ready to go.

AAWP – The Premium Amazon Affiliate WordPress Plugin

In the segment of Amazon affiliate marketing, many professional marketers are already using a paid plugin called AAWP.

AAWP is nothing but an Amazon Affiliate WordPress plugin that comes with different styles of prepared templates which are not only mobile responsive, but also come with pre-set tracking ID.

AAWP Affiliate Products & Deals Box

Ratings, reviews, prices, etc. all fall under data fields that automatically get updated via the Amazon api. This is not possible with a free plugin.

aawp comparison table with updated prices and ratings
A Sample Comparison Table from AAWP

Also check out the image showing a comparison table with updated data fields from Amazon.

Think of AAWP as a paid GenerateBlocks alternative for creating affiliate boxes, pros and cons table, affiliate comparison table, summary box, versus box, etc. All with tracking ID, geotargeting and dynamic fields updates.

But, unfortunately AAWP does not have a free version.

Therefore, this post was specifically dedicated to new users or beginners who would like to create affiliate product boxes using a free plugin.


You can create various things using this WordPress plugin; like related posts, latest posts, custom header, custom footer, etc.

The best part is that 99% of your design requirements get fulfilled with the free version of GenerateBlocks.

Perhaps, if you want to add more flair to your website’s elements or sections, GenerateBlocks patterns is the solution, and that is available with the pro version.

A good GenerateBlocks alternative is Kadence blocks. If you are using Kadence blocks and are wondering how to create an affiliate box. Don’t worry, I have a post that shows all the steps about creating an affiliate box using Kadence blocks.

Share and Enjoy !

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

Leave a Comment