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.

Please note this feature doesn't add color options to your products, it also shows all color options you enter using this module including those that are out of stock.

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.

Please note this feature doesn't add size options to your products, it also shows all size options you enter using this module including those that are out of stock.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us