How to Create an Affiliate Product Box With Kadence Blocks

In this tutorial, I’ll show you step-by-step how to create an affiliate product box in WordPress using the Kadence Blocks plugin which is the most popular Gutenberg extension plugin on the market.

Having an attractive affiliate product box will draw your visitor’s attention to it and increase conversions by using a prominent Call To Action (CTA) button for the user to purchase the product.

Best of all, this can be done using the 100% free version of Kadence Blocks.

For this tutorial, I’ll be using Amazon Associates to provide the product image and the Amazon text short link for the CTA button.

You can learn how I use product boxes like these to write product reviews that generate $1503/month.

I also have a tutorial on how to automatically add an affiliate disclaimer to your blog posts if you’re using Kadence Theme Pro which pairs perfectly with this affiliate product box.

Here’s the final affiliate product box we’ll be building with Kadence Blocks:

Final Affiliate Product Box Example

Let’s get right into it.

Use the Kadence Blocks affiliate product box tutorial guide below to jump around as you need.

How to Create an Affiliate Product Box With Kadence Blocks:

1. Create Top-Level Container
2. Add Inner Columns
3. Add “Our Pick” Callout
4. Add Product Image
5. Add Product Description
6. Add “Check Price on Amazon” Button

Kadence Affiliate Product Box Video Tutorial

If you’re a visual learner, here’s a video tutorial showing you exactly how to create an affiliate product box using Kadence Blocks:

Import This Affiliate Product Box for Free

In order to get this design on your website for free, do the following:

1. Go to Start Blogging Blocks and fill in the form to get a free license sent to you.
2. Once you have your free license, you can connect to our cloud in 30 seconds.
3. Last, go to your Kadence Design Library on a blog post or page, click on the ‘SB Blocks‘ tab to access our library, and then find this Product Box design which will be imported instantly when you click on it.

It’s that easy! No need to take the time to build the box yourself. :)

If you don’t want to use our free product and would rather build the affiliate product box yourself, then keep reading and follow along!

Setup – Install Kadence Blocks Plugin

Before we get started, make sure that you install the free Kadence Blocks plugin on your website.

We’ll be able to build the entire affiliate product box using the free version of Kadence Blocks.

That being said, the pro version of Kadence Blocks adds several new premium blocks to use, plus you will be able to add things such as animations to your CTA buttons which can definitely help increase conversions.

Kadence Blocks Pro is included with Kadence Theme Pro in all of the Kadence Bundles.

1. Create Top-Level Container

With Kadence Blocks install on your website, the very first thing we need to do to create our Amazon Affiliate product box is to add a Row Layout in Kadence Blocks which will be our top-level container to hold everything.

The Row Layout block is the core and foundation of building pages and sections in Kadence Blocks.

In order to add a Row Layout block, you can click the blue ‘+‘ button in the upper-left of the Gutenberg editor and choose “Row Layout.”

Otherwise, a shortcut that I like to use is to type a forward slash ‘/‘ and then type the block you want. So, you would type /row layout like so:

After you choose the “Row Layout” block, you’ll be shown a screen to choose your layout which will be the number of columns you want your row to have.

Choose the first option to only have 1 column (or section) for our top-level container.

Once we have our single-column row layout added, we need to set the width to match your blog post content width.

In the “Block Settings” in the right-hand sidebar, open the “Structure Settings” section.

Find the setting that says “Content Max Width Inherit from Theme?“

If you toggle this setting on, the content of the row layout will automatically match the max-width set in your Kadence customizer for your website.

For me, I use a sidebar on all of my blog posts (as you can see with this blog post) and I like to have a content area of around 800px.

Therefore, we are going to set our affiliate product box max-width in the Row Layout block settings to get our container set up correctly.

First, make sure your Row Layout block is chosen. Then, in the Structure Settings, disable the “Content Max Width Inherit from Theme?” option which allows you to specify a custom max-width.

I set the “Custom Content Max Width” to 800px since that is the width of my content area and I believe this affiliate product box looks really good at 800 pixels wide.

Obviously, you can set the max-width to be whatever fits your blog.

That’s the only change you need to make to the Row Layout itself.

Now, we need to make two quick changes to the actual section which is your column.

This part is a little tricky for beginners, but it’s really easy to pick up once you do it.

In order to get from our “Row Layout” block to our “Section” (the column itself), you’ll want to go up to the upper-left of your Gutenberg editor and choose the “List View” icon to open up the list view.

The List View received a big upgrade with WordPress 5.8 and it’s a really nice way to see your entire layout broken down block-by-block.

After you open your List View, click on the “Section” nested underneath your “Row Layout.”

You’ll know you’re in the right area because your block settings on the right-hand side will change to show you the Kadence section settings.

With your section chosen, we are going to add a border, box-shadow, and also give the section padding so that our affiliate product box content has some breathing room.

First, open up the “Container Style Settings” and do these three things:

1. Set border-width to 4 px.
2. Set border color.
3. Set box-shadow.

For the border color, I linked it to one of my global palette colors which has a hex value of #1A202C.

Check out my post on how to use the Kadence global color palette to supercharge your brand if you want to learn more.

For the box-shadow, I have an ‘X’ value of 0, a ‘Y’ value of 7, and a Blur value of 20. The box-shadow color is also linked to one of my global palette colors which has a hex value of #718096 and an alpha value of 1 so that it’s a fully solid color.

The very last thing we need to do before our top-level container is complete is to add padding to the section.

Make sure you are still in the section and not in the row layout.

Go to the “Padding/Margin” section within your block settings and set the padding to 20px all around.

Our top-level container is complete! If you did everything correctly, your top-level container should look like this in your Gutenberg editor:

You can see we have a border of 4px set, a nice box-shadow to give our affiliate product box some depth, and 20px of padding to give our inner content some breathing room.

Now it’s time to move on to Step 2 where we will add our inner columns for our affiliate product box.

2. Add Inner Columns

With our top-level container complete, now it’s time to add our inner columns which will contain the content for our affiliate product box.

We need to add two different row layouts:

1. Single-column row layout which will turn into “Our Pick” callout
2. Two-column row layout which will hold our product image, description, and CTA button

Click on the ‘+‘ button block located inside your container and choose “Row Layout.”

When given the option to choose how many columns you want, choose the single-column (first) option.

With the single-column row layout added, we now need to add a two-column row layout underneath this one.

Choose the ‘+‘ button below your row layout to add another block below the first row.

Choose a “Row Layout” block again, but this time, choose two columns instead of one.

The structure of our Kadence Blocks affiliate product box is all set up!

Your affiliate box should look like this in the Gutenberg editor now:

I have added labels in the image above so you can better understand what each piece will end up being when we are all finished.

Also, if you have your “List View” open still, your structure should look like this:

I added matching labels in the list view so that you can match up which row layout corresponds to the ones shown in the editor in the previous image.

3. Add “Our Pick” Callout

With our structure all in place, now it’s time to start adding content! Let’s work on adding the “Our Pick” callout to show visitors our top product recommendation.

We will use the single-column row layout that we added in the previous step to create the label that says “Our Pick” in the upper-left of our product affiliate box.

Click on the ‘+‘ button for our first row layout within our container and choose “Advanced Heading” to add the Kadence heading block.

Once we have an advanced heading added, there are a number of things we are going to set in order to get our callout to look the way we want.

First of all, add text for whatever you want your callout to say. For this affiliate product box tutorial, I will type the words “Our Pick.”

However, you can have this say anything you want. For example, “#1 Pick,” “Top Pick,” “Top Product,” etc.

Next, we need to go into the advanced heading block settings and change some things.

Heading Settings:

1. Change the HTML Tag from H2 to a Paragraph.
2. Change Text Alignment to Center.
3. Set heading text color.
4. Set heading background color.

The reason we change the HTML Tag from an H2 to a paragraph is that we don’t want the words “Our Pick” to be a heading. It doesn’t make sense for SEO purposes.

For the “Heading Color,” I chose white from my global color palette.

For the “Heading Background Color,” I chose the same dark global palette color that I chose for the top-level container border so that the callout will blend in nicely with the border. The hex value I used is #1A202C.

Advanced Typography Settings:

1. Change Text Transform to Uppercase
2. Change Font Weight to Extra-Bold 800

Using the text-transform will force our callout to be all uppercase so it reads “OUR PICK.”

For the Font Weight, your options may be limited depending on the font that your website is using.

Personally, I use the System Default fonts in the Kadence customizer which is what I highly recommend since it’s the fastest way to run your site.

System fonts don’t require any downloading at all and you also get the option to use all nine font weights for free (from 100-900 weight).

Advanced Heading Spacing Settings:

1. Set padding to 5px (top), 10px (right), 5px (bottom), and 10px (left).

Setting this padding on our Advanced Heading block will give us a little bit of breathing space around the words “Our Pick” that you’ll be able to better see when we change our row layout and section settings next.

If you did everything correctly up to this point, your Kadence Blocks affiliate product box should look like this in your Gutenberg editor:

We’re almost there! We have all of the correct settings at the “Advanced Heading” level, but now we need to jump two levels up to the “Row Layout” that is holding the advanced heading.

In your List View, click the “Row Layout” level that is two levels above your advanced heading. This is the container that holds the “Our Pick” callout.

At the row layout level, we only need to make one quick change.

Row Layout Padding/Margin Settings:

1. Change the Top and Bottom padding from 25px to 0.

Changing the ‘Top‘ and ‘Bottom‘ padding from 25px to 0 will take away the default padding that gets added to Kadence row layout blocks and will condense the space around our callout.

Now, the last thing we need to do before we finish our callout is to change a couple of section settings.

In your List View, click the “Section” level that is right above your advanced heading.

At the section level, we only need to make two quick changes.

Section Align Settings:

1. Change the Inner Block Direction from Vertical to Horizontal.

Changing the “Inner Block Direction” from Vertical to Horizontal will make our callout be inline and will take all the extra space away from the left and right that you were seeing before.

Section Padding/Margin Settings:

1. Change ‘Top‘ margin to -42px and ‘Left‘ margin to 30px.

Using a ‘Top‘ margin of -42px will pull the callout up and in line with our affiliate product box border. Using a ‘Left‘ margin of 30px will push the callout to the right so that it “floats” above the product image (which we will add in our next step).

These exact padding values may need to be tweaked depending on your setup. If the “Our Pick” callout doesn’t look centered on the border, feel free to tweak the margin values so that it’s perfectly centered where you want it.

Woohoo! The “Our Pick” callout is officially complete! Your Kadence affiliate box should look like this in your Gutenberg editor now.

Time to start adding our product image!

4. Add Product Image

So far, we have our top-level container, inner columns, and callout all finished.

The next step we have to do is to add our product image for our affiliate product box.

As I mentioned for this tutorial, I’m going to be using Amazon Affiliates to grab the product image to use and for the CTA button in a later step.

Before we add our product image, I want to mention a few very important points:

1. Make sure you have permission to use the product image you are adding to your product affiliate box. You cannot grab any product image off of a website and use it without permission.
2. If you are using Amazon Affiliates, use the SiteStripe that shows at the top of your Amazon pages to grab the image URL. Amazon requires that you use their product image URL that they provide. You can’t save the Amazon image and upload it as your own.
3. You can use other affiliate programs as well. Many other affiliate networks (such as ShareASale, CJ.com, etc.) will give you access to images that you can use on your website.

With those important points out of the way, let’s see how to add an image from Amazon Affiliates to our Kadence Blocks product affiliate box.

First of all, go to Amazon and find the product that you want to link to.

At the top, you should see a SiteStripe bar if you are in the Amazon Associates program and have it enabled.

You can use this to get the URL needed to add our product image.

For example, the product I’m going to use is the “Apple MacBook Pro (16″ Display with M1 Max Chip).”

I go to the product page on Amazon and click on the “Image” option. For best results, I would use the “Large” version of the image, but you can use whatever works best for you.

Take the product image link that Amazon provides and copy it.

Back in your Gutenberg editor, click the ‘+‘ button in the left-hand column of your affiliate box and choose to add a “Custom HTML” block.

After you choose the “Custom HTML” block, paste the image URL into the box that you got from Amazon.

You’ll see all of the code pasted in the box, but you can hit the “Preview” option on the custom HTML block to make sure that the image loads correctly in the Gutenberg editor.

As you can see in the image, the image is left-aligned in the box. What if we want the image to be centered in our column?

With Kadence Blocks, we can easily set the column to center the product image.

In your “List View,” go to the “Section” (column) that is one level above the “Custom HTML” block.

Once you are at the section level that contains your custom HTML block, go over to the section block settings and change these two things in the “Align Settings“:

1. Change the Inner Block Direction from Vertical to Horizontal.
2. Set Text Alignment to Center.

After changing those two settings at the section level, your Kadence Amazon product image will be centered in your column which looks a lot better.

Our Amazon product image is successfully added! Here’s what your Kadence Blocks affiliate box will look like in your Gutenberg editor with the Amazon Associates image added.

Let’s move on to adding our product description.

5. Add Product Description

The next step we have to do is add our product title and product description in the right column of our affiliate product box.

Click the ‘+‘ in the right column and choose an “Advanced Heading” block.

After adding the advanced heading, do the following steps:

1. Write out the product title that you want to use.
2. Set the heading type that you want depending on your structure (H2, H3, H4, paragraph…)

Depending on the structure of your headings in your blog post, you can choose the heading level you want to use.

In this example, I have an H2 heading above my affiliate box and so I used an H3 heading for my product title to be nested underneath.

In some cases, you may not even want your product title to be a heading. In this case, you can simply change your advanced heading to a “paragraph.”

After adding the product title, we can already tell that we are going to want the left column to be smaller than the right column.

To fix this, choose the top-level container “Row Layout” in your List View and you will see a vertical line between both columns that you can drag to the left to make the left column smaller.

I decided to make the column percentage ratio 35/65. This will give the product title and description more room.

With our product title added and our column widths shifted to give our product info more room, it’s time to add the product description.

Add a paragraph block underneath your product title and write your own product description.

One tool that I really enjoy using to write enticing product descriptions is Jarvis AI which uses the power of artificial intelligence to automatically write content for you.

If you need additional styling options for your product description, you could always add another advanced heading and change the heading level to a paragraph.

With our product title and product description written, we are nearly done! The last step we need to do is add our “Check Price on Amazon” button.

6. Add “Check Price on Amazon” Button

The final touch we need to add to our Amazon affiliate product box is a “Check Price on Amazon” button.

Underneath your product description, add a new “Advanced Button” block which is the Kadence Blocks button.

Click inside the button and add the text “Check Price on Amazon.”

Now let’s add our Amazon affiliate link to our button.

Go to Amazon’s site once again. Make sure you have the product page up for the product you want to link to. Then, click the “Text” option within the “Get Link” section.

Personally, I like to use the “Short Link” option rather than the “Full Link,” but choose whichever option you prefer.

Copy the link that Amazon provides and then head back to the Gutenberg editor within WordPress.

In the block settings for your advanced button under “Button 1 Settings,” do the following two things:

1. Add the link you copied from Amazon into the “Button Link” area and press the ↩︎ icon.
2. Set the Button Width to Full.

This will make sure that your affiliate button links to your Amazon product and will also set the width of your button to take up the full width of the column to make it bigger.

After you have done those two things, expand the “Button Link” area using the dropdown arrow on the right and set these three button link settings:

1. Change Link Target from Same Window to New Window.
2. Enable No Follow toggle.
3. Enable Sponsored toggle.

Setting the Link Target to open in a new window means your visitor will get a new tab when they click on your button which is what you want. Then, you also want to make sure your button is set to “No Follow” and “Sponsored” since you are specifically using an affiliate link.

Keep in mind that for any page or blog post with affiliate links in it, you will need an affiliate disclaimer.

You can read my article on how to easily add an affiliate disclaimer to all the appropriate posts using Kadence elements if you are using Kadence Theme Pro.

Now we need to style our button. In the block settings on the right, change the following items.

Normal Color Settings:

1. Set Text Color to White.
2. Change Background Type from Solid to Gradient.
3. Set Gradient Color 1 to first accent color in your global color palette.
4. Set Gradient Color 2 to second accent color in your global color palette.
5. Set Gradient Angle to 135.
6. Set Border Color to White.
7. Enable Box Shadow.
8. Set Box Shadow values to 2 (X), 2 (Y), 4 (Blur), and 0 (Spread).

Hover Color Settings:

1. Set Hover Text Color to first accent color in your global color palette.
2. Keep Background Type as Solid.
3. Set Background Color to White.
4. Set Hover Border Color to first accent color in your global color palette.
5. Enable Hover Box Shadow.
6. Set Box Shadow values to 2 (X), 2 (Y), 10 (Blur), and 0 (Spread).

You can obviously choose whatever color you want your button to be.

DO NOT USE THE AMAZON COLOR FOR YOUR BUTTON. Using Amazon’s colors to “mimic” their buttons can get you banned from the Amazon Associates program because it goes against their terms.

Once you have your button color settings all squared away, the next thing we are going to add is the right arrow icon.

Under Icon Settings, open the dropdown and choose the right arrow (→) icon on the first page. Otherwise, you can add whichever icon you would like to add.

You can also choose your Icon Location to be either Left or Right of the text within your button.

DO NOT USE THE AMAZON ICON FOR YOUR BUTTON. Using the Amazon icon in your button can get you banned from the Amazon Associates program because it goes against their terms.

Once you have added your Kadence affiliate button with the Amazon affiliate link, set your colors and the icon you want to use, you are all finished!

---

CONGRATULATIONS! Give yourself a big pat on the back because you just created a beautiful affiliate product box for free using the Kadence Blocks plugin.

Pretty easy, wasn’t it?

Did this Kadence Blocks affiliate product box tutorial help you out? What questions do you have? Let me know in the comments below!