Products

Product page

Learn how to use and customize the product page

The product page is where customers explore a product — browse images and videos, select options, read details, and add items to their cart. It is built from a Product section with a media gallery on the left and a stack of customizable content blocks on the right.

Editing the product page

Open the Theme Editor

In your Shopify admin, go to Online Store > Themes and click Customize on the Atlas theme.

Use the page selector in the top bar to switch to Products > Default product. Select a specific product to use as a preview while editing.

Select the Product section

In the left sidebar, click the Product section to access the section-level settings (gallery layout, video behavior, sticky add to cart, colors, and spacing). Click any of its blocks to configure individual content areas like the title, price, variant picker, or description.

Add, remove, or reorder blocks

Click Add block inside the Product section to insert new blocks. Drag blocks to reorder them, or click the Remove option to delete a block.

The media gallery displays your product images, videos, and 3D models. Two layout modes are available under the Gallery settings in the Product section.

Displays one image at a time with a thumbnail strip for navigation.

  • Thumbnails position — show thumbnails on the Left (vertical strip) or Bottom (horizontal strip).
  • Carousel indicator (mobile) — choose how customers navigate the carousel on mobile: Thumbnails, Counter (e.g., "1 / 5" with arrows), or Bar (a progress bar).

Grid

Displays all images in a grid layout. Three grid types are available:

  • One column — a single-column stack.
  • Two columns — images arranged in an equal two-column grid.
  • Two columns with featured image — the first image spans the full width, with the rest in two columns.

Zoom

Customers can click a zoom icon on any image to open a full-screen lightbox with the original high-resolution image. Navigation within the lightbox stays in sync with the gallery.

Video

Four settings control video behavior in the gallery:

  • Enable autoplay — videos play automatically when they come into view.
  • Mute videos by default — starts videos with sound off (required for autoplay).
  • Show video controls — displays play, pause, and volume controls.
  • Loop videos — videos restart automatically when they end.
  • Product gallery width — controls how wide the gallery column is relative to the product info column (40–66%).
  • Only show selected variant images — when enabled, only images associated with the currently selected variant are shown in the gallery.

Product information blocks

The product information column is built from blocks that you can add, remove, and reorder. Several blocks include a Show under product gallery setting — when enabled, the block moves from the product info column to a full-width area below the media gallery, which is useful for longer content like descriptions or specifications. The following blocks are available:

Title

Displays the product title. You can adjust the Heading size, override the text Color, and set the SEO tag (the HTML heading level used for search engines, e.g., h1).

Vendor / SKU

Shows the product vendor and/or SKU. Each can be toggled independently with Show vendor and Show SKU.

Price

Displays the product price, including compare-at prices for items on sale. Enable Show taxes notice to display a tax-inclusion message below the price.

Variant picker

Lets customers choose product options like size and color. Two base styles are available:

  • Block — pill-shaped buttons with text labels (default).
  • Dropdown — a compact dropdown menu.

Two additional display modes override the base style for specific options:

  • Swatches — for options that have color swatch data in Shopify, circular color swatches are displayed instead of text. The Swatch selector style setting controls whether these show as swatches, a dropdown, or are disabled. See Color swatches for setup details.
  • Variant images — shows the variant's associated image as a thumbnail. Enter the option names (comma-separated) in Show variant image for options to activate this mode.

The variant picker also includes a Size chart page setting. See Size chart for details.

Enable Hide sold out variants to hide unavailable option values from the picker.

Stock

Displays stock status messages and an optional progress bar.

  • Show progress bar — displays a visual indicator of remaining stock.
  • Show low stock message — alerts customers when stock is running low.
  • Show out of stock message — displays a message when the product is unavailable.
  • Show backorder message — informs customers when a product is available for backorder.
The stock threshold for low-stock messages is configured in Theme settings.

Buy buttons

Displays the Add to cart button and optional extras:

  • Show dynamic checkout buttons — adds accelerated checkout buttons (e.g., Shop Pay, Apple Pay) below the Add to cart button.
  • Show recipient information form for gift cards — displays a form for entering gift card recipient details.

You can customize the colors of both the Add to cart and Buy it now buttons independently.

Description

Displays the product description. By default, it shows as a collapsible accordion — you can turn this off with Show as collapsible content. When collapsible, use Open by default to control whether it starts expanded or collapsed.

Product highlights

Displays a list of short highlights (e.g., "Free shipping", "Handmade", "Eco-friendly"). Enter your highlights as a bullet list in the Content field.

  • Direction — arrange highlights Horizontally or Vertically.
  • Style — display as plain Text or as Pill-shaped badges.
  • Text sizeSmall, Medium, or Large.

Product rating

Displays a star rating for the product. This block requires a product rating app to be installed — once active, ratings appear automatically.

Specifications

Displays product specifications in a table format. See Specifications for detailed setup instructions.

Key features

Highlights up to three important product attributes. See Key features for setup instructions.

Complementary products

Displays related products that pair well with the current item. See Complementary products for setup instructions.

Pickup availability

Shows store pickup availability for the current product. This block uses Shopify's built-in pickup availability data and has no additional settings.

Text

A flexible block for adding custom text with an optional icon. Useful for trust badges, delivery information, or other short messages.

Collapsible content

Adds a collapsible accordion section with a custom heading and rich text content. You can add multiple collapsible content blocks to create an FAQ-style layout, or use the Content from page setting to pull content from a Shopify page.

Custom Liquid

Allows you to add custom Liquid code to the product page.

Custom spacing

Inserts vertical spacing between blocks, with separate values for desktop and mobile.

Sticky add to cart

When Enable sticky add to cart is turned on in the section settings, a compact bar appears at the bottom of the screen as the customer scrolls past the main add-to-cart button. This bar includes the product title, a simplified variant picker, and an Add to cart button, so customers can add the product from anywhere on the page. You can optionally show the product vendor with Show vendor.

The product page template includes a Related products section below the main product section. This section automatically displays related products based on Shopify's product recommendation engine.

  • Enable carousel — displays products in a scrollable carousel (default) or a static grid.
  • Maximum products to show — the number of recommended products to display (up to 20).
  • Products per row — how many products appear per row on desktop.
  • Products per row (mobile) — how many products appear per row on mobile. The 1.5 option shows one full product card with the next one partially visible, hinting that there are more to scroll.

The section heading defaults to "You may also like" and can be customized via the section header block.

Colors

The Product section has its own color settings:

  • Background / Text / Heading — override the default page colors for the entire product section.

Spacing

Enable Custom spacing to control the top and bottom padding of the product section independently.