Selling products and services using Products block

You can add a product or service to your website in just a few clicks using Products blocks. There are two types of blocks in this section:

A single product block that you can use to offer a product or a service.
A block containing product cards that lead to the product page.

Adding a block

Navigate to the area where you want to insert a block and click the +Add a block button.
In the Block library, click on the Products link in the left vertical menu and choose the block design you want to use.
Click on the block and it will automatically be inserted into the page. It will contain placeholder content and its language will match the language of your website.

Customizing the block сontent

Customize the text description of the product or service by assigning header (H1, H2) tags to the header, formatting lists, and changing the text alignment.
Customize the formatting for the description text.
Add your own product photography by clicking the demo image and adding your own image.
Quickly resize the product image by pulling the round toggle up or down:

To activate the toggle, hover over the lower edge of the image.

Right-click the image or press and hold (on mobile) to assign new ALT tags and making the images clickable.

Customizing the block settings

Hover over the block to activate the menu.
In the menu, click the Block settings icon.
In the General tab, you can customize the following settings:

Keep or remove the product description
Keep or remove product tags
Keep or remove the product button

Once done customizing the settings, click Save.

Customizing the block appearance and layout

In the Block settings > Appearance tab, you can customize the following settings:

Block style: choose a new color scheme for the block
Block spacing: Change the top and bottom indents
Media content location: change where the block media is displayed (left or right to the description).
Add B&W filter: Make the product image black and white

Once done customizing the block appearance, click Save.

Customizing the product button

Hover over the product button to activate the link editing menu. Click on the link button to customize link settings:

You can also change the text that displays in the button:

Once done customizing the link settings, click Submit.

Customizing the product price

You can modify the price by double-clicking on the price to highlight the number and changing it. You can add the currency sign in the same way:

Customizing the product tags

Product tags add context and can link to other products or pages. To edit the text of the tag, single-click on it:

To enable formatting to the tag (make it bold, italic, or underlined), double-click the text in the tag area. To add a link to a tag, click on the Link icon:

Duplicating the product block

Do you want to add more products or services to the page? Hover over the block to activate the menu and click on the Duplicate icon.

Editing multiple product blocks

Multiple product blocks can link to individual products or services. To customize the Products block with multiple items, hover over the block and click the Block settings icon.

In the General tab, you can customize the following settings:

Keep or remove the block title
Keep or remove the product preview (the image showcasing the product)
Keep or remove the product description
Keep or remove primary or secondary buttons

In the Appearance tab, you can customize the following settings:

Block style: Choose the color scheme of this block
Content layout: Choose the number of items in a row (2, 3, or 4 items)
Block spacing: Adjust top and bottom margins
Content style: Add borders and shadows to product cards
Media content settings: Customize the appearance of your image or video, add the black and white filter

Once done customizing, click Save.

Tip: Add more interaction and custom actions to the product cards by adding call-to-action text to them, for example, Learn more. You can then link these words to individual Product blocks or pages.