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 block settings
You have several options to make the Products block truly yours. To activate the control panel, click anywhere on the block and then click the Block Settings icon:
In the Layout section, you can fully switch the block layout or hide some of the block elements. To fully switch the block layout, simply click the respective button and select a new block content layout:
To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to its name:
In the Appearance tab, you can make the following changes:
- Block style: Change the color scheme of the block.
- Block spacing: Change the whitespaces on the top and bottom of the block.
- Horizontal alignment: move text in the column left or to the center.
- Content layout: Choose the number of items in a row.
- Content style: add border or add shadow to make the article elements stand out on the page:
- Media settings: add a black & white filter to the images within this block.
Once you are done customizing block settings, 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:
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.
Other helpful articles
Displaying different Online Store categories on different pages
Optimizing your site for local search