Products block

 

Adding a block

Here’s how to add this block to your page:
  1. Choose a location where you want to add a product and click on the Add Block + button.
  2. In the Block Library, navigate to the Products section and click on the block that suits your website needs. You can add a single product with a photo and description or multiple products.

    Screen_Shot_2020-11-11_at_18.17.25.png

  3. Click on the block and it will be inserted into the page.

Customizing block settings

You can show or remove any element of your Products block. To modify block settings, hover over any area of the block and click the “gear” Settings icon. The Block Settings menu will appear. 

You can check or uncheck any of the following options in the General tab:

  • Product description: you can show or remove brief product descriptions under the product image.
  • Product tags: show or remove descriptive keywords related to the product you are selling.
  • Product button: Remove the product cart button.

Screen_Shot_2020-07-15_at_10.13.32.png

Once you are done modifying the settings, click Save to apply changes.

 

Customizing block appearance

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

Screen_Shot_2020-07-15_at_10.17.01.png

  • Block color scheme: Choose the background color for the Products block. Remember, you can customize your website color palette in the main > Design menu. Visit this to learn how to customize website colors.
  • Media location: Choose where the image will be located (left or right).
  • Horizontal alignment: Make the entire block content centered or left-aligned:

    Screenshot_2021-07-20_at_11.55.10.png
  • Add border: this option adds a border to product sections.
  • Add shadow: this option adds a shadow around the product section:

    Screenshot_2021-07-20_at_11.58.20.png
  • Add B/W filter: You can easily make the image black and white.

Once you are done customizing, click Save.

 

Editing images

You can replace demo images with your own product photographs. Here's how you can replace an image. 

Repeat these steps with other product images that you want to appear in this block.

 

Editing product descriptions

You can add short product descriptions in the block with multiple products in it. To edit the demo content, simply click on the text block and start typing your new text. Alternatively, you can paste your existing content from the text editor you are using and then format your text.

 

Editing product feature links

Some Product block layouts allow you to have links to product features, for example, ingredients or characteristics. Here’s how to edit these links:

  1. Hover over the link to bring up the dialog box.
  2. Click on the “chain link” Link icon and start editing links as described in this tutorial.

Duplicating block elements

If you would like to showcase more products or services in your Product block, you can easily duplicate any of the elements. To do that, hover over any block element you want to duplicate and click on the Duplicate icon.

The identical block element will be inserted to the right of the original element.

Moving block elements

You can move block elements in any way that meets your website goals. To move the block element, hover over it to bring up the dialog box, and click on the Move icon. Drag the element and drop it on another spot inside the block.

Note: You cannot move elements from one block to a different block. 

Deleting block elements

You can delete any block element if you have fewer products. To do this, hover over the unwanted element to bring up the dialog box, and click on the “trash can” Delete icon.

You can reverse this action by clicking Undo or pressing Ctrl-Z on your keyboard.

Other helpful articles

Selling products and services using Products block

Get more visibility in search results with page meta description

Adding Google Analytics to your site

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