Products

This guide describes the Theme settings > Products menu options.

Use the menu to set (some) options for displaying products on your store's Product and Collection pages. Refer to Shopify help: Products.

The previous image shows a store's "Dr. Spinner" product page. In the upper left, part of Theme editor's Theme settings > Products menu is displayed. The menu's Availability display mode option is set to Adjacent. With Adjacent Availability display mode, in the Variant picker on the right of the previous image, each product option value (like “Copper” or “Satin”) appears as available only if the exact full combination of chosen product options is in stock.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.

Set up products

To set up products:

1. In Theme editor, go to Theme settings > Products.

2. Select a setting described in the following table.

Setting name

Description

Availability display mode

Use the Availability display mode options to set how variant/ product-option availability indicators are displayed in the Variant picker block on product pages. With Adjacent mode, each option value (like “Blue” or “Large”) appears as available only if the exact full combination of chosen options is in stock. So if a customer picks “Blue + Large” but that specific color-size combination is sold out, the picker shows “Blue” or “Large” (or both) as unavailable, even if other sizes or colors are still in "live" inventory. With Top-down mode, availability is more forgiving. An option value shows as available if any variant under it is in stock, regardless of what’s selected elsewhere. That means “Blue” stays selectable if there’s any Blue item in stock (even if “Blue + Large” is out), and “Large” stays selectable if any Large item exists. This mode provides a broader, more inclusive availability view for customers. For more information, refer to Example Availability display modes and Shopify's developer docs: Option value availability.

Example Availability display modes

The following image shows an example Variant picker on a product page with the Theme settings > Product > Availability display mode option set to Adjacent.

The following image shows an example Variant picker on a product page with the Theme settings > Product > Availability display mode option set to Top-down.