What is a product panel?
A product panel is a way of displaying products with titles, summaries, images and prices. When a customer clicks a product title or image, they will be redirected to the relevant product page. Product panels have a range of settings that can be used to customise the arrangement of the products and the appearance and behaviour of the scroll-triggered animation.
Once a product panel has been added, it can then be displayed on your website by adding it to the content of a row column.
How do I add a product panel?
In the admin area
For a product panel that displays the products in individual rows:
Go to Website > Widgets.
Click the Add button in the top right.
Click on Product panel icon.
Enter a Title.
Optionally, enter a Number of products.
Optionally, select a Category.
Optionally, select a Tag.
Tick/un-tick Show summary.
Select the List option from the listing arrangement Layout drop-down menu.
Optionally, select a listing arrangement Alignment.
Select a listing arrangement Horizontal layout.
Optionally, select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width.
Optionally, enter a listing arrangement Maximum width.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
For a product panel that displays a number of products per row:
Go to Website > Widgets.
Click the Add button in the top right.
Click on Product panel icon.
Enter a Title.
Optionally, enter a Number of products.
Optionally, select a Category.
Optionally, select a Tag.
Tick/un-tick Show summary.
Select the Grid option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Orientation.
Optionally, select a listing arrangement Alignment.
Select a listing arrangement Horizontal layout*.
Enter a listing arrangement Maximum per row.
Enter a listing arrangement Minimum width.
Optionally, select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width*.
Optionally, enter a listing image Maximum width*.
Optionally, enter a listing image Maximum height**.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
You can now add this widget to your website but it will only be displayed if it has products so it's important to ensure that you have some published products that meet the criteria of the product panel such as the Category and/or Tag.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.
How do I edit a product panel?
In the admin area
Go to Website > Widgets.
Find the product panel you are looking for and click the Edit button in the Options column.
Edit the product panel's details.
Click the Update button.
How do I delete a product panel?
In the admin area
Go to Website > Widgets.
Find the product panel you are looking for and click the Delete button in the Options column.
Click the Delete button to confirm.
How do the settings affect the appearance of a product panel?
The range of settings available depends on which listing arrangement layout option is used.
For a product panel using the List option:
Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.
Listing arrangement horizontal layout - Changes the ratio of the text and the image.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width - Sets a maximum image width to prevent the image from getting too wide.
Listing animation type - Changes which animation will play when a customer scrolls past the product panel.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the product panel or to play every time the customer scrolls past the product panel.
For a product panel using the Grid option:
Listing arrangement orientation - Changes the orientation of the listing content to vertically (image above, text below) or horizontally (image on the left, text on the right).
Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.
Listing arrangement horizontal layout* - Changes the ratio of the text and the image.
Listing arrangement maximum per row - Sets the maximum number of products to display per row in the grid. (e.g. 3 per row, 4 per row, etc).
Listing arrangement minimum width - Sets the minimum width of a product. This determines when the products will wrap onto the next row in the grid when the space available is reduced.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width* - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width* - Sets a maximum image width to prevent the image from getting too wide.
Listing image maximum height** - Sets a maximum image height to prevent the image from getting too tall.
Listing animation type - Changes which animation will play when a customer scrolls past the product panel.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the product panel or to play every time the customer scrolls past the product panel.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.