Skip to main content
The product page is where shoppers look at a product, pick a variant and add it to the cart. In Facet it is built from the Product section, which holds the picture gallery on one side and a column of product blocks on the other. This page covers the section settings, every product block, and the other sections the default product template uses.
The Product section as it appears on the Facet demo storefront.

​
What this section controls

  • The picture gallery: carousel, grid or stacked layout, thumbnails, arrows and picture shape.
  • Full-screen zoom on the product pictures.
  • The breadcrumb trail above the product.
  • The sticky add to cart bar that appears once shoppers scroll past the buy buttons.
  • The blocks in the product column: title, price, variant picker, buy buttons, pickup, collapsible rows, sharing and more.

​
Getting started

1

Open the Theme Customizer

In your Shopify admin, open Online Store, then Themes, and click Customize next to Facet.
2

Open the product template

In the template picker at the top of the Theme Customizer, choose Products, then Default product. The preview shows one of your products.
3

Set up the gallery

Click Product in the Sections panel to choose the gallery layout, thumbnails and picture shape.
4

Arrange the product blocks

Under Product, drag blocks to reorder them, or click Add block to add one, such as Collapsible row or Share.
The theme editor with the Product section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.
Changes to the default product template apply to every product that uses it. The product’s own content, such as its title, pictures, price and description, is edited in your Shopify admin under Products.

​
Section settings

Theme editor sidebar showing the Product section settings: Gallery layout, Thumbnails, Show gallery arrows on mobile, Thumbnail position on desktop, Aspect ratio, Show breadcrumbs, and more.
1 or 2 (default). Phones always show one picture per row. Appears only when Gallery layout is Grid.
Hidden, Desktop only, Mobile only or Desktop and mobile (default). Thumbnails only show when the product has more than one picture or video. Videos get a small play badge.
Below the image (default) or Beside the image. On phones the thumbnails always sit under the picture. Appears only when Thumbnails shows them on desktop.
The shape of the gallery pictures: 5:8 (default), 2:3, 3:4, 4:5, 1:1, 4:3 or 16:9.
  • Show gallery arrows on mobile: on by default. Shows previous and next arrows on the carousel on phones.
  • Show breadcrumbs: on by default. Shows a trail above the product: Home, the first collection the product belongs to, then the product.

​
Zoom

Zoom has no setting. A zoom button on the gallery, or a click on a picture in the grid and stacked layouts, opens the pictures full screen. Shoppers move between pictures with the arrows or the arrow keys, and close the view with the close button or a click outside the picture.

​
Sticky add to cart

Theme editor sidebar showing the Product section settings (part 2, scrolled): Show sticky add to cart, Sticky add to cart position, Sticky add to cart color scheme, Top padding, Bottom padding.
  • Show sticky add to cart: on by default. Once the buy buttons scroll out of view, a card appears with the product picture, title, chosen variant, price and an Add to cart button. Its Change button scrolls back to the gallery so shoppers can pick another variant.
  • Sticky add to cart position: Left, Center or Right (default). On large screens the card floats at this side of the page. On phones it spans the screen. Appears only when Show sticky add to cart is on.
  • Sticky add to cart color scheme: the colors of the card. Appears only when Show sticky add to cart is on.

​
Common settings

Theme editor sidebar showing the Product section settings (part 3, scrolled): Sticky add to cart color scheme, Top padding, Bottom padding, Page width, Theme Settings, Custom CSS.
  • Color scheme: the colors of the section.
  • Top padding: None (default), Small, Medium, Large or Extra large.
  • Bottom padding: None, Small, Medium (default), Large or Extra large.
  • Page width: Narrow, Narrower, Fluid (default) or Full.
See Common settings for what each option does.

​
Blocks

Each block below can be added once, unless it says otherwise. Every block also has a Bottom padding setting for the space under it: None, Extra small, Small, Medium (default) or Large.

​
Vendor

Shows the product’s vendor, as set on the product in your Shopify admin. No other settings.

​
Heading

Shows the product title as the page heading.
Theme editor sidebar showing the Heading block (in Product) settings: Text size, Bottom padding.
  • Text size: Display 2, Heading 1, Heading 2 (default), Heading 3, Heading 4 or Heading 5.

​
Subtitle

Shows the product’s Subtitle metafield (under Descriptors) on the product in your Shopify admin. The block shows nothing for products without a subtitle.
Theme editor sidebar showing the Subtitle block (in Product) settings: Bottom padding.

​
Rating

Shows star rating and review count from the product’s rating metafields, which product review apps fill in. The block shows nothing for products without a rating.
Theme editor sidebar showing the Rating block (in Product) settings: Bottom padding.

​
Price

Shows the price of the chosen variant, the compare-at price struck through when it is higher, and the unit price when the variant has one (for example “€2,50/100ml”). All of these update when shoppers pick another variant. When your prices include tax, a “Taxes included.” line appears under the price.
Theme editor sidebar showing the Price block (in Product) settings: Text size, Bottom padding.
  • Text size: Heading 4, Heading 5, Large, Regular, Small (default) or Caption.

​
Variant picker

Shows one row of choices for each product option, such as size or color, with the chosen value next to the option name. The block is hidden for products without variants.
Theme editor sidebar showing the Variant picker block (in Product) settings: Picker style, Size guide page, Size guide option name, Bottom padding.
  • Picker style: Boxes (default) shows each value as a button. Dropdown shows each option as a select menu, where values that are sold out are marked as such.
  • Size guide page: a page from your Shopify admin to open as a size guide. A Size guide link appears next to the option named in Size guide option name, and opens the page content in a side panel.
  • Size guide heading: the title at the top of the size guide panel. Leave it blank to use the page title. Appears only when a Size guide page is picked.
  • Size guide option name: the option the size guide link appears next to. Default: Size. It must match the option name on your products exactly.
When a shopper picks a variant, the gallery moves to that variant’s picture, and the price, buy button and pickup details update.
Color options can show as swatches. Which options count as colors, and how swatches look, is set in Variants. Swatches only show with the Boxes picker style.

​
Buy buttons

Shows the quantity selector, the Add to cart button and, optionally, the dynamic checkout buttons. The add to cart button changes to Sold out when the chosen variant is unavailable. If Shop Pay Installments is on in your store, its message shows here too.
Theme editor sidebar showing the Buy buttons block (in Product) settings: Quantity selector, Show dynamic checkout buttons, Bottom padding.
  • Quantity selector: Beside the add to cart button (default) or Full row above the add to cart button.
  • Show dynamic checkout buttons: on by default. Shows express checkout buttons, such as Shop Pay or PayPal, under the add to cart button. Which buttons show depends on your store’s payment settings.
On gift card products, this block also shows a form for sending the gift card to someone else. See Gift card.

​
Icon with text

A short line of text with a small icon, such as a stock or delivery note. You can add as many as you need. The block shows nothing until it has text.
Theme editor sidebar showing the Icon with text block (in Product) settings: Icon, Text, Text size, Bottom padding.
  • Icon: Checkmark (default), Delivery truck, Clock, Package, Return arrow, Shield, Store or Payment card.
  • Text: default “In stock and ready to ship”.
  • Text size: Large, Regular, Small (default) or Caption.

​
Trust badges

A row of up to four badges, each with a label and an icon. A badge shows only when its Label has text.
Theme editor sidebar showing the Trust badges block (in Product) settings: Label, Use SVG icon, SVG code.
Theme editor sidebar showing the Trust badges block (in Product) settings (part 2, scrolled): Label, Use SVG icon, Icon, Bottom padding.
Each of the four badges has the same settings:
  • Label: the badge text. Defaults: “Free shipping”, “Easy returns” and “Safe checkout”. The fourth badge is empty.
  • Use SVG icon: off by default. Turn it on to paste SVG code instead of picking an image.
  • Icon: an image for the badge icon. Appears only when Use SVG icon is off.
  • SVG code: inline SVG code for the icon. Use currentColor for strokes and fills so the icon follows the color scheme. Appears only when Use SVG icon is on.

​
Pickup availability

Shows whether the chosen variant can be picked up at one of your store locations, and how soon. An arrow opens a panel listing every location with local pickup, its address and its status. The block updates when shoppers change the variant, and shows nothing when no location offers pickup for the variant.
Theme editor sidebar showing the Pickup availability block (in Product) settings: Color scheme, Bottom padding.
  • Color scheme: the colors of the pickup card.
Turn on local pickup for a location in your Shopify admin under Settings, then Shipping and delivery.

​
Collapsible row

A row that opens to show text, for details such as materials, care or shipping. You can add as many as you need.
Theme editor sidebar showing the Collapsible row block (in Product) settings: Heading, Open by default, Text, Heading size, Text size, Bottom padding.
  • Heading: default “Product details”.
  • Open by default: off by default.
  • Text: the content shown when the row opens.
  • Heading size: Heading 4, Heading 5, Large, Regular, Small (default) or Caption.
  • Text size: Large, Regular, Small (default) or Caption.

​
Description

Shows the product description from your Shopify admin. The block shows nothing for products without a description.

​
Share

Shows links that share the product on Facebook, X and Pinterest, and a Copy link button that copies the page address. The copy button is hidden in browsers that don’t allow copying.

​
Complementary products

Shows products that go well with this one, such as accessories, under the product pictures. On phones that places it between the gallery and the product details. The products come from the complementary products you set for each product in Shopify’s Search & Discovery app. If a product has none, the block stays hidden.
Theme editor sidebar showing the Complementary products block (in Product) settings: Heading, Products to show, Bottom padding.
  • Heading: default “Complete the look”.
  • Products to show: from 2 to 10. Default: 4.

​
Custom Liquid

Adds your own Liquid or HTML code to the product column. You can add as many as you need.
  • Custom Liquid: the code to show.
Code in this block runs as it is. A mistake can break the layout of every product page. Test changes on a copy of the theme first.

​
Apps

The product column also accepts app blocks, such as reviews or size charts from apps you install. Click Add block and pick the app block under Apps.

​
Other sections on the product template

The default product template comes with these sections under Product, in this order. Each one can be edited, hidden, removed or reordered.

​
Best practices

  • Upload pictures in one shape. Pick the Aspect ratio that matches most of your product photos so pictures are not cropped unevenly.
  • Attach a picture to each variant. In your Shopify admin, give each color variant its own picture so the gallery shows the right one when a shopper picks it.
  • Use collapsible rows for long details. Keep the description short and move materials, care and shipping into rows so the buy buttons stay near the top.
  • Set complementary products for best sellers. The Complementary products block only shows products you have chosen in Search & Discovery.

Variants

Choose which options show as color swatches and their shape.

Gift card

See what gift card buyers and recipients get.