Blocks
Use the content blocks to display the required information in the product information section, sidebar, and custom tabs sections.
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:
Countdown
The Countdown block lets merchants display a countdown timer inside the Product information section of the product page. It’s ideal for highlighting limited-time offers, sales, or stock countdowns, creating a sense of urgency that can boost conversions. You can customize the timer’s heading style, colors, icons, and background to match your theme design.
Option
Description
Heading size
Controls the size of the block title text (e.g., “Limited Offer Ends In”). You can choose between predefined typography scales, such as Extra Large, Large, Medium, Small, or Extra Small, depending on how prominently you want the heading to appear. Larger sizes are ideal for attention-grabbing promotional messages, while smaller ones integrate seamlessly with other product information.
Heading
Sets the main title displayed above the countdown timer. This text can describe the purpose of the timer (e.g., “Offer Ends In”, “Time Remaining”, or “Hurry, Sale Ends Soon”). You can leave this field blank if you prefer to show only the timer itself without a title.
Colors → Base
Defines the primary color scheme used for the countdown text and icons. The Base color typically follows the theme’s main content color settings. It ensures that the countdown blends with the rest of your product page typography. You can customize it to either match or contrast with your background for better visibility.
Colors → Lines
Sets the color for borders or dividers around the countdown area. If your countdown style includes framed boxes or separation lines between digits (for example, hours/minutes/seconds boxes), this color defines their appearance. Use a subtle tone for minimalist designs or a high-contrast color for a more defined layout.
Countdown → Icon
Allows you to display a visual icon beside or above the countdown timer (such as a clock, hourglass, or flame symbol). The icon visually reinforces the idea of time sensitivity. You can control its color and visibility to match the block’s tone — for example, accent color for promotions or neutral for standard timers.
Countdown → Counter text
Refers to the numeric countdown display (e.g., “02 : 14 : 55”). You can customize its typography color and ensure readability against the background. The counter dynamically updates in real time to show the remaining time until your specified date or event. This option manages only the visual color styling, not the actual timer logic.
Countdown → Counter box
Defines the visual container for each time unit (Days, Hours, Minutes, Seconds). Depending on the theme design, each value can appear inside a box or frame. This setting controls the box border or fill color, allowing you to emphasize each number segment individually. You can create a clear block layout or a transparent minimalist display by adjusting these colors.
Countdown → Background
Sets the background color or gradient for the entire countdown area. This affects the space surrounding the timer and heading. You can use a solid color, gradient, or transparent background to blend with the product page. Darker backgrounds with light text often work best for strong emphasis banners, while lighter tones suit subtle in-content countdowns.
Information
The Information block displays additional product details such as SKU, barcode, vendor, and product type. It helps customers find key product identifiers and store-related information directly on the product page. These fields are pulled automatically from your Shopify product data, so you don’t need to enter them manually for each product.
Option
Description
Show SKU
Displays the product’s Stock Keeping Unit (SKU) on the product page. The SKU is a unique internal identifier for inventory management. It helps store owners and staff track items, especially when products come in multiple variations (e.g., sizes or colors). Shopify logic: The SKU value is taken automatically from the “SKU” field in your Shopify product editor. If no SKU is assigned, nothing appears on the storefront.
Show barcode
Shows the barcode (UPC, EAN, or ISBN) assigned to the product. Useful when selling physical items that use scannable codes for retail or logistics. Shopify logic: The barcode is taken from the “Barcode (ISBN, UPC, GTIN, etc.)” field of the product in Shopify admin. If left blank, the barcode label will not appear. Tip: You can use this for back-office inventory scanning or display it for wholesale buyers who require official product codes.
Show vendor
Displays the Vendor (brand or manufacturer name) associated with the product. This helps customers recognize the product’s brand and can increase trust or highlight partnerships. Shopify logic: The vendor name is pulled from the Vendor field defined in each product’s settings. You can make the vendor name clickable (linking to a vendor collection page) if your theme supports it.
Show type
Displays the Product type, such as “T-Shirt”, “Sneakers”, or “Accessories”. This helps organize your catalog visually and informs customers of the product category. Shopify logic: Product type is defined under the “Product organization” section in Shopify admin. It can be either the Custom product type (created by you) or the Standardized product type (used for Google channels and Shopify taxonomy).
Title
To display a product title, use this block. You can change the Heading size options here.
Price
The Price block displays product pricing on the product page and supports multiple visual and functional options. It automatically updates based on the selected product variant and can show sale badges, tax and shipping messages, and customizable text sizes to match your store’s branding and compliance requirements.
Option
Description
Show badge “Sale”
Displays a Sale badge or label next to the product price when the product’s compare-at price is higher than the actual selling price. Purpose: Helps draw attention to discounted products and improves conversion. Behavior: Automatically appears only when a sale condition exists (compare-at price > price).Text or style can often be customized in the theme settings or via translation files.Common display format: “Sale,” “On Sale,” or a percent discount (e.g., “-20%”).
Show tax
Displays an informational line beneath the price, such as “Tax included” or “Excluding tax,” depending on your store’s tax settings in Shopify Admin (Settings → Taxes and duties). Purpose: Ensures compliance with regional laws and provides transparency for customers. Behavior: Text automatically updates based on your store’s tax display configuration.Can be styled in smaller or secondary text to avoid cluttering the main price line.
Show shipping
Adds an additional line or link below the price area that informs customers about shipping costs or policies. Purpose: Helps customers understand total cost expectations before checkout. Behavior: Typically displays as “Shipping calculated at checkout” or a custom message.Can include a link to your Shipping Policy page (Shopify → Settings → Policies → Shipping).May automatically update if your theme includes dynamic shipping calculators or localized text.
Price size
Adjusts the visual size and emphasis of the product price text. Purpose: Allows the price to visually match your product page layout hierarchy. Options: Small – Compact size, ideal when price is displayed alongside other compact product details.Medium – Default size for general use.Large – Emphasized price, useful for promotional or spotlight products.Extra Large – Makes the price the primary visual focus, suitable for minimal product templates. Behavior: Only affects typography styling; it does not impact price logic or layout structure.
Fake people counter
The Fake People Counter block displays a dynamic message such as “💬 28 people are viewing this product right now”, creating a sense of urgency and popularity for the item.
It’s part of the Product Information section template and can be enabled on individual product pages. The counter number changes automatically within a specified range and time interval to simulate real-time activity.
Option
Description
Minimal
Defines the lowest number of viewers that can appear in the counter. For example, if you set Minimal = 12, the counter will never show fewer than 12 people viewing the product. This helps keep the display realistic without showing “0 viewers”. 🟢 Usage tip: Choose a number that fits your store size — for small stores, values between 5–15 feel natural; for busy stores, 20–40 may feel more authentic.
Maximum
Defines the highest number of viewers that can appear in the counter. The counter will display a random number between the Minimal and Maximum values (e.g., between 12 and 36). This variation keeps the message looking organic and active. 🟢 Example: If Minimal = 12 and Maximum = 36, the block may show “18 people are viewing this product” and later change to “25 people are viewing this product.”
Delay
Controls how frequently (in seconds) the displayed number updates. After each delay interval, the counter randomly changes the number between the Minimal and Maximum range. 🕒 Example: Setting Delay = 10 means the counter number refreshes every 10 seconds. Use longer delays (e.g., 20–30 seconds) for smoother, subtler animation; shorter delays make it appear more dynamic and “live.”
Inventory status
The Inventory Status block displays real-time stock information for the current product or selected variant. It helps customers see product availability and encourages quicker purchases when stock levels are low (for example: “Only 3 left in stock!” or “In stock and ready to ship”).
This block automatically retrieves data from Shopify’s built-in inventory tracking system.
You can change the option Hurry buy left here.
Free shipping
The Free Shipping block displays an informative message about your store’s free shipping threshold directly on the product page. This block helps encourage higher order values by showing how close the customer is to qualifying for free shipping .
This feature works dynamically based on the cart subtotal and the settings you define in your theme editor.
Fake cart counter
The Fake Cart Counter block simulates real-time product demand by displaying a dynamic message such as “🔥 5 people have this item in their carts right now.” This block helps to create urgency and encourage quick purchasing decisions, a common conversion optimization technique on eCommerce product pages.
Option
Description
Minimal
Defines the lowest number of active carts to be displayed. Purpose: Sets the lower limit of the random number range used by the counter. For example, if set to “3,” the counter will never display fewer than 3 people currently having the item in their carts. Usage Tip: Use a small but believable value (e.g., 2–5) for low-stock or niche products to maintain authenticity.
Maximum
Defines the highest number of active carts that can appear. Purpose: Sets the upper limit for the random number range. The fake cart number will be automatically randomized between the Minimal and Maximum values to mimic fluctuating user interest. Example: If Minimal = 3 and Maximum = 12, the displayed count will vary within this range on each refresh cycle. Usage Tip: Adjust this range according to product popularity — use higher values (10–25) for trending or best-selling items.
Delay
Controls the update interval (in seconds) for refreshing the displayed counter. Purpose: Simulates real-time activity by updating the cart number periodically, making it look like multiple users are interacting with the product. Example: Setting Delay = 10 means the counter will refresh every 10 seconds, potentially changing its number within the configured range. Usage Tip: Choose a moderate refresh rate (8–15 seconds) to avoid unrealistic fast changes while keeping the interaction lively.
Pop-up
The Pop-up block allows you to add a clickable text link (often labeled as Size guide, Shipping details, or Return policy) within the product information area. When a customer clicks the link, a pop-up window opens displaying additional content — either written directly in the settings or pulled automatically from a Shopify page.
This block is often used to display helpful product-related details without cluttering the main product page layout.
Option
Description
Icon
Lets you add or select an icon that appears next to the pop-up link text. Icons visually indicate the purpose of the link — for example, a ruler for a Size guide, a box for Delivery info, or a document for Product details. Icons help users recognize interactive elements quickly. You can select icons from the theme’s built-in icon library or choose “None” to hide it.
Link label
The clickable text that opens the pop-up. For example: “Size guide”, “Shipping info”, or “Fabric details”. This label appears next to the icon and can be customized for your store’s tone and language. Short, clear labels are recommended to improve readability on product pages.
Content heading
Defines the heading text displayed inside the pop-up window once it opens. It acts as the pop-up’s title — for example, “Size Guide” or “Material & Fit Information”. This helps organize the content and ensures accessibility for screen readers.
Content
A rich text field where you can write or format the content shown inside the pop-up. You can include text, lists, or even simple HTML (if supported by your theme). This is ideal for short, product-specific information such as measurement charts, washing instructions, or delivery terms. If Content from page is used, this field can stay empty or serve as fallback content.
Content from page
Allows you to select an existing Shopify page (created under Online Store → Pages) to load its content inside the pop-up. This option is useful if the same pop-up content (like a “Size Guide” or “Returns Policy”) is reused across multiple products — any edits made to the source page automatically apply to all pop-ups referencing it. When a page is selected here, it replaces the manually entered text in the Content field.
Variant picker
Product Information: Variant Picker Block
The Variant Picker block allows customers to select product variants (such as size, color, or material) directly from the product page. It is useful when your product has multiple options that you want to display clearly — for example, showing color swatches, size pills, or dropdown lists. You can add up to six Variant Picker blocks, each connected to a separate product option (e.g., “Color”, “Size”, “Material”).
Option
Description
Type
Defines how the variant options are displayed for the customer. • Dropdown – Displays all variant options in a collapsible dropdown menu. Recommended when you have many options or want a compact layout. • Pills – Shows selectable buttons (“pills”) for each option value. Best for visual clarity and direct interaction, such as “S”, “M”, “L” or color swatches.
Heading size
Adjusts the font size and prominence of the option label (e.g., “Size” or “Color”). • Medium – Standard heading size, consistent with most product page typography. • Small – Slightly smaller label for compact layouts or minimal design.
Buttons in row
Sets how many pills (button-type options) appear in one horizontal row before wrapping to the next line. Options: Auto, 2–12. • Auto – Automatically adjusts based on available space and device width. • 2–12 – Fixes the number of buttons per row for a consistent grid alignment. Useful for evenly spaced layouts or when you want symmetrical appearance across variants.
Colors in row
Defines how many color swatches appear in one row before wrapping. Options: Auto, 8–24. • Auto – Automatically determines the layout based on theme width. • 8–24 – Sets a specific number of color swatches per line for visual control, especially useful when you have multiple color variants.
Images in row
Controls how many variant images (e.g., thumbnails of different materials or prints) appear per row. Options: Auto, 4–12. • Auto – Adjusts automatically to fit the container width. • 4–12 – Fixes the number of image thumbnails per row, ensuring consistent alignment across different screen sizes.
Info popup next to option name
Adds a small information icon next to the variant option label. When clicked, it opens a popup with extra content related to that option. This is helpful for explaining sizing charts, materials, or detailed descriptions of an option.
Type option name to link content
Allows linking specific popup content to a variant option by typing its name (e.g., linking “Size” to a size guide or “Material” to a care instruction popup). You can link to: • Text – Custom text entered manually. • Dynamic source – Pulls content automatically from product metafields or dynamic data. • Page – Displays content from an existing Shopify page (like a “Size Guide” page).
Option name
Specifies the exact product option this block controls (e.g., “Color”, “Size”, “Material”). The name must match the option defined in your product’s variant settings in Shopify admin.
Content heading
Adds a heading for the info popup, displayed at the top of the popup window (e.g., “Size Guide”, “Material Details”).
Popup content
The body text or content displayed inside the popup. Use this for short explanations, feature lists, or instructions. Accepts basic HTML for styling (paragraphs, links, lists).
Popup content from page
Instead of writing text manually, you can select an existing Shopify page to display its content in the popup. Useful for reusing centralized content such as “Care Instructions” or “Shipping Info”.
Multiple Variant Picker blocks (up to 6)
You can add up to six Variant Picker blocks within the product information section. Each block can represent a different product option (for example, one for “Color”, one for “Size”, one for “Material”, etc.). Each of these blocks supports the same configuration options listed above, allowing consistent styling and behavior across all variant types.
In the following example, you can view how this block might be displayed on a page:
Buy buttons
The Buy buttons block adds essential purchase interaction elements to your product page — including the Add to cart button, dynamic checkout buttons, Wishlist/Compare actions, and a quantity input field. These controls let customers quickly select how many items to purchase, add them to their cart, or check out directly, improving conversion and streamlining the buying process.
Option
Description
Enable quantity
Displays a quantity selector next to the “Add to cart” button. This allows customers to choose how many items to add to their cart before purchase. When enabled, the field usually appears as a stepper (– / +) or numeric input box, depending on the theme style. Disabling this option hides the quantity field, automatically setting the quantity to 1 when customers click “Add to cart.” Recommended use: Enable when products are commonly purchased in multiples (e.g., packs, accessories, consumables).
Button “Add to cart”
Controls the visibility and behavior of the main Add to cart button. This button adds the selected product and quantity to the customer’s shopping cart and opens either the mini-cart or cart page (depending on your theme settings). Theme logic: • The button automatically updates its label to reflect inventory states (e.g., “Sold out” or “Unavailable”). • Works in sync with variant selectors — if a variant is unavailable, the button becomes disabled. • Can be styled using the theme’s Buttons settings for color, typography, and shape.
Show sticky “Add to cart”
Enables a sticky add-to-cart bar that remains visible as the customer scrolls through the product page. This ensures the primary purchase action is always accessible, especially on long product descriptions or mobile screens. Behavior: • The sticky bar typically includes key product information (title, price, selected variant) and an Add to Cart button. • On mobile, it may appear as a floating button or a fixed bar at the bottom of the viewport. Use case: Improves conversion rates by minimizing friction — customers don’t have to scroll back up to buy.
Show dynamic checkout buttons
Displays Shopify dynamic checkout buttons beneath the main Add to Cart button. These allow customers to buy instantly using accelerated checkout methods such as Shop Pay, Apple Pay, Google Pay, or PayPal (depending on availability and the shopper’s browser). Theme logic: • When enabled, a secondary button appears that dynamically adapts to the customer’s preferred payment method. • Dynamic checkout buttons bypass the cart and take the customer directly to checkout, streamlining the process for single-item purchases. • This feature must be supported and enabled in your Shopify admin → Settings → Payments. Tip: Keep both the standard and dynamic checkout buttons visible for flexibility — this ensures customers can choose between a fast purchase or adding multiple items first.
Show recipient information form for gift cards
Enables a key customer-facing feature: allowing the purchaser to specify who the gift card is for and when it should be sent.
Show wishlist/Show compare
The Show wishlist/Show compare options in your Shopify product page's Buy buttons block are theme settings that control the visibility of customer-engagement features.
Show Wishlist: Displays a button (often a heart icon) near the "Add to Cart" button. When a customer clicks it, the product is saved to a personal list they can access later. This feature usually requires a third-party app or is a built-in function of your theme.
Show Compare: Displays a button that allows a customer to add the product to a temporary comparison list. They can then view the details and specifications of multiple selected products side-by-side to help them decide on a purchase.
Guaranteed Safe Checkout
This block is primarily designed to build customer trust by displaying secure payment method icons and a clear security message.
Heading size
Text/Design
Controls the font size of the main heading (e.g., Small, Medium, Large).
Heading
Text/Content
The text that appears above the payment methods, typically "Guaranteed Safe Checkout" or "Secure Payments."
Show heading
Visibility
Toggles the visibility of the main heading text (set in the "Heading" option).
Change hint type
Mobile Layout
Crucial for mobile experience. When this option is not checked, the heading text will be used as the title for an accordion tab, effectively hiding the payment icons until the customer taps to expand the section. If checked, the payment icons are likely shown directly, not in an accordion.
Number of columns
Layout
Sets how the payment method icons (the separate elements) are displayed in a grid (e.g., 4 columns, 5 columns).
Image ratio
Image Design
Controls the shape of the payment method icons (e.g., Square, Landscape, Portrait).
Roundness of the image
Image Design
Applies a border radius to the payment method icons (e.g., sharp corners, slightly rounded, fully circular).
Custom roundness
Image Design
Allows for a specific, custom border radius value (e.g., 10px) if the standard "Roundness" settings are insufficient.
Image (per element)
Content
Upload the specific payment method icon (e.g., Visa, MasterCard, PayPal) for that element.
Tooltip (per element)
Content
The text that appears when a customer hovers over or taps the payment icon (e.g., "We accept Visa").
Link (per element)
Functionality
An optional URL to link the payment icon to. This could be a secure payment information page or a certification logo.
Heading (Color)
Color
Sets the color of the main block heading text.
Tooltip background
Color
Sets the background color of the small box that appears when a customer hovers over an icon.
Tooltip text
Color
Sets the color of the text displayed inside the tooltip box.
Message
The Message block allows you to place a visible button or icon that, when clicked, instantly opens a pop-up contact form. This ensures customers can quickly send you a message or request without navigating away from the product page.
Available Options
Show icon
Toggles the visibility of the icon (e.g., an envelope or chat bubble) that accompanies the button text.
Text
Allows you to change the call-to-action text displayed on the button (e.g., "Contact Us," "Ask a Question," or "Send a Message").
Share
The Share block is designed to promote your products through your customers' personal social circles. It places a button or icon on your product page that, when clicked, reveals a list of social networks (like Facebook, Twitter, and Pinterest) where the product's link can be instantly shared.
Show icon
Toggles the visibility of the share icon (e.g., a small arrow or social media symbol) that appears next to the button text.
Text
Allows you to customize the call-to-action text displayed on the button (e.g., "Share," "Tell a Friend," or "Spread the Word").
Horizontal tabs
The Horizontal Tabs block is a powerful tool for organizing a lot of information neatly on your product page. It lets you present details like product specifications, shipping policies, or return guides under distinct, clickable tabs, preventing your page from becoming long and overwhelming.
Tab Content Settings (for each individual tab)
You can typically add several tabs to the block. Each tab has the following settings to control its appearance and content:
Tab heading
The title displayed on the tab itself (e.g., "Sizing Guide," "Materials," or "Shipping & Returns"). This is what the customer clicks.
Icon
Allows you to select a small visual icon to display alongside the Tab heading. Using icons can make navigation easier and more appealing.
Content
A rich text field where you can directly enter the tab's content (text, images, embedded videos, etc.). This content will be shown when the customer clicks the tab.
Content from page
A feature that lets you link the tab to an existing Shopify Page (e.g., a "FAQ" page). When selected, the content of that linked page will automatically populate the tab, saving you the work of duplicating content.
Description
To reveal the product description from your admin, add the current block.
You're able to change the options here: Heading, Icon, Heading size, Type, Open tab in customize theme (This option works only in the admin panel for better content editing).
In the following example, you can view how this block might be displayed on a page:
Collapsible row
You're able to change the options here: Heading, Icon, Content, Content from page, Heading size, Type, Open tab in customize theme (This option works only in the admin panel for better content editing).
In the following example, you can view how this block might be displayed on a page:
Blurb
In the following example, you can view how this block might be displayed on a page:
The Blurb block is a theme-specific, flexible block used to display concise, attention-grabbing marketing text or key product benefits on the product page, often placed near the "Add to Cart" button.
A "blurb" is essentially a short, promotional description. Its purpose is to highlight crucial selling points, build trust, or provide quick, vital information that a customer might miss in the longer product description.
Since this is a theme-specific block (not a standard Shopify block), the exact options can vary widely between themes. However, it generally features settings to control the text, icons, and design elements.
Text
Add the block to put simple text strings or paragraphs. This block can be used to show a text list with icons.
Use paragraphs from #1 - #5 to place any text content with or without icons.
Icon
If you need to use the custom icon built into the theme, add the icon name to the field. Or leave the field empty to deactivate the icon.
Content
Type the title or a short paragraph in the input field. The top input field options can also be helpful if you need to style text.
In the following example, you can view how this block might be displayed on a page:
Complementary products
This block displays the recommended products under the collapsible tabs in the product description section. Ensure you are familiar with the product recommendation requirements before configuring this feature.
Add the block to display the complementary products in the product information section. Here you can apply the general settings to the block.
The product block provides the options: Heading size, Heading - Include a heading that explains the content., Icon, Products, Slider settings: Enable slider, Mobile navigation, Enable autoplay, Products: Image hover effect, Image ratio, Align text relative to image, Show second image on hover, Show vendor, Show price, Enable review stars, Truncate product name, Underline on hover, Show badge "Sale", Show badge "Sold Out", Show badge "Feature"
Custom liquid
Add app snippets or other Liquid code to create advanced customization.
Review stars
Displays reviews from product. An app is required for product ratings. Learn more
By default, the theme does not have product ratings. Rating stars will start working with the installed rating app.
If the app is installed, you need to enable review stars in the theme settings under the Product review stars tab.
Last updated