Product page sections#

Last updated: November 2, 2026

The product page is built from several sections. Product information is the main one and is made of blocks. The others add extra content below it. For a task-based guide, see Product page.

The default product page contains these sections, in this order: Product information, Complete the look, Product recommendations, Recently viewed and Size guide drawer. The Fit guide section is not in the default order. You can add it from Add section when your products need it. The theme has one product template, so what you type in these sections is the same on every product. Text for one product goes in the product description. See Product content.

Product information#

The main product section. It has the gallery, title, price, options, buy buttons and tabs. Almost everything in it is a block, so you can add, remove and reorder pieces.

The default blocks, from top to bottom, are: Product title, Rating, Price, Text, Variant picker, Size guide link, Inventory status, Quantity, Buy buttons, Pickup availability, two Delivery note blocks, Product highlights and three Collapsible tab blocks (Shipping and returns, Care, and Size help). The Fit notes block is available in Add block but is not in the default order.

Editor name: Product information. Where you can add it: Product pages. Blocks: up to 25.

Settings#

Content

Gallery

Behavior

Details tabs

Style

Spacing: Top padding (80 px, 0 to 200 px), Bottom padding (80 px, 0 to 200 px). These add space above and below the section.

Blocks#

Block: Product title (one per section)

Block: Rating (one per section)

Block: Price (one per section)

Block: Text

Block: Variant picker (one per section)

Options

Block: Size guide link (one per section)

Block: Inventory status (one per section)

Block: Quantity (one per section)

Block: Buy buttons (one per section)

Block: Pickup availability (one per section)

This block has no settings.

Block: Delivery note

You can add as many Delivery note blocks as you like. They do not show on gift card products.

Block: Product highlights (one per section)

Block: Fit notes (one per section)

Block: Collapsible tab

Block: Complete the look link (one per section)

Block: Share (one per section)

Block: Custom Liquid

App block. Add blocks from apps you have installed (see Apps and app blocks).

Tips

• Thumbnails (the Layout setting) has three choices: Left of the image, Below the image, and Cinema (film strip and info panel). On phones thumbnails always sit below the image.
• The Variant picker shows an option as color swatches only when its name is listed in Options shown as swatches (default "Color,Colour") and the value has a swatch color or image in Shopify. See Product page.
• The Size guide link block opens the Size guide drawer, or a page if you pick one in Size guide page link. Set its Size option name to match your option, for example "Size". The link shows only on products that have a size option. Choose All products in Show for to show it everywhere.
• Collapsible tab blocks hold text you type in the editor. It is the same on every product, so write store-wide text. For text that differs per product, use the product description. See Collapsible tabs.
• Tab style set to Tabs turns Collapsible tab blocks that sit next to each other into a row of tabs on desktop. See Product page > Tabs or accordion.
• The Rating block shows stars only when a review app has saved a rating for the product. See Product page > Reviews and stars.
• The Inventory status block uses real inventory only. See Product page > Stock message.
• The Product highlights and Fit notes blocks show the rows you type. Empty rows are skipped.
• Pickup availability only shows when the product is available for local pickup at a location in your store. See Product page.
• Buy buttons includes the gift card recipient form on gift card products. See Gift cards.
• Use the Apps block (an app block) or Custom Liquid block for the review widget, subscription widgets and similar.

Complete the look#

Shows products that pair with the one being viewed. You pick the products in the editor, and they show on every product page that uses the template. If you pick none, it uses Shopify's complementary recommendations.

Editor name: Complete the look. Where you can add it: Product pages.

Settings#

Content

Button

Products

Style

Spacing: Top padding (80 px, 0 to 200 px), Bottom padding (80 px, 0 to 200 px). These add space above and below the section.

Tips

• The section hides itself when there are no picked products and no complementary recommendations. The product being viewed is never listed: if it is in Picked products it is skipped, and if it is the only pick the section uses the recommendations.
• Complementary recommendations need the free Shopify Search & Discovery app, with complementary products set up for each product. See Filters and search.
• Add a Complete the look link block to the Product information section to give shoppers a button that scrolls to this section.

Fit guide#

Explains the general fits you offer, such as Close, Regular and Relaxed, side by side. You type each fit in a block. It is the same on every product.

Editor name: Fit guide. Where you can add it: Product pages. Blocks: up to 3.

Settings#

Content

Row labels

Table

Style

Spacing: Top padding (80 px, 0 to 200 px), Bottom padding (80 px, 0 to 200 px). These add space above and below the section.

Blocks#

Block: Fit (up to 3)

Tips

• The fits are general. They are the same on every product. For the fit of one item, write it in the product description.
• Row labels are set once on the section. Each Fit block holds the text for those rows.
• The Fit guide is not on the default product page, because it only suits clothing. Add it with Add section if you want it. Its size guide link also hides on products without a size option.
• Remove the section if your products do not need a fit guide.

Size guide drawer#

A drawer that slides in from the side when a shopper selects the size guide link. It shows the size tables and measuring steps you type in the editor. They are the same on every product. On phones the table shrinks to fit the drawer and each cell shows the two units on two lines. A very wide custom table still scrolls sideways.

Editor name: Size guide drawer. Where you can add it: Product pages. Blocks: up to 9 (4 Size table blocks and 5 Measuring step blocks).

This is the drawer on the store. The row for the size the shopper picked is highlighted:

Settings#

Content

How to measure

Footer

Style

Blocks#

Block: Size table (up to 4)

Block: Measuring step (up to 5)

How to write the table data#

Table data is plain text. Write the header on the first line, then one row per line. Split the columns with |. The first column is the size, and the shopper's selected size is highlighted by matching it. Example:

Size | Bust | Waist
S | 34 in / 86 cm | 27 in / 69 cm
M | 36 in / 91 cm | 29 in / 74 cm

For a measurement in two units, write inches, a space, a slash, a space, then centimeters, as in 34 1/2 in / 86 cm. The Units setting picks what shows: both, inches only (the part before the slash) or centimeters only (the part after the slash). A slash without spaces on both sides is shown as typed, so fractions like 1/2 and cells like XS/S work. A cell without a spaced slash is shown as typed. Blank lines and rows with no size in the first column are ignored, extra cells beyond the header are left out and missing cells stay empty. A Size table block with no table data shows nothing.

Tips

• Add up to four Size table blocks, for example one for tops and one for bottoms. Give each a Heading.
• In the Note, use {size} for the size the shopper picked in the product form.
• Add up to five Measuring step blocks for the "How to measure" steps, and an Image that shows where to measure.
• Link to your full Size guide page with Full guide link.
• To send the size guide link to a page instead of the drawer, pick a page in the Size guide page link setting of the Size guide link block.

Product recommendations#

Related or complementary products, shown on the product page and on the cart page.

Editor name: Product recommendations. Where you can add it: Product pages, Cart page.

Settings#

Content

Products

Style

Spacing: Top padding (80 px, 0 to 200 px), Bottom padding (80 px, 0 to 200 px). These add space above and below the section.

Tips

• Related products work on every store. Complementary products need Shopify Search & Discovery.
• Leave Link empty to link to the product's first collection.

Recently viewed#

Shows products the shopper looked at earlier. It uses the browser's own storage, so it is private to each visitor and needs no setup.

Editor name: Recently viewed. Where you can add it: Product pages, Collection pages, Home page, Cart page.

Settings#

Content

Products

Style

Spacing: Top padding (80 px, 0 to 200 px), Bottom padding (80 px, 0 to 200 px). These add space above and below the section.

Tips

• The current product is never included.
• The section stays hidden until the shopper has viewed enough products to fill a row, so it is empty for new visitors.