Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Supply Products Pages

Supply offers a variety of features to catch customers' eyes and create a dynamic online shopping experience.

Products Pages are the landing pages where visitors browse through your products. Clicking on a product opens the individual product item with its own URL. To learn how to add a Products Page and product items, visit Adding products to your store.

Tips: To create an eCommerce store on your site, add a Products Page in the Pages panel. On the Products Page, add new products by clicking the + icon.

This page details Supply’s special Products Page features.

Background color

Products Pages have separate background colors from the rest of the site to help your products stand out.

To set the background color, open a Products Page within the Pages panel, and then navigate to the Style Editor. The Product Background Color tweak in the Products section adjusts the background color.

Product items show the main site’s background color.

Product Page style

On the Products Page, your items display in a grid. By default, Supply displays full product images in their original aspect ratio and staggers the images to fit in the browser window.

Use the tweaks in the Products section of the Style Editor to adjust your Products Page layout.

  • Product Aspect Ratio - Controls the size and shape of your thumbnails. Selecting any ratio other than Auto will make all the images in your gallery the same size. Check this to crop the image around its focal point to fill the center panel.
  • Product Column Width - Controls the width of the products. The smaller the width, the more products columns display horizontally. The number of columns that display depends on the width of the browser window.
  • Product Gutter - Adjusts the space between product items. Reduce to 0px to create a seamless grid without any margins.
Tip: You can create multiple Products Pages. For example, the demo content has three Products Pages: Mens, Womens, and Lifestyle. All Products Pages will have the same style.

Product details and hover options

Use the Product List Style tweak in the Products section of the Style Editor to adjust your grid’s style and hover behavior.

  • Viewbook - Image dims and product name and price display on hover.
  • Catalog - Product name and price displays below item images. Image dims on hover.
  • Showroom - Product name and price display in the bottom-right of the product image. Image dims on hover.
  • Flipcard - Images are dimmed, with the product name and price displaying in the top-left. The image un-dims and product details disappear on hover.

For all styles, dimmed images become slightly transparent, revealing some of the background color. Sold Out items in Supply are always dimmed.

Use the Product List and Product Price tweaks to adjust the size and color of the product details. Product Sale Color adjusts the color of the Sale label. The Sold Out label displays as black. 

Adjust the fonts for the product details in the Main Content section of the Style Editor. Heading Font adjusts the title and price, and Meta Font adjusts the labels.

Category navigation

Categories you’ve added to your products can display in the navigation. Clicking a link filters out every product except the ones in that category.

Use the Product Category Links tweak in the Navigation section of the Style Editor to set the style:

  • Show Both - Display the Product Page title as a link and categories as sublinks.
  • Parent Link Only - Display only the Product Page title as a link.
  • Category Links Only - Display only the categories as links.
  • Show Both While Inside Collection - Display the Product Page title as a link on all pages. While on the Products Page or a product item, the categories display as sublinks.
Note: Category sublinks won't display if the Products Page is in a folder or Index. 

Product items

Clicking on a product opens the individual product item with its own URL. When you’re on an item page, new tweaks appear in the Products section of the Style Editor.

  • To change the space around the images, adjust the Product Item Image Margin.
  • To hide the Share Button, check Hide Product Share Button.

All images uploaded to a product's gallery appear stacked. If the product has only one image, the Product Item Single Image Fill tweak appears in the Products section of the Style Editor. Check this to crop the image around its focal point to fill the center panel.

Additional information displays as an overlay.

Note: Individual product item pages have the same background color as the main site. Adjust this with the Page Color tweak in the Site Wide section of the Style Editor.

Mobile

Product names and prices display on the left below each item in the product list.

  • The shopping cart appears in a bottom mobile bar once you’ve added one or more items to your cart.
  • Categories appear in the mobile navigation menu.

supply-mobprod.gif

Note: For general information about styling your site, visit Structure and style.

Next step

Create a visual thumbnail image navigation with the Index Page.

Was this article helpful?
1 out of 7 found this helpful
Supply Products Pages