Amazon product boxes are designed to feature products available on the Amazon platform in a visually engaging way. They include images, features, descriptions, prices, and direct links so people can buy the products.
The main purpose of this box is to inform customers about the product’s features and benefits at a glance and excite them to buy it instantly. With the Tableberg plugin, you can create stunning Amazon product boxes on the WordPress editor.
In this following write-up, we’ll cover a tutorial post on how to add Amazon product boxes in WordPress.
Step 01: Add the Tableberg Block to the Editor
The plugin comes with a custom block named Tableberg. Click the プラス（＋）アイコン. Add the テーブルバーグ・ブロック to the editor.
Set the number of columns and rows you need according to your content. Let’s for this tutorial, we’ll set 2*1.
The basic version of the table is ready. Next, we’ll add content to its columns nd row.
Step 02: Add an Image of the Amazon Product
Tableberg allows you to add multiple custom blocks to the table cells like the Gutenberg editor. Add the イメージブロック to a cell for showcasing the Amazon product image.
We have added an Amazon product image. You can increase its size by dragging the circular icon while holding it simultaneously.
Step 03: Add the Product Details
In the right column, we’ll add the product’s name, features, price, and a short description. You can do these all using the 段落ブロック.
Write the Product’s Name
By default, the 段落ブロック is automatically selected. Just write your product’s name on it.
Increase the product name’s size from the Typography section on the right sidebar. Because this text should look larger than the other texts.
Add the Product’s Price
Add a new 段落ブロック to write your product’s price.
Set a different catchy color for the pricing so it can attract people’s eyes.
It’s always great to show a discounted price to excite people. You can do this by adding an increased price with a strikethough.
So, write an increased price. Using the Highlight and Strikethrough options, you can set a different color and strike through it.
Write a Description About the Product
Using another Paragraph block, write a description for the Amazon product.
Step 04: Add a CTA Button
Find and add the ボタンブロック under the description.
Write a copy for the button. Then, go to the 設定タブ.
From Width settings, select an option to increase the button width as you want.
次に スタイルタブ. Using suitable options, colorize そして resize the button copy.
Step 05: Add Space Between the Blocks
Select the entire column by clicking its border. Go to the スタイルタブ.に来てください。 Block Spacing section by scrolling down the tab. Place a value to add space between the blocks on the column.
Step 06: Add a Ribbon to the Amazon Product Box
Ribbons allow you to show a brief promotional message that instantly stimulates users to buy your product. Add the Ribbon block to the column you want to display it.
Add a ribbon copy, ribbon style, position, そして color using options from the Settings and Styles tab.
Step 07: Customize the Amazon Product Box Border
By customizing the box border, you can beautify its aesthetics. Come to the Table Border section by scrolling down the スタイルタブ.
Toggle off Inner Border. After that, change the color そして width of the outer border.
So, your Amazon Product box is ready. You may further modify it as you want.
Bonus Point: Use a Pre-Built Product Box Template
Tableberg plugin comes with a comprehensive template library where you’ll find a good collection of pre-built tables by which you can instantly prepare your many web sections. It also includes many pre-built feature boxes that you can use for creating Amazon product tables.
In this following video clips, we have shown how to find the feature boxes and add them to the editor. Next, just by changing its content, you can get your Amazon product box ready.
結論
We have covered the tutorial in brief. You can make your Amazon Product box vast by adding many more information. You can even add multiple images and CTA buttons. In this article, we have just tried presented to an inspirational guide that you can use to create more interesting designs.
For example, before moving away, spare a few more minutes to explore the post how to show process steps in WordPress with the plugin.
