- Choose a location where you want to add a product and click on the Add Block + button.
- In the Block Library, navigate to Product section and click on the block that suits your website needs. The block is inserted into the page.
Customizing block settings
You can show or remove any element of your Product 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:
- Block secondary title: show or remove the text block on the very top of the block.
- Block title: show or remove the main block title.
- Block subtitle: show or remove the line of text below the main title.
- Product title: you have an option to show or remove product names.
- Product description: you can show or remove brief product descriptions under the product image.
- Product price: show or remove prices in the Product block.
- Primary and Secondary buttons: these options allow you to control how many buttons to show on the Product block.
- Appearance: choose the color of the block background.
Once you are done modifying the settings, click Save to apply changes.
Customizing a single product block
You can customize the appearance of a single Product block. To start customization, insert the block using the Add Block + button and choose the Product block with one product in it.
- Hover over any area of the block to bring up the dialog box.
- Press the Settings button to bring up the Block settings window.
- You can customize the following elements of the block:
- Block title: show or remove the name of the product.
- Block description: you have an option to remove the product description from the page.
- Product price title: you can opt to remove the word “price” or replace it with another word.
- Primary button: you have an option to remove the main button.
- Appearance: here you can choose the background color of this block.
Once you are done modifying Block settings, click Save to apply changes.
You can replace demo images with your own product photographs. Here’s how you can do it.
1. To replace the image, hover over the block element and the dialog box will appear.
2. Click on “picture frame” Edit Image icon and choose the new product image from your computer.
3. Using the cropping grid, choose the square area of the image that you want to show on the product page. You can add a different image on the individual product page later.
4. Once done cropping, click Save and the image will appear in the block.
5. 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.
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:
- Hover over the link to bring up the dialog box. Click on the “chain link” Link icon and either choose the page of your website to link to or insert an external URL.
- Click on the “check” icon to confirm the link destination.
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.