Default blocks
Product pages
The Product overview section includes default blocks. These blocks include essential components like the product title, price, description, variant and quantity selectors, buy buttons, and share icons.
This guide gives an overview of the default product blocks. See the product page template guide to find featured product blocks and product page layout settings.
Product header
The Product header block displays basic details of your product entered in your Shopify admin settings, including the title and pricing.
**Shopify |**This block displays product details controlled by the Shopify admin. See Shopify's product guide ↗ to learn more.
| Setting | Description |
|---|---|
Show divider | Show border line beneath the product details. |
Show vendor | Show the vendor name beneath the product title. |
Show SKU | Show the "Stock-keeping unit" (SKU) number of the product. |
Show price | Show the product’s price. |
Show discount | Show discount amount as set up in the 'compare at price' setting in the Shopify admin. |
Discount format | Choose to display discounts by percentage or currency amount. |
Show Shop Pay instalments banner | To display the banner, Shop Pay must be enabled for your store. Learn more. |
Show sale badge | Show sale label for products that have a Compare at price set in your Shopify admin. |
Show custom badges | Show custom badges added to your theme settings. See the Product badges guide. |
Always place at the top of page | Choose to show the product header at the top on mobile devices. If disabled, the product header will display below the product media. |
Description
The Description block displays the product description as added in your Shopify admin.
You can change the Style to display the description as a Paragraph, Open accordion, or Close accordion. Click the Description block to find the settings.
Shopify | Product descriptions are added to the Shopify admin. Themes cannot modify product descriptions. See Shopify's product guide ↗ to learn more.
| Setting | Description |
|---|---|
Title | Enter text to display as a heading. (Default: "Description") |
Text size | Change the text size to Small, Regular, or Large. |
Column | Display the description in the Left or Right column. |
Truncate text | Hide text after a selected number of lines and show a ‘more’ button that reveals the full description. |
Display as collapsible row | Show an expandable title that reveals the description when clicked. |
Expand by default | Display the collapsible row as open with the description revealed. |
Variant selector
The Variant selector block displays available product options (e.g. Size or Material) with selectable variants.
Click on the variant selector block to find options for:
Shopify | Product options and variants are a Shopify feature controlled in the admin. See Shopify's Variants manual ↗ to learn more.
Quantity selector
The Quantity selector lets customers add more than one of the product to the cart at one time.
Click the Buy buttons block to choose whether to Show current quantity in cart.
Buy buttons
The Buy button block shows the "Add to cart" button with an optional dynamic checkout button. A Local pickup banner automatically appears below the buy buttons when local pickup is set up in your Shopify admin.
Change button label
The add-to-cart button has the default text "Add to bcart". You can customize this text using the Default theme content editor. In your theme editor or dashboard, click Actions (...) > Edit default theme content. Search this text to replace it with your own. Click Save.
See our guide to learn more about editing default theme content.
Sticky add-to-cart bar
You can show a Sticky add-to-cart bar to allow customers can add your product directly to their cart anywhere on the product page. When the product form's add-to-cart button is not visible, the sticky bar appears at the bottom of the page with an add-to-cart button.
The sticky bar displays the product title, price, image, and variant. Next to the variant, visitors can click the 'Change' link to jump to the variant selectors in the product form.
In the Product template, click the Buy buttons block to find the following settings.
| Setting | Description |
|---|---|
Enable on desktop | Show the Sticky add-to-cart bar on desktop screens. |
Enable on mobile | Show the Sticky add-to-cart bar on mobile screens. |
Drop shadow | Choose to display a Line or Small shadow at the top of the bar. These options will provide more contrast between the bar and the page. Select None to show no shadow or border. |
Dynamic checkout button
The Dynamic checkout button lets customers quickly buy the product they're viewing with a "Buy it now" button that skips directly to the cart or a branded button with the customer's preferred payment method.
To enable this option, click on the Buy buttons block to access its settings and check the Show dynamic checkout buttons checkbox.
Shopify | The Dynamic checkout button is a Shopify feature. The theme includes an option to enable the dynamic checkout button, but settings, icons, and functionality are controlled by Shopify. See Shopify's Dynamic checkout button guide here ↗.
Local pickup banner
If you've set up local pickup in your Shopify admin, the theme automatically displays a banner below the buy buttons that tells customers whether the product is available at your location.
Shopify Local pickup is a Shopify feature and is not controlled by the theme. See Shopify's Local pickup guide ↗ to learn more.
Share icons
Display social media icons that let customers share the product on their Facebook, Pinterest, or X (Twitter).
There are no block options. To disable Share icons, click on the Share block and click Remove block.
Enable native OS sharing
Using the share button will open the built-in share sheet from the user's device.
Related links
Product template Product page layout Product overview blocks
Last updated
