Sampo
documentation

Blocks

Customize your product page with a variety of versatile blocks. Most blocks allow you to adjust the top margin for desktop and mobile views and specify the column in which the block will appear on the product page.

Navigate to specific blocks below for detailed instructions:

Note: 

  • Many blocks include the following customization options:
    • Margin top: Adjust the spacing between the block and the element above.
    • Block column: Choose whether the block appears in the Left or Right column.
    • Size modifier: Select the size of the block content for desktop and mobile.
  • Hotspots and Level Sliders are available on the Default, Big Image product template.

Section Background

Use the Section Background block to add a visual layer beneath other section elements, enhancing the product page with stylish effects.

By default, this block applies the Background Gradient and Graphics settings from Theme settings → Aesthetics.

  • Background Gradient: Override the default gradient with a custom selection.
  • Graphics: Choose a graphic style to complement your design.
  • Effects: 
    • Add vignette for a subtle darkened border effect.
    • Add grain for a textured look.
  • Graphic settings:
    • Flip horizontally or vertically.
    • Apply two-tone graphics for a layered effect.
  • Adjust height for desktop and mobile views.

Custom Spacing

  • Use this block to override default spacing settings (from the theme settings).
  • You can adjust margin top and top & bottom padding for desktop and mobile views.

Vendor

Display vendor name.

  • Enable vendor link: the vendor name will be a link to the vendor's collection.

Heading

Displays the product title as a heading.

Price

Displays the product price

  • Select font weight: Normal or Bold text.
  • Select size for desktop and mobile view.

Star Rating

Displays the product’s star rating.

Property bars

Use the Property bars to visually represent a product’s features, such as scent intensity for cosmetics or other measurable attributes. To make the slider dynamic for each product, use metaobjects and metafields as data sources.

Select how the bars appear visually

  • Display type: Choose between Solid or 5 Steps.

Bar definitions

  • Use the format: "Start label|End label|Value"
  • Start and end labels define the range (e.g., Unscented – Strong Scent) and the number between 0-100 sets the value.
  • Example: Uncented|Strong Scent|80

Variant Picker

Enable options for customers to choose product variants.

  • Select picker style: Dropdown or Buttons.
  • Swatches select: 
    • Show swatch only.
    • Show swatch and label.
    • Show label only.
  • Enable cross out for unavailable variants: this works when the picker style is "Buttons".

Read more about swatches in Shopify Help Center.

Quantity Selector

Allows customers to choose the quantity.

  • Select whether to show quantity selector as a own block element or next to "Add to cart" button.

Inventory Status

Displays stock availability.

  • Adjust the low inventory threshold.
  • Select whether to show
    • available quantity in the inventory status.
    • inventory transfer notice.
  • Provide additional info related to any inventory status with Additional descriptions.

Buy Buttons

  • Adds buttons for purchasing the product.

Product Description

  • Showcases the product’s description.

Collapsible Row

  • Use this block to add additional product information in a dropdown format.
  • Note: Collapsible items can be set to open as drawers via the section-level settings.

 Size guide

  • Adds a button to open a size guide popup.
  • You can include an image and content (text or a page) in the popup.

  • The size guide can be linked to a product option name, so it only appears. when the option name matches a specified trigger value.

Hotspots

You can add hotspots to give additional and engaging product information on the product image. Clicking the hotspot will open a pop up where the customer can read more about the hotspot topic.

 
For the hotspot content, you can select a metaobject reference or fill the content manually. We recommend using the metaobject to enable different content for different products which use the same product template.

Customization:

  • Hotspot Label: Label to be displayed over the product image.
  • Label position: Left or Right.
  • Adjust horizontal and vertical position.
  • Popup content: Shown in the popup opened from the hotspot
    • Add text, image and video (image takes precedence)
  • Advanced: Custom positioning which overrides the horizontal and vertical positioning values.

Steps to add Dynamic Hotspots using metaobjects

Here are the steps in brief, if you need more detailed instructions, check the Step-by-step guide Dynamic Hotspots with Metaobjects.

  1. Add a Product Hotspot Metaobject which have the fields: Title, Hotspot Label, Popup text content, Image, Video.
  2. Add entries to the Product Hotspot Metaobject about different aspects of the products which you would like to highlight .
  3. Define the Hotspot metafield for Products to link the Hotspot entries.
  4. Select entries to Hotspot metafield for each product.
  5. In the Theme editor, connect the Hotspot to Product template.
  6. For Advanced and dynamic positioning define the Hotspot position metafield for products and add position definitions for each product via this metafield.
  7. In the Theme editor, connect the dynamic source in the Hotspot-block > Advanced > Hotspots position array.

Text

Add custom text to the section with this block.

Badges

Highlight specific product attributes with badges.

Similar Collections 

Show links to related collections.

Pickup Availability 

Shows if the product is available for in-store pickup.

SKU 

Displays the product’s SKU.

Tab 

Add a tab to offer additional information about the product.

Sibling products

  • Shows a variant picker like selector for other products.
  • Works best when different color or size variants are used as separate products.

Image Grid

  • This block is ideal for displaying certifications, stamps, shipping provider logos, payment provider logos, or similar items.
  • Supports up to 8 images.

Upsell and Complementary Products 

  • Display additional products that customers can add to their cart along with the main product or separately.
  • To select complementary products, install the Search & Discovery app.

Custom Liquid 

Add custom liquid code for additional customization.