Affiliate Booster Single Product Block
An example of the Single Product Block.
In this article, we are going to talk about the AffiliateBooster Single Product Block. It is a block designed to highlight the most important features of a product and help improve sales and conversions on your website.
For the demonstration, we are going to use a new post, but you can use it on an existing page or post as well. You can find the AffiliateBooster Single Product Block in the blocks menu, or simply type “/ab” and select it from the list.
This is how the default view looks like.
Not too appealing, right? But, with just a few minutes of work, the same block can be transformed into something like this.
Now that grabs some attention. If you liked it and it stopped your eyes from moving down the article, the same will happen to the readers of your website as well.
AffiliateBooster Single Product Block Settings
We’ve already shown a glimpse of what the AffiliateBooster SBP can do, but that does not cover all the things you can do with the block. Let us cover the settings to show you everything that is possible for the AffiliateBooster Single Product Block.
Since the Single Product Block is a Gutenberg block, you will find all the settings for the block in the block settings menu, to the right side of the post area.
As you see, there are a lot of different options to configure, which means tons of possibilities to create beautiful single product boxes. We will discuss all the settings in detail, but before we do that, here is what each of the settings represents.
The box settings deal with the outer box settings along with some other options. Here are all the settings in this section.
The first option lets you change the image added to the box. You can also remove the image, but in our experience, images work better.
Next would be the padding, margins, and border. These help you fine-tune the position of the button while the border lets you set a border for the button. If you notice in our example, we did set up a border for the button. There are a few types of borders to choose from as well.
The last option lets you enable and configure a box-shadow. You get complete control over the color, shape, and other variables of the shadow.
The Title settings have just 3 options.
You can set the alignment of the Title, the color, and customize the typography.
Sub Title Settings
The Sub Title has the same options available as the Title.
You can change the alignment, the color, and the typography of the Sub Title.
The Content Settings has plenty of options, as well. Here is an image that shows all the options.
The first setting lets you choose between a paragraph type content or list-type content. Here is how they look side by side.
Some of the settings will be affected by which of the options you choose, keep that in mind.
The next option lets you configure the alignment of the content. You have the option to align the text left, right, or the middle.
Next comes the icon. Using the icon picker, you can choose the icon that appears next to the content. Obviously, this option will be visible only when you’ve chosen the list option, not the paragraph. You can also change the color of the icon.
The next options are for the Content Color and Content Typography. Similar to how these options affect other settings, these let you change the color and the typography of the content.
The button has a lot of options available for customization. Here is an image that shows all the settings.
We’ll divide the settings into logical sections to better explain all the settings.
Button Icon and Icon Position
You can place an icon next to the button copy for more impact, similar to the one we placed in our example. There are hundreds of icons to choose from, and you can also choose the position of the icon.
Button Text and URL
It should be obvious what these settings do. The button text customizes the text on the button. You can click the button and change the copy there as well.
The URL is where you enter the URL where the button should point to. Only fully qualified links are supported, so don’t just write “google.com”; enter the full URL. You can also set the link to open in a new tab, and set the button to rounded. There is a reason why our button is rounded even after setting the rounded button setting off. You’ll understand that when we cover all the settings.
Button Size and Width
The Button Size and Width options let you adjust, well, the size and width for the button. Pretty obvious stuff.
As you’ve probably seen, the typography options in all AffiliateBooster blocks are pretty fantastic. The button typography options are no different, and they let you control the finest aspect of the button type.
The button color options let you adjust the button colors both in regular mode and hover mode.
Button Padding, Margins, Borders, Border Width, Border Radius, Alignment
These options simply do what they say. They let you adjust the padding, margins, border width, radius, and other options.
If you noticed, we’ve set a pretty big value for the border-radius. That is the reason our button appeared rounded, even when the rounded button option was turned off.
The image settings have only 2 options.
An important thing to know is that both these options can be configured differently for different devices. You can use the selectors to set different values for mobiles, tablets, and desktops.
The first option lets you set an image width. You can use the slider or enter a custom value in the field directly. However, you cannot set a width that goes over the box limit, essentially breaking the layout.
The second option lets you set a custom padding for the image. This can help manage the layout when you have an image with an odd aspect ratio. Please note that you cannot set negative padding for the image.
The Advanced option is meant for advanced users where they can style the Single Product Block with custom CSS classes. Most users will not need to use this option as almost all the options can be customized from the block settings itself. But, there are a few scenarios where this might be useful, and that is why we’ve included this option.