Create Free Amazon Affiliate Product Box using GenerateBlocks

In this tutorial, we are going to create free Amazon Affiliate Product Box using GenerateBlocks with JSON file to download where you can import it. Also, we will try to make our Product Box reusable so that you can import and implement it into any post.

Most of us want to drive into Amazon affiliate and wants to earn a passive income. And you need some plugin to display product boxes. You can find many plugins that offer us to insert the product boxes using shortcodes or function.

AAWP is one of the best plugins to use for Amazon affiliate websites but for a new blogger, some of them cannot afford the plugin.

so I am going to create a simple product box for amazon affiliates and this is not the replacement of AAWP product boxes. But it is going to help new bloggers to get started with Amazon Affiliate easily.

Here, in this tutorial, we will cover the following aspects.

  • How to build product boxes using GenerateBlocks?
  • Responsive Product Box across multiple devices.
  • Using Inline SVG Amazon logo along with the product box.
How to Create free Amazon Affiliate Product Box using GenerateBlocks

Steps to Create Free Amazon Affiliate Product Box using GenerateBlocks

Before getting started, you need to install the GenerateBlocks plugin which is free to download and this plugin almost can accomplish anything using Container, Grid, Buttons, and Headline Blocks.

Read my GenerateBlocks Review also find the latest GenerateBlocks Tutorials in this blog. Moreover, Generateblocks works with every WordPress Themes.

1. Create Container Block

First, we need to get started with Container Block. It is the main block in which we are going to add Grid, Headline, Buttons, Images, Inline SVG code, etc.

You can only find Container Block after installing GenerateBlocks.

Container block in Generateblocks

2. Adding Grid Block

Now, we are going to add a Grid Block inside the Container Block. There are many options to choose a grid. Here we are going to use a grid with a width of 25% left and a width of 75% right grid.

25% width to the left side and 75% width to the right side in Grid Block

To add the grid, click on the plus (+) icon inside the container block. Furthermore, we are going to use more Grid inside the container to display Best Seller and In Stock boxes.

3. Adding Image and Content

In this section, we are going to add an affiliate image on the left 25% part and to the 75% part, we are going to add Headline and certain text in list format.

Now, go to the left portion and click on the plus button and choose an image block and select your affiliate product and align the image to the center.

Affiliate Product Image from Amazon

Now, on the right side we are going to add Headline and list under the headline.

Here, we are going to use Headline Block from GenerateBlocks not Heading from Gutenberg.

Now, click on the plus icon and add Headline Block and add affiliate product title with an affiliate link. Under the headline, block choose Element as a paragraph as it fits to our current product boxes

Affiliate Product Title with Link

Now under the Headline block, add a list block to add features/advantages of using the product.

Affiliate Product Description

4. Adding Buy on Amazon Button

Here we are going to add a Buy on Amazon button with an inline Amazon SVG Icon on the left side of the buttons.

Here we are going to use Buttons from GenerateBlocks, not from Gutenberg. First Add Buttons just after finishing 25% 75% Grid (not inside it) aligning the button to the right.

Adding Buy in Amazon Button

Now, we are going to change the color on the button and text and use inline SVG code to add the Amazon logo.

Click on the button and you will see the various settings block in the sidebar. Make Buy on Amazon Text bold & Go to the Colors block, change the text color to black, and background color to #fcb900. Also, copy and paste your affiliate URL here.

Coloring the Affiliate Button

Now go to the Icon block to add the Inline SVG icon. Copy this Inline SVG icon code and paste it into the HTML SVG icon box at the sidebar.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705c-.209.189-.512.201-.745.074-1.052-.872-1.238-1.276-1.814-2.106-1.734 1.767-2.962 2.297-5.209 2.297-2.66 0-4.731-1.641-4.731-4.925 0-2.565 1.391-4.309 3.37-5.164 1.715-.754 4.11-.891 5.942-1.095v-.41c0-.753.06-1.642-.383-2.294-.385-.579-1.124-.82-1.775-.82-1.205 0-2.277.618-2.54 1.897-.054.285-.261.567-.549.582l-3.061-.333c-.259-.056-.548-.266-.472-.66.704-3.716 4.06-4.838 7.066-4.838 1.537 0 3.547.41 4.758 1.574 1.538 1.436 1.392 3.352 1.392 5.438v4.923c0 1.481.616 2.13 1.192 2.929.204.287.247.63-.01.839-.647.541-1.794 1.537-2.423 2.099l-.008-.007zm3.559 1.988c-2.748 1.472-5.735 2.181-8.453 2.181-4.027 0-7.927-1.393-11.081-3.706-.277-.202-.481.154-.251.416 2.925 3.326 6.786 5.326 11.076 5.326 3.061 0 6.614-1.214 9.066-3.494.406-.377.058-.945-.357-.723zm.67 2.216c-.091.227.104.32.31.147 1.339-1.12 1.685-3.466 1.411-3.804-.272-.336-2.612-.626-4.04.377-.22.154-.182.367.062.337.805-.096 2.595-.312 2.913.098.319.41-.355 2.094-.656 2.845z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>

Also, add padding from the top to adjust the icon as in the screenshot. You can place the location to right or left. Here we select the left position.

Finishing making Buy on Amazon Buttons

5. Final Output of the Amazon Affiliate Product Box

Here in the final output of the amazon affiliate product box looks like the below image. Note that I have made a few additional changes like adding Best Seller and In Stock, border around the container to make the product box more attractive.

You can easily add these text using Grid, Headline, etc.

Final Amazon Affiliate Product Box using GenerateBlocks

Download Amazon Affiliate Product Box for Free

You can download the JSON file that I have created in this whole tutorial. Moreover, you can directly import it into your website and use it.

This is the whole process on how to download and use it in your blog post.

  • Download the zip file and extract it.
  • To import a file install Reusable Blocks Extended Plugin which makes the process lot easier.
  • The Reusable Blocks Menu appears in the dashboard.
  • Go to Reusable Blocks and import the product box JSON file.
  • Go to your post and add a plus button to add a reusable block.
  • Select the whole imported block and Convert to a regular block to edit the file.
  • Replace the product image, headline, list.
  • Enjoy the whole process.

Read Out: Create Pros & Cons Box in WordPress

Affiliate Product Box FAQs

How to use Amazon Affiliate Product Box for free?

You can simply download a free version of GenerateBlocks to create a free Amazon Affiliate Product Box or download the JSON product box file.

Can I use Affiliate Product Box in multiple posts?

Yes, you can use Product Box multiple times in a single post as well as you can use it in multiple posts at a time.

What is the advantage of using Free Amazon Affiliate Product Boxes?

The main advantage of using this free Affiliate Product Boxes is that you don’t have to pay for any other plugin and it is a great way to start your affiliate website.

Can I use Product Boxes for other affiliates beside Amazon?

The answer is yes, you can always edit the Product boxes to implement to any other affiliates to display products, to display the overall summary of your review, etc.

How to download free Amazon Affiliate Product Boxes?

Use the download button mention above in the articles, use reusable blocks to import the JSON file and import it into your post and convert it into the regular blocks and use it.

Conclusion

The whole process to create a free Amazon Affiliate Product Box is easier when you are using GenerateBlocks.
It is one of the best plugins where I can create anything from the testimonial section, author box and related posts, subscription box, pricing table, etc.

GenerateBlocks is not only for creating simple kinds of stuff but with this plugin, you can almost accomplish anything.

If you have any comment please feel free to drop below.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

13 thoughts on “Create Free Amazon Affiliate Product Box using GenerateBlocks”

  1. Hey, thanks for the helpful post! Can this be used in the Elements -> Hooks section of Generatepress? I tried it but the button doesn’t appear.

    Reply
    • Hi, this is GenerateBlocks tutorials so I think this is not possible using GeneratePress.
      Also, There will be two-button blocks after installing Generateblocks so don’t use Gutenberg buttons, use GenerateBlocks buttons.
      Or, use the file I have placed for downloads.
      Thanks

      Reply
  2. Hi Suraj!

    Is there a simple way to add a “show/hide-comments” toggle button on all my blog posts and pages, please? Sometimes there are too many comments, and I just want to hide them unless the reader really wants to read them.

    Reply
  3. I want to add a toggle button or some option to collapse the comments. If someone wished to read, they can click this button to show the comments. I am using WordPress comment functionality. No specific plugin installed.

    Is it possible?

    I have read and explored around the internet and forums for this but have not found anything concrete.

    Reply
  4. Hello Suraj,

    Thanks for this amazing post. Do you have any on how to create a product comparison table? Something like the AAWP plugin does, or maybe something with a vertical layout where you list a bunch of products?

    Thanks!
    Jose

    Reply
  5. Assuming that Jeff Bezos can get mad anytime when you use the Amazon logo on buttons? Should we place this logo icon or not. It can easily get out account suspended within no time !!!!!!!!!

    Reply
    • Hi Syed,
      Lots of affiliate plugins for Amazon are using logos so I think it won’t be a problem. Other than that you can also customize the product box according to your need.
      Thanks

      Reply

Leave a Comment