Product Listing Grids (Portobello)
Choose how products listings are displayed on the site here. In your control panel, go to Storefront > My Themes, and click the blue "Customize" button to launch Theme Editor. 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
- Access your store's WebDAV folder and create a folder called
contentfolder. Note that if you have already created a folder with the same name, skip this step.
- Upload your Pattern Swatch image to the new
- In the 'Custom Field Value' text box enter either:
- the full URL, e.g.
- the path, e.g.
/content/img/red-gingham.jpg(note the leading
- the full path to the CDN for your store, e.g.
- the full URL, e.g.
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).
Importing Custom Fields
To speed up the process of displaying color swatches, available sizes (or other custom information) on product listings, 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.
For example, to create the example custom fields shown and explained above you would enter...
"Color Swatch=#ff0000";"Color Swatch=#0000ff";"Pattern Swatch=/content/img/red-gingham-swatch.jpg";"Sizes Available=S, M, L"
...in the Product Custom Fields column.