Theme blocks
Use the content blocks to display the required information in the product information section, sidebar, and custom tabs sections.
Products -> Product page
Theme Blocks
The theme provides numerous content blocks that can be added by pressing the “Add block” button. Each block determines what product information should be placed in the product information section of the product page and the sequence of the content.
To display the product information on product pages, add and edit products in your Shopify Admin -> Products. How to add and edit products in your admin, you can learn here.
Let's look at each block in more detail:
Collections
If you need to display a list of collections that include a specific product, use this block. Visitors can be followed to collection pages by pressing on collections links.
Title
To display a product title, use this block:
Reviews
Add the block to show a star rating with the number of reviews:
Additionaly, you can remove or add the reviews counter in Theme settings -> Product page & Quick view -> Reviews.
This functionality requires using a reviews app. You can install an app and activate it in Theme settings -> Reviews. Or use any other app that provides this feature.
Details
Use this block to show the product details such as SKU, barcode, stock status, product type, and vendor. Each option can be activated individually in Theme settings -> Product page and Quick view -> Product details.
Price
To display the product price on product pages, add the block. The block allows showcasing other information such as sale details, tax text, and payment terms if you activate the related options in Theme settings -> Product page and Quick view -> Price.
Icon with text
This block can be added multiple times.
To add additional instructions to the product information section, use the “Icon with text” block.
In the “Block style” drop-down, you can change the visibility of the block. Choose one of the options: “Inline” or “Tile”:
Section #1 - #6
Here you can place up to six information lines in the block.
Use the “Icon SVG” field to set the icon before the text. Find the list of custom icons here. After deciding on the icon to use, paste the shortcode of the icon to the field, for example, “theme-127” or “dry-21”.
To replace the svg icon with an image, remove the icon's shortcode and choose an image from the “Icon image” selector.
If you need to hide the icon and just show the text, disable icon settings, and place text strings in the “Text” input field.
Edit each of the sections to display as many text lines as you wish:
Description
This block can be added multiple times.
By default, the product description is placed in the tab. If you need to move the description to any other position in the product information section, you can add the current block. Add and edit the product description for a product in your Shopify Admin -> Products.
Additionaly, one can paste the block's heading in the “Title” field. And replace the product description with the custom paragraph by using the “Content” input field.
Please note, if you want to show a product description only in the product information section, disable the option “Show tab for Description” in Products -> Product page -> Tabs. More about this functionality you can read here.
Text
This block can be added multiple times.
To display a simple text line, add this block. For example, use the block to place a subtitle of a product and style your text with available settings in the “Content” input field.
Time countdown
This block enables you to show the sale countdown timer:
Please note, you can configure the “Sale countdown” via Metafields.
Check this help page for more details about the product meta fields.
Three conditions are required for this block:
Add the Time countdown block
Set the 'compare at' price for the product in the admin
Add a meta field with the sale end date countdown.date = '2023-10-29 17:10:09'
Stock countdown
This block is required if you want to display the stock countdown. To customize the option, navigate to Theme settings -> Product page and Quick view -> Stock countdown.
Delivery countdown
Add the “Delivery countdown” block to show the scheduled delivery date. Set the delivery changes in the global settings. Go to Theme settings -> Product page and Quick view -> Delivery countdown.
If you add the block, the delivery text countdown will be shown like this:
Visitors
If you add this block, the real-time visitors will be shown like this:
Configure options for real-time visitors in Theme settings -> Product page and Quick view -> Visitors.
Border
This block can be added multiple times.
You can add a dashed dividing line between blocks using the current block. Separate one block from another as you need.
Options
This block allows showcasing product variants available for the product.
Change the product variant design by enabling or disabling the “Enable advanced design for variants” option in Theme settings -> Product variants. If the option “Enable advanced design for variants” is activated, decide on the option type you like here.
Popups
By adding this block, you can place three popups that come with the theme: Size guide, Delivery return, and Message. Each button for the popup can be enabled or disabled in Theme settings -> Product page and Quick view -> Popups.
Text for notes
If you add this block, the customer will be able to write some notes about the order in the special “Notes” field.
Buttons and quantity
This block adds a group of options that compound payment buttons, Wishlist/Compare buttons and a quantity input field. To handle displaying each option in the product information section, go to Theme settings -> Product page and Quick view -> Buttons and inputs.
Free shipping
To display the Free shipping progress bar on product pages, two steps should be done:
Add the Free shipping block
Tick the “Enable bar” checkbox in Theme settings -> Cart.
Pickup availability
If you add this block, the pickup availability will be shown. To display the text of the unavailable pickup, configure the option in Theme settings -> Product page and Quick view -> Pickup availability.
Complementary products
If the product has related products that need to be placed in the product information section, use this block.
To control the number of products displayed in the block, go to Theme settings -> Product page and Quick view -> Complementary products.
You can decide on the list of products that should be displayed on a separate product page in your admin. Go to Shopify admin -> Online Store -> Navigations -> Collection and search filters. Here you can use the Shopify Search & Discovery app to set up products in a few steps:
Open the app:
Choose the “Recommendations” item in the left-hand panel and press on the desired product:
In the “Edit complementary products” block select products that will be displayed on the corresponding product page:
To get more details about this functionality, read the following documentation.
Payments
Use this block to paste the list of payment icons to the product page:
Add or edit the list of payment icons in Theme settings -> Payments. Use the “Product page & Quick view” input field to place the built-in payment icons or the “Images shortcode” input field to display your custom icons.
Social share buttons
The social share icons will be added to the product page, once you add the “Social share buttons” block.
Change the button's type in Theme settings -> Product page and Quick view -> Social share buttons.
Go to Theme settings -> Social Media to view the list of available social icons and activate the ones you need.
Klarna App content
If you installed the Klarna app and need to place some content from the app, the blocks “Klarna App content” and “Tab for Klarna App” should be added. To use the app functionality, convince to activate the app in Theme settings -> Apps and Language -> Klarna App. How to configure the Klarna app, you can read here.
This block can be used to place the content in the product information section.
Tab for Klarna app
Use this block to display content from the app in the tab.
In each block, one can apply settings for any class to the “Class name” field.
Tab for Custom content
IMPORTANT! Tabs that you can customize in the Shella Editor work for all Product pages. If you want to add a unique Tab for each product, you can achieve it via Metafields. How to add and edit custom tabs you can read here.
If you want to add an additional tab for the product, you need to add a content block “Tab for custom content”. Here you can write the Title of the tab and add content in the “HTML” field. If you want to have a page as content in the tab, select a page in the “Page content”, that should be displayed in the tab. How to add and edit a page you can read here.
In our example, we selected a default page 'Include Product Tab Custom HTML' and this is what we have got:
Tab for Custom Liquid
This block can be added multiple times.
In the “Title” field, one can specify a tab's heading.
Use the “Custom Liquid” field to render dynamic content. More about Liquid, you can read here.
Sidebar on the product page
To display the sidebar on product pages, activate it in the Product page section using one of the given options of the content position.
There are 2 blocks that can be added and edited to set up the sidebar: “Sidebar custom HTML” and “Sidebar products” blocks:
Sidebar custom HTML
This block enables you to add a page as content in the product sidebar. Here you can select a page that you want to be displayed in the sidebar, e.g.: “About our store”:
How to add and edit page content, you can read here.
Sidebar products
In this block, you can add a Title to the block that will be shown in the sidebar. In the “Collection”, you can select a collection that should be shown in the product’s page sidebar, e.g.: “Featured products”. How to add and edit a collection you can find here.
On the “Max count” scale from 0 to 10 products you can decide how many products should be displayed in the sidebar. In the “Products type”, you can choose the size of the products that will be displayed in the sidebar. It may be either full or short. How to add and edit products you can find here.
Here is an example of the sidebar where we have added “Sidebar products” and “Sidebar custom HTML” blocks. The “Sidebar custom HTML” block displays the content of the “About our store” page:
Last updated
