Product Listing Grids (Portobello)
Choose how products listings are displayed on the site here. In your control panel, go to Storefront > Themes, click the blue "Customize" button to launch Theme Editor, then select the "Theme Styles" icon. In the left hand column of the Theme Editor, click the panel labelled 'Product Listing Grids'.
Global Product Grid Settings
| Setting |
Description |
| Enable image hover switcher |
Select this to change switch the image in the product cards with a second alternative image on hover. This will always pull in the second image from the product image library. To ensure that our module works correctly, the second image in sequence should not be set to display as the thumbnail in the store control panel.
|
| Show quickview button |
Select this to see product details in a pop-up rather than leaving the current page.
|
| Show wishlist button |
Choose to display an add to wishlist button on the category product listing grid. This will allow visitors to compile a wishlist of products. |
| Show color swatches on product listings |
Choose to display color swatches on the category grid listing. Store owners can attach a custom label to products listed in the category grid by setting up a custom field on a product with the label Color Swatch. You will need to add each swatch color as a separate custom field and remember to add the value as a hex code e.g. #FF4800. For more information about setting up custom fields on products, see this BigCommerce support article: Custom Fields.
To speed up the process of displaying information through products' custom fields, you may find it easier to import Custom Fields, rather than entering all of the information through the Control Panel. This BigCommerce Article explains how to import Custom Fields: Importing Custom Fields. |
| Product listing swatch sizes |
Choose the size for swatches on product listings.
|
| Show available sizes on product listings |
Choose to display product sizes on the category grid listing. Store owners can attach a custom label to products listed in the category grid by setting up a custom field on a product with the label Sizes Available. You won't need to add each size as a separate custom field, they can be added together one e.g. S,M,L,XL. |
Category Page Features
| Setting |
Description |
| Hide Category Image on Category Page |
Select this option to hide the default category image that would appear behind the page heading.
|
| Show "Shop by Price" |
Choose this to display the shop by price feature. Please note that the filter will only appear when there are enough products with a range of prices on your store. |
| Hide "number of products displayed" |
If the number of products is 100 or less, a link will appear with the option to "Show All". If there are more than 100 products the link will give the option to "Show 100 Products". Select this to disable this feature.
Please note this is automatically hidden if infinite scroll is enabled and there is more than one category page.
|
| Enable infinite scrolling |
Select this to enable Infinite Scroll on the category page.
|
Number of Products Displayed
| Setting |
Description |
| Category pages |
Select the number of products that appear on one page in a category. |
| Brand pages |
Select the number of products that appear on one page on a brand page. |
| Search result pages |
Select the number of products that appear on one page of search results. |
Product Listing Images
| Setting |
Description |
| Product image in gallery view |
Select the size of product images that appear on category, brand, or search results pages. |
| Brand image in gallery view |
Select the size of the brand image when viewed on the brands page |
