Featured product puts one product on any page with its gallery, price, variant picker and buy buttons, so customers can add it to the cart without visiting the product page. It reuses the product page's own gallery and picker, and behaves the same way.
For a more editorial treatment of a single product, see Editorial product spread.
Where to find it
In the theme editor, click Add section and choose Featured product. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
The gallery sits on one side and the product details on the other; on mobile they stack, gallery first. The details are blocks, so you choose which appear and in what order.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Product | Product. | The product to show. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Media | ||
| Media ratio | Natural, Portrait (4:5) or Square (1:1). Default: Portrait (4:5). | The shape the product's images are cropped to. Natural keeps each image's own shape. |
| Open images in full screen on click | On or off. Default: on. | Opens an image in full screen when a customer clicks it. |
| Show only selected color's media | On or off. Default: on. | When a customer picks a color, the gallery shows only that color's images. For this to work, order the product's media so each color's variant image comes first, followed by that color's other images. Media placed before the first variant image show for every color. |
Blocks
This section is built from 9 kinds of block. Click Add block under the section to add one, and drag blocks to reorder them.
These blocks can be added once each: Vendor, Title, Price, Variant picker, Quantity selector, Buy buttons, Description. The others can be added more than once.
Vendor
The product's vendor.
Title
The product's title.
| Setting | Options | What it does |
|---|---|---|
| Size | Small, Medium or Large. Default: Medium. | How large the title is set. |
Price
The price, with the compare-at price and sale badge when the product is on sale.
| Setting | Options | What it does |
|---|---|---|
| Show tax and shipping note | On or off. Default: on. | Shows a short note under the price about taxes and shipping. |
| Show installment messaging | On or off. Default: on. | Shows Shop Pay Installments messaging, when it is available for your store. |
Variant picker
Lets customers choose options such as size and color.
| Setting | Options | What it does |
|---|---|---|
| Style | Automatic, Buttons or Dropdown. Default: Automatic. | Automatic uses buttons for the option names listed in theme settings under Product options, and dropdowns for the rest. |
| Use swatches for options that have them | On or off. Default: on. | Shows color swatches for options that have them in Shopify. Options without swatches use the style above. |
Quantity selector
Lets customers choose how many to add.
Buy buttons
The add to cart button, and optionally a dynamic checkout button.
| Setting | Options | What it does |
|---|---|---|
| Show dynamic checkout button | On or off. Default: on. | Adds a button that takes customers straight to checkout with their preferred payment method, such as Shop Pay or PayPal. |
| Show recipient form for gift cards | On or off. Default: on. | For gift card products, lets customers send the card to someone else with a message. |
Description
The product's description from Shopify.
Text
A few lines of your own, such as a delivery note. Can be added more than once.
| Setting | Options | What it does |
|---|---|---|
| Text | Formatted text. | The text to show. |
Custom Liquid
A place for code, for example a snippet an app asks you to add. Code you add here is not covered by theme support.
| Setting | Options | What it does |
|---|---|---|
| Liquid code | Liquid code. | The Liquid, HTML, CSS or JavaScript to output. |
App blocks
Apps that offer app blocks can be added here too. They appear under Apps when you click Add block.
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Product images | 2000 x 2500 px (4:5 portrait) | The section uses the product's own media. Shooting every product at the same ratio keeps galleries and grids even. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Remove the blocks you don't need. On a home page, title, price, variant picker and buy buttons are often enough.
- Use this section for a hero product or a gift card. For several products, use Featured collection.