How to Display Products on your Website
You can display products on any page in your website using the Products element.
1. From the Build tab, drag and drop an Products element onto the page.
2. In the Products selection window, click on a category to choose items or use the search field to quickly find a specific product. Add as many as you like and click the Select link when you’re finished.
Note: If you haven’t created any products yet, you’ll be prompted to add some first.
3. There are several different options for displaying product images and information. You can change the layout to one of the following:
3. There are several different options for displaying product images and information. You can change the layout to one of the following:
- Grid - products display in rows and columns. This is the default setting.
- Masonry - The products are laid out based on the size of the image - usually alternating smaller and larger.
- Multi-Image - This will display all uploaded images for products that have multiple images.
- Single Row - The products display in a single with left and right arrow navigation.
4. Once you decide on a layout, you can change other display settings. Click inside the element to open the options.
5. The following settings can be adjusted:
- Columns - Change the number of columns the products are displayed in, ranging from one to six.
- Pagination - Adds navigation when there are a large number of items. You can set the number of products to be shown per page in increments of 12.
6. The Display Options section offers these additional settings:
- Image Options - Show or hide product images and change the aspect ratio.
- Button Options - Show or hide the button that links to the product page. You can also change the button text and style.
- Name, Price, Short Description - Turn these on or off for all products in the element.
- Info Placement - Choose where the product image displays in relation to the text. You can also change the text alignment
7. To add, remove or rearrange products, click on the element to open the settings, then click Manage Products. Use the Select Products button to add more. To remove an product from the element, click the minus icon to the left of the product in the list. To rearrange the order they’re displayed in, simply drag and drop an product to a new spot.