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