The Featured product section shows one product with its photo, title, options and an add to cart button, so customers can buy it without leaving the page. To add one, click Add section in the editor, select Featured product, and then choose the product under Product. It works on any page.
Layout offers two ways to show the product, described further down. With the default, Product form, the photo sits on the left and the product's details on the right on screens 1,000 px and wider. On smaller screens, the details sit under the photo.
Until you choose a product, the section does not appear on your store. In the editor, it shows the message "Pick a product to feature here." in its place.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
The shape of the photo. Natural keeps each photo's own shape. Landscape, Square and Portrait crop it to a wide, square or tall frame. The default is Square. Shows when Layout is Product form.
Layout
How the photo and the details are arranged: Product form, the default, or Product on the page. Each one is described below.
The section shows one photo of the product at a time: the photo of the selected variant, or the product's first photo. It changes when a customer picks another variant. With Product form, clicking the photo opens a large view where customers can go through all the product's photos. When the product has a video or a 3D model, the section shows all of the product's photos, videos and 3D models in a row instead, with arrows and dots to move through them.
Choose a layout
Product form puts the product photo on the left and the details in a column to its right, as on the product page. Clicking the photo opens the large view.
Product on the page stacks everything in one centered column. The product photo comes first, in a wide frame, 4 by 3, between 288 px and 608 px wide, depending on the screen. In light mode, the photo's own white or light gray background blends into the page, so the product seems to stand on it. In dark mode, the photo keeps its background inside a frame with rounded corners. Under the photo come the Variant option block, the title at the Display 1 size with the price under it, the first paragraph of the description in a lighter color, and the Buy buttons block, in that order whatever order the blocks have in the sidebar. Other blocks show under the button. The layout uses only the photos assigned to the product's variants, or the product's first photo when no variant has its own. When a customer picks a variant, its photo fades in. A variant without its own photo shows the first variant's photo. Clicking the photo does nothing.
The Fang style's home page uses Product form, and the Lair style's uses Product on the page. A style is one of the theme's three starting looks, which Theme styles compares.
The product's details are blocks, listed in the order you set, except in Product on the page, as described above. The preset starts with Product header, Description, Product metrics, Variant option, Purchase options, Buy buttons, Pickup availability, Info card and View details link. Click Add block in the section to add another. These are the same blocks as on the product page, and Product information section describes each one in full.
Block
What it shows
Product header
The product's title in large text, with the price under it, and the vendor above it when Show vendor is on.
Description
The product's description from the Shopify admin. It hides when the description is empty.
Product metrics
Values from product metafields. Ratings show as bars or dots, as Metric style in Theme settings > Product cards sets. Show product ratings as bars or dots explains the set-up.
Variant option
The product's options, such as size or color. Style shows them as a Dropdown, as Buttons, as round color circles with Swatch, or as a photo of each variant with Variant image. Option name limits the block to one option. Show color swatches for variants explains swatches.
Purchase options
A choice between a one-time purchase and a subscription. It shows only for products with subscription plans, as Sell subscriptions explains.
Buy buttons
A quantity box and the add to cart button. Show wishlist button and Show share button add round heart and share buttons on the top right corner of the photo. Show dynamic checkout buttons adds Shopify's express checkout buttons under the add to cart button.
Pickup availability
Whether the selected variant can be picked up at one of your locations. It hides when no location offers pickup for the variant, as Show local pickup availability explains.
View details link
A small link with an arrow that opens the product's page. Its default text is "View full details".
Info card
A heading and up to four lines of short text, each with an optional icon, such as delivery times. A line with empty text does not show. Style shows them in a box with Card, or as a plain list in small text with List.
The Featured product section shows one product with its photo, title, options and an add to cart button, so customers can buy it without leaving the page. To add one, click Add section in the editor, select Featured product, and then choose the product under Product. It works on any page.
Layout offers two ways to show the product, described further down. With the default, Product form, the photo sits on the left and the product's details on the right on screens 1,000 px and wider. On smaller screens, the details sit under the photo.
Until you choose a product, the section does not appear on your store. In the editor, it shows the message "Pick a product to feature here." in its place.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Background
The background settings are explained in Section background settings.
Content
Setting
What it does
Product
The product to show.
Image ratio
The shape of the photo. Natural keeps each photo's own shape. Landscape, Square and Portrait crop it to a wide, square or tall frame. The default is Square. Shows when Layout is Product form.
Layout
How the photo and the details are arranged: Product form, the default, or Product on the page. Each one is described below.
The section shows one photo of the product at a time: the photo of the selected variant, or the product's first photo. It changes when a customer picks another variant. With Product form, clicking the photo opens a large view where customers can go through all the product's photos. When the product has a video or a 3D model, the section shows all of the product's photos, videos and 3D models in a row instead, with arrows and dots to move through them.
Choose a layout
Product form puts the product photo on the left and the details in a column to its right, as on the product page. Clicking the photo opens the large view.
Product on the page stacks everything in one centered column. The product photo comes first, in a wide frame, 4 by 3, between 288 px and 608 px wide, depending on the screen. In light mode, the photo's own white or light gray background blends into the page, so the product seems to stand on it. In dark mode, the photo keeps its background inside a frame with rounded corners. Under the photo come the Variant option block, the title at the Display 1 size with the price under it, the first paragraph of the description in a lighter color, and the Buy buttons block, in that order whatever order the blocks have in the sidebar. Other blocks show under the button. The layout uses only the photos assigned to the product's variants, or the product's first photo when no variant has its own. When a customer picks a variant, its photo fades in. A variant without its own photo shows the first variant's photo. Clicking the photo does nothing.
The Fang style's home page uses Product form, and the Lair style's uses Product on the page. A style is one of the theme's three starting looks, which Theme styles compares.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings.
Blocks
The product's details are blocks, listed in the order you set, except in Product on the page, as described above. The preset starts with Product header, Description, Product metrics, Variant option, Purchase options, Buy buttons, Pickup availability, Info card and View details link. Click Add block in the section to add another. These are the same blocks as on the product page, and Product information section describes each one in full.
Block
What it shows
Product header
The product's title in large text, with the price under it, and the vendor above it when Show vendor is on.
Description
The product's description from the Shopify admin. It hides when the description is empty.
Product metrics
Values from product metafields. Ratings show as bars or dots, as Metric style in Theme settings > Product cards sets. Show product ratings as bars or dots explains the set-up.
Variant option
The product's options, such as size or color. Style shows them as a Dropdown, as Buttons, as round color circles with Swatch, or as a photo of each variant with Variant image. Option name limits the block to one option. Show color swatches for variants explains swatches.
Purchase options
A choice between a one-time purchase and a subscription. It shows only for products with subscription plans, as Sell subscriptions explains.
Buy buttons
A quantity box and the add to cart button. Show wishlist button and Show share button add round heart and share buttons on the top right corner of the photo. Show dynamic checkout buttons adds Shopify's express checkout buttons under the add to cart button.
Pickup availability
Whether the selected variant can be picked up at one of your locations. It hides when no location offers pickup for the variant, as Show local pickup availability explains.
View details link
A small link with an arrow that opens the product's page. Its default text is "View full details".
Info card
A heading and up to four lines of short text, each with an optional icon, such as delivery times. A line with empty text does not show. Style shows them in a box with Card, or as a plain list in small text with List.
Custom liquid
Your own HTML or Liquid code.
Blocks from apps can go here too, as Add an app to your store explains.