Product Listing Grids (Portobello)

Choose how products listings are displayed on the site here. In your control panel, go to Storefront > My 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'

Enable Image Hover Switcher

We have included a module in our theme that switches the product thumbnail image on the category grid 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.

Note that you should also make sure the first and second images use the same aspect ratio to avoid visual glitches.

Show quickview button

This will display a Quick View button on the category product listing grid when a visitor hovers over a product.

Show wishlist button

This will display an Add to Wishlist button on the category product listing grid when a visitor hovers over a product.

Show color swatches on product listings

We have included a module to display color swatches on any product with a color swatch option in the category grid listing. Check this box to enable.

To add a color swatch below the price on a product listing grid, in your control panel set up a custom field on the product with the label Color Swatch. Note that the label is case sensitive. In the value, enter the hex code of the color you want to display.

In the screenshot above a red (#ff0000) and blue (#0000ff) swatch will be displayed below the price of the product on a product listing grid.

If you prefer to display a pattern rather than a color swatch, you need to upload an image of the pattern to your content folder (see below). Then set up a custom field on the product with the label Pattern Swatch. Note that the label is case sensitive. In the value, enter URL of the image you uploaded.

Here's an example of a custom field for a Pattern Swatch:

Uploading images to your content folder and referencing them

1. Access your store's WebDAV folder and create a folder called img in the content folder. Note that if you have already created a folder with the same name, skip this step.
2. Upload your Pattern Swatch image to the new img folder.
3. In the 'Custom Field Value' text box enter either:
   • the full URL, e.g. https://www.yourstore.com/content/img/red-gingham.jpg 
   • the path, e.g. /content/img/red-gingham.jpg (note the leading /), or 
   • the full path to the CDN for your store, e.g. https://cdn11.bigcommerce.com/s-r70in05ycx/content/img/red-gingham.jpg".

Show available sizes on product listings

We have included a module to display product sizes on the category grid listing. Check this box to enable.

Set up a custom field on the product with the label Sizes Available. Note that the label is case sensitive. In the value, enter the product size you want to display.  Separate values with a comma (see examples below).