> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Set up the Facet product page, gallery and buy blocks > Configure Facet's product page: gallery layout, zoom, thumbnails, sticky add to cart, and every product block from price and variants to pickup and sharing. 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=d47edd9aae19c9ebe49cc736f897f2f9) ## 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=f70285b267f55aee88b4861eebb1c24a) > [!NOTE] > > 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 ### Gallery ![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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=106fe237328f81634893b2e2c380670f) > [accordion] Gallery layout > > * **Carousel** (default): one picture at a time, with arrows and a progress bar. > * **Carousel with next picture peeking**: one picture with the edge of the next one showing. > * **Grid**: every picture shown at once, in rows. > * **Stacked**: every picture full width, one under the other. > > On phones, every layout shows as a swipeable carousel. On large screens, the product column stays in view while shoppers scroll through a grid or stack of pictures. > [accordion] Images per row on desktop > > **1** or **2** (default). Phones always show one picture per row. Appears only when **Gallery layout** is **Grid**. > [accordion] Thumbnails > > **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. > [accordion] Thumbnail position on desktop > > **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. > [accordion] Aspect ratio > > 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/products/product-page/product-page-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=253a589f9022c4e9cf916f8dc0682ea6) * **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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/products/product-page/product-page-settings-3.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=f97a0c2d113dd063da64bbccf391b9db) * **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](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-heading-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=92f83d87aa286949498805cfca245020) * **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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-subtitle-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=61a95dfb4b05d832f650cde09a8dd168) ### 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-rating-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=af1c43bb000f8468f86185dfbd97a464) ### 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-price-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=c4613095a59c7ba690c91dacf149ba3d) * **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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-variant-picker-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=63525be09c1ab6c3273ed56138d7858e) * **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. > [!TIP] > > Color options can show as swatches. Which options count as colors, and how swatches look, is set in [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md). 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-buy-buttons-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=31f0750fed22655ed15147743f745dfd) * **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](https://docs.shopify.lightsout.agency/themes/facet/products/gift-card.md). ### 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-icon-with-text-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=d0f749cc76b0db9575d3138a19555190) * **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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-trust-badges-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=d4efb92d8f116c5e5dfa5f766587469f) ![Theme editor sidebar showing the Trust badges block (in Product) settings (part 2, scrolled): Label, Use SVG icon, Icon, Bottom padding.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-trust-badges-2.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=6d37c33d01f94b1a4187d4a345afdf82) > [tab] Badge settings > > 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. > [tab] SVG tips > > SVG code that contains scripts or event handlers is not shown. Paste plain SVG files, such as icons exported from a design tool. ### 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-pickup-availability-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=b5ec9c48b73d39202720e7938126e043) * **Color scheme**: the colors of the pickup card. > [!NOTE] > > 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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-collapsible-row-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=0cf890479ba46e842c0cdbe36015f250) * **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.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/products/product-page/product-page-block-complementary-products-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=45f3d9b17fd4a211cc9b077adf83956d) * **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. > [!WARNING] > > 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. * [Additional features](https://docs.shopify.lightsout.agency/themes/facet/sections/additional-features.md): tabs with more product details. * [Related products](https://docs.shopify.lightsout.agency/themes/facet/sections/related-products.md): products similar to the one in view. * [Recently viewed](https://docs.shopify.lightsout.agency/themes/facet/sections/recently-viewed.md): products the shopper looked at before. * [FAQ](https://docs.shopify.lightsout.agency/themes/facet/sections/faq.md): common questions and answers. * [Promotion banner](https://docs.shopify.lightsout.agency/themes/facet/sections/promotion-banner.md): a promotion with a countdown and a button. * [Testimonials](https://docs.shopify.lightsout.agency/themes/facet/sections/testimonials.md): customer quotes. ## 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. ## Related guides > [card] [Variants](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/variants.md) > > Choose which options show as color swatches and their shape. > [card] [Gift card](https://docs.shopify.lightsout.agency/themes/facet/products/gift-card.md) > > See what gift card buyers and recipients get. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.