Sampo
documentation

Featured product

General

The Featured Product section allows you to highlight specific products. Like other theme sections, it includes various customizable settings to match your store’s design preferences. In this section, you can:

  • Choose the product to showcase
  • Select a suitable color scheme 
  • Select the product image aspect ratio
  • Choose media fit: Fill or Original
  • Set a background color for the media, if needed
  • Define a border radius for the media
  • Enable collapsible rows to open as drawers
  • Adjust padding for desktop
  • Select the media layout for desktop
  • Select the media column width for desktop
  • Enable peeking media items for mobile
  • Enable showing thumbnails for mobile
  • Select media zoom for desktop and mobile (or disable zoom)
  • Define the gap between product media items for desktop and mobile

 

Customize with blocks

The Featured Product section includes various product-related blocks with customizable settings, allowing you to tailor the section to fit your store:

  • Heading: Displays the product title as a heading

  • Price: Displays the product price

  • Variant Picker: Enables variant selection

  • Buy Buttons: Adds buttons for purchasing the product

  • Product Description: Showcases the product’s description

  • Inventory Status: Displays stock availability

  • Vendor: Shows the product vendor

  • Text: Add custom text to the section with this block

  • Quantity Selector: Allows customers to choose the quantity

  • 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

  • Star Rating: Displays the product’s star rating

  • SKU: Displays the product’s SKU

  • Tab: Add a tab to offer additional information about the product

  • Custom Liquid: Add custom liquid code for additional customization

    Collapsible item

    • 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.

    Sibling products

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

    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

    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 Spacing

    By using the custom spacing block you can easily adjust the top padding, top margin and bottom padding of any section to suit your design needs.

    Note: Values set in the custom spacing block will override those defined in the general theme settings, applying locally only to this specific section.

    Steps

    1. Open the theme editor and select the section you want to edit.
    2. Click the section name to open its settings, then find and click "Add block."
    3. Select "Custom Spacing" and define padding top, margin top and padding bottom values for the section.
    4. The values you set will override the general settings in the theme.