Free Amazon Affiliate Product Box for Gutenberg

I recall spending days trying to craft the perfect product box to promote products from Amazon. The Gutenberg editor had just launched, and I was tired of using AAWP and Content Egg.

By no means are either of those two plugins bad. I just wanted something a bit more built-in to the editor.

For starters, both Content Egg and AAWP rely on what are known as short codes. By pasting tiny snippets of code onto a blog post, the page outputs HTML based on the plugin’s directions.

The biggest downside, of course, is the inability to view things inside of the editor while working. Seeing what the shortcode does requires a preview of the blog post.

The other big issue is that, if you ever decide to delete either of these plugins, you’re left with a bunch of ugly code spread throughout all of your content.

So I decided to fix that problem, and make something that’s both easy to use and faster than relying on a paid plugin.

My Amazon Affiliate Product Box for Gutenberg

You need to use the Gutenberg editor to use this template. If you’re still on classic, maybe it’s time to switch and get comfortable with the visual workflow. Besides, WordPress is phasing out the Classic Editor on December 31, 2021.

The product box relies on a feature from Gutenberg known as the Reuseable Block. You can easily import the file I’ve exported to any website.

And to see the custom CSS inside the visual editor, you will need to install the Blocks CSS plugin from the WordPress repository. 

I’ve made the template download available in our Facebook Group exclusively. It’s a pinned announcement. Join up, and we’ll get you accepted in no time.

You don’t have to stay in the group if you don’t want to, but we talk about all things affiliate marketing.

The pinned post reads ‘PRODUCT BOX TEMPLATE.’ At the bottom, you’ll see a file named “product-box-template.json.” Download the file.

There are also some instructions, but I’ll list them here, as well:

1. Download the reusable block from our Facebook group
2. Install Blocks CSS (https://wordpress.org/plugins/blocks-css/)
3. Add a new post and navigate to ‘Manage reusable blocks’
4. Click ‘Import from JSON’
5. Select ‘product-box-template.json’
6. Refresh your editor and find Product Box Template in your reusable blocks
7. Convert to a Regular Block (do not miss this step every time you add the block)
8. Add an image and edit to your liking

And you’re not limited to a bullet list. If you want to use a paragraph instead, you can convert it easily with Gutenberg.

If you run across any issues using the block, feel free to hit me up in the Facebook group!

For no use of plugins or downloads…

If you’re comfortable with adding custom CSS yourself and don’t mind editing your boxes without a visual aid, I will list the CSS along with steps to create the box yourself.

The product box uses Gutenberg Columns in a two column layout. Choose Two-columns, one-third, two-third split.

Under Advanced in the right sidebar, set the additional CSS box on the Columns block to product-box. Then, inside the theme customizer, add the following code.

/* Product Box CSS*/
.product-box {
  max-width: 100%;
  padding: 20px;
  border: 1px solid #ececec;
}

From here, add an image to the left column. In the right column, add an H3, bulleted list, and a button. Customize to your heart’s desire. But honestly, the template looks so much better in the editor. So it’s up to you which solution you choose.

If you’d rather go with the easier solution, just download the template and add the plugin!

Finally, please feel free to share the article/video around your favorite Facebook affiliate groups if this helped you.