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

  1. Navigate to the area where you want to insert a block and click the +Add a block button.
  2. In the Block library, click on the Products link in the left vertical menu and choose the block design you want to use.
  3. 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

  1. 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.
  2. Customize the formatting for the description text.
  3. Add your own product photography by clicking the demo image and adding your own image.
  4. Quickly resize the product image by pulling the round toggle up or down:
    product_block_1.png

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

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

product_block_2.png

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:

Screenshot_2021-06-08_at_23.43.19.png

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:

userlmn_f74d3fa51c6690c62e1016ecffcac7bb.png

To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to its name:

userlmn_823a3c5455202642b11c592b1d55871b.png

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.

    ezgif.com-gif-maker__8_.gif

  • 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:

    userlmn_1f17db1a159e8bd03da1e193f51cee85.png
  • 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:

product_block_5.png


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

product_block_6.png

 

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:

product_block_7.png

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.

product_block_10.png

Other helpful articles

Displaying different Online Store categories on different pages

Creating a free Online Store

Optimizing your site for local search

Embedding Online Store products with Buy Now button

Was this article helpful?
0 out of 0 found this helpful