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

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.

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

Show Quickview Button

Enables product quick view allowing visitor to see product details in a pop-up rather than leave the category page.

Show Wishlist Button

This will display an Add to Wishlist button on the category product listing grid to allow a visitor to compile a wishlist of products.

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.

Category Page Features

Show "Shop by Price"

Enable this option to display a "Shop by Price" filter on Category Pages.

Please note that the filter will only appear when there are enough products with a range of prices on your store. These ranges are generated by the BigCommerce system and can't be controlled by the theme.

Enable Infinite Loading

Set the checkbox to enable Infinite Scroll on the category page.

There may be some performance issues on older devices.

Hide "number of products displayed"

This shows the total number of products in a category, along with a count of how many are currently displaying.

If the total is 100 or less, a link will appear with the option to "Show All". If there are more than 100 products in a category, the link will give the option to "Show 100 Products".

Check the option "Hide 'number of products displayed'" to disable this feature.

This is automatically hidden if infinite scroll is enabled and there is more than one category page.

Hide "category image" in the category header

We recommend only using category images for featured categories and empty categories that feature sub-categories. Check this option to stop the default category image from displaying in the page heading.

Number of Products per Page

Choose how many products to display on the Category, Brand and Search Results pages.

Please note we have set these lists to display options that divide into 3 or 4 columns so that the grids will display correctly across all devices.

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