You can add a product or service to your website in just a few clicks using Product 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 the 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)
- Vertical alignment: choose how the block content will be aligned
- 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.
