Product

The Product template brings a product's media, purchase controls, supporting details, and recommendations together on one page. Use it when the same product-page structure should apply to every product assigned to this template.

Open the Product template

1. From Shopify admin, go to Online Store > Themes > Customize.
2. Use the page selector to open Products > Default product, or choose the product template you want to review.
3. Select the Product page section to edit its settings and blocks.
4. Use the template preview to check a product with several media items, multiple variants, and an unavailable variant before saving.

Template order

The current saved Product template contains these sections, in order:

1. Product page
2. Product recommendations
3. Recently viewed products
4. Video

The first section contains the product information blocks listed below. The remaining sections are separate template sections and can be reviewed independently.

Product page settings

Features

Show add to cart on scroll

• Controls: Shows a persistent add-to-cart control as the customer moves through the product page.
• Use it when: The product information is long enough that customers may need to add the selected variant without returning to the main purchase area.
• Verify later: Confirm the sticky control's position, selected-variant updates, and reduced-motion behavior on desktop and mobile.

Layout

Full width

• Controls: Chooses whether the Product page section uses the full available width or the standard page-width container.
• Use it when: Use full width for a more expansive media-and-details composition; turn it off when the product page should align with other constrained content.
• Verify later: Compare the media/details balance at the narrowest supported viewport and on a wide desktop.

Media

The product media comes from the product's media in Shopify admin. The schema note also supports images, videos, and 3D models from the product record.

Desktop media size

• Controls: Sets the desktop share of the page used by product media.
• Use it when: Increase it when the product imagery is the primary selling element; reduce it when product details need more room.
• Options: 40–70%, in 1% steps. The current default is 55%.

Desktop media layout

• Controls: Chooses how product media is arranged on desktop.
• Options: Grid (1x1), Grid (2x2), Grid (2x2) with highlighted media, Thumbnails left (carousel), Thumbnails bottom (carousel), or Background gallery.
• Use it when: Choose a grid for a product that benefits from seeing several images together. Choose a thumbnail carousel when the purchase details should remain the visual focus. Use Background gallery only after reviewing the header overlay against the selected product media.
• Verify later: Confirm the exact crop, keyboard controls, active-media state, and header treatment for every layout option.

Mobile media size

• Controls: Chooses whether product media is displayed in an expanded or contained mobile presentation.
• Options: Expanded or Contained.
• Use it when: Compare both options with the product's most important image and with a product containing several media items.

Mobile carousel control

• Controls: Chooses the control shown when mobile media is presented as a carousel.
• Options: Floating dots, Thumbnails, Counter, or None.
• Use it when: Use dots for a light control, thumbnails when shoppers need to identify media, or a counter when the number of media items matters. Do not choose None until the accepted mobile behavior confirms another way to discover additional media.

Enable video autoplay

• Controls: Allows Shopify-hosted product videos to start automatically in supported media presentations.
• Use it when: Enable it only when the video communicates useful product information without requiring sound. The schema notes that autoplay is muted automatically and is disabled by desktop grid mode.
• Verify later: Confirm the browser's visibility, reduced-motion, and mobile playback behavior before treating autoplay as a final recommendation.

Enable video looping

• Controls: Repeats product videos after playback reaches the end.
• Use it when: Enable it for short demonstrations that make sense as a loop; leave it off when the video has a clear ending.
• Verify later: Check the interaction with autoplay and the media controls on desktop and mobile.

Image zoom

Enable image zoom

• Controls: Enables the larger image viewer for product images.
• Use it when: Enable it when material, finish, or construction details need a closer inspection.
• Verify later: Confirm which media types can be enlarged, how the viewer closes, and keyboard focus behavior.

Max zoom level

• Controls: Sets the maximum zoom level available in the image viewer.
• Options: 2–5, in whole-number steps. The current default is 3.
• Use it when: Use a higher value only when the source images contain enough detail to support it; a higher setting cannot create detail that is absent from the uploaded image.

Spacing

Section spacing

• Controls: Sets the Product page section spacing to None, Small, Medium, or Large. The current default is Small.
• Use it when: Adjust the gap around the Product page section after the media and details layout is settled.

Top spacing

• Controls: Adds or removes the section's top spacing. The current default is on.
• Use it when: Turn it off only when the preceding template section already provides the required separation.

Bottom spacing

• Controls: Adds or removes the section's bottom spacing. The current default is on.
• Use it when: Turn it off only when the following template section provides the required separation.

Product information blocks

Blocks are rendered in the order shown in the Theme Editor. Reorder them only when the resulting purchase path remains clear on both desktop and mobile.

Vendor

Shows the product vendor when the product provides one. This block has a limit of one.

Title

Shows the product title. This block has a limit of one.

Badges

This block has a limit of one and includes:

• Show sale badge: Shows the sale state when the product has a compare-at price relationship.
• Show sold out badge: Shows the unavailable state when the product cannot be purchased.
• Custom badge: Adds the merchant's short badge text.

Confirm the sale and unavailable states with approved product fixtures before documenting the exact badge placement.

Price

This block has a limit of one.

• Show compare-at price: Shows the compare-at price when the product supplies one.

Rating

This block has a limit of one.

• Show rating count: Includes the count alongside the rating when accepted product-rating data is available.

The theme does not create rating data. Verify the empty-data state before publishing a rating example.

Payment installments

Shows payment-installment information when the store and product are eligible. This block has a limit of one; the availability of the message depends on Shopify's payment configuration and the product context.

Separator

Adds a visual separator between product information groups. There is no stated block limit.

Description

This block has a limit of one.

• Open by default: Opens the product description disclosure when the page loads. The current default is off.

The block is useful when the product description should remain part of the purchase information without occupying the initial view when closed.

Accordion item

Adds a reusable details panel. There is no stated block limit.

• Heading: The visible disclosure heading. The current default is Product details.
• Content: Rich text for materials, care, delivery, or other supporting information.
• Page: Uses a Shopify page as the panel content when a page is more appropriate than inline text.
• Open by default: Opens the panel on initial display. The current default is off.

The schema notes that this block is always shown after the product purchase information. Verify the final position if several accordions are used.

Variant picker

This block has a limit of one.

• Style: Choose Auto, Swatches, Buttons, or Dropdown.
• Auto: The current schema describes this as using swatches for color, buttons for up to five short values, and dropdowns for longer lists.

The visible choices still depend on the product's options and variants. Verify unavailable combinations, the selected variant's media, and keyboard selection before publishing a recommendation.

Quantity selector

Allows the customer to select quantity. This block has a limit of one. The visible minimum, increment, and maximum can come from the selected variant's quantity rules; verify those states with the approved product fixture.

Buy buttons

This block has a limit of one.

• Show dynamic checkout button: Shows Shopify's dynamic checkout action when the store and product support it. The current default is on.

Verify the unavailable-variant state and the relationship between the standard add-to-cart and dynamic checkout actions.

Pickup availability

This block has a limit of one. It can show pickup information when the selected variant has pickup-enabled store availability. Verify both an available and unavailable location state, and confirm that the location dialog is keyboard accessible.

App blocks

@app blocks allow compatible Shopify app content to be inserted into the product information area. The theme does not define the fields or behavior of an individual app block; review the app's own documentation and test it in an unpublished theme.

Custom liquid

Adds merchant-authored Liquid. There is no stated block limit.

• Custom liquid: The Liquid content entered for this block.

Use only Liquid that the merchant understands and can support. Do not place payment credentials, customer data, or private API values in this field.

Product recommendations

The second section in the current Product template is Product recommendations. Its settings are independent of the Product page blocks.

Heading

• Eyebrow: Optional short label above the heading.
• Heading: The section heading. The current default is You may also like.
• Text: Optional supporting rich text.

Products

• Recommendation type: Choose Related products or Complementary products.
• Dynamic recommendations count: 2–10 products, in whole-number steps. The current default is 6.
• Manual recommendations: Select up to 12 products. Selecting manual recommendations replaces automatic recommendations.

Dynamic recommendations are managed through Shopify Search and Discovery. Verify the empty and partially populated states before relying on this section for merchandising.

Layout

• Full width: Uses the full available section width when enabled. The current default is on.
• Stack products: Changes the product presentation from the carousel-style layout to a stacked layout. The current default is off.
• Products per row (mobile): 1 or 2; the current default is 1.
• Products per row (desktop): 2–6 products per row; the current default is 3.
• Heading alignment: Left, Center, or Right; the current default is Left.
• Content width: Small, Medium, or Large; the current default is Medium.

Spacing

• Section spacing: Small, Medium, or Large; the current default is Medium.
• Top spacing: Adds or removes top spacing; the current default is off.
• Bottom spacing: Adds or removes bottom spacing; the current default is on.

Recently viewed products

The third section is Recently viewed products. It depends on a customer's browsing history, so an empty state is expected for a new session.

Heading

• Eyebrow: Optional short label. The current default is Continue shopping.
• Heading: The section heading. The current default is Recently viewed.
• Text: Optional supporting rich text.
• Heading alignment: Left, Center, or Right; the current default is Left.
• Content width: Small, Medium, or Large; the current default is Medium.

Products

• Full width: Uses the full available section width when enabled. The current default is on.
• Stack products: Uses a stacked presentation instead of the carousel-style presentation. The current default is off.
• Show carousel progress bar: Shows the progress bar when products are not stacked. The current default is on; this control is not applicable when Stack products is enabled.
• Products to show: 2–12 products; the current default is 6.
• Products per row (mobile): 1 or 2; the current default is 2.
• Products per row (desktop): 2–6 products per row; the current default is 4.

Spacing

• Section spacing: None, Small, Medium, or Large; the current default is Medium.
• Top spacing: Adds or removes top spacing; the current default is on.
• Bottom spacing: Adds or removes bottom spacing; the current default is on.

Video

The final section in the current Product template is Video. It uses the same section controls as the addable Video section. Configure its media and playback only after checking the product page's final loading and motion behavior.

Desktop and mobile behavior

The schema provides separate desktop media layout, mobile media size, and mobile carousel controls. A final guide should show the same approved product at both viewport sizes and verify:

• media order, crop, and selected-variant updates;
• sticky add-to-cart placement;
• zoom and video controls;
• quantity rules, unavailable variants, and pickup availability;
• recommendation and recently viewed layout when the sections contain different numbers of products.

Exact breakpoints and unverified layout outcomes are intentionally not stated here.

Media recommendations

Use product media with enough crop flexibility for every selected desktop layout and the chosen mobile presentation. Supply a mobile-specific media source only when the crop or subject placement needs to differ. Exact dimensions and upload recommendations require accepted fixture testing.

Accessibility and motion

Provide meaningful alternative text for informative product media. Verify keyboard access for the media viewer, variant picker, disclosures, pickup dialog, and purchase controls. Autoplay must remain muted as described by the schema, and reduced-motion behavior must be checked before enabling motion-heavy product media.

Common checks

• If a block is missing, confirm that you are editing the Product template and that the block has not been removed or moved below the visible product information.
• If a setting appears unavailable, check whether it is a block setting with a one-block limit or a section setting shared by the whole Product section.
• If recommendations or pickup information are empty, verify the Shopify product, Search and Discovery, payment, or pickup configuration before treating it as a theme issue.

Related guides

• Product card
• Color swatches
• Cart
• Collection

[!NOTE] The setting labels, option values, block order, and limits above are taken from the current Product template and section schemas. Desktop/mobile outcomes, exact interaction behavior, screenshots, and troubleshooting conclusions remain pending accepted storefront and Theme Editor verification.