Sampo
documentation

Collection switcher

General

The Collection Switcher section allows you to showcase products from different collections in a dynamic and customizable way.

Like most theme sections, this one offers various settings to align with your design preferences. In the Collection Switcher section, you can:

  • Select a suitable color scheme.
  • Set the maximum number of products to display.
  • Enable the View All link (available when using the collection tab layout).

    Display Settings

    • Thumbnail layout: Enable or disable a thumbnail layout for products (available on desktop and mobile).
    • Display type: Choose between Grid or Slideshow (on desktop) and Grid, Slideshow, or Slideshow (Peeking Items) (on mobile).
    • Products per row: Define the number of products per row (available for desktop, tablet and mobile).

    Slideshow settings

    If you select Slideshow as the display type, you can:

    • Enable autoplay.
    • Set the autoplay interval.
    • Choose the sliding behavior:
      • One by One: Slides one product at a time.
      • All Visible: Slides all visible products at once.

    Tab title settings

    In the Tab title settings you can customize the collection and product tab titles: 

    • Select a tab title style: Heading or Subheading.
    • Choose the HTML tag for the heading (affects the base size).
    • Set text alignment: Left, Center or Right.
    • Select title size for desktop and mobile views.

    Adding content with blocks

    Collection Tab

    • Select a collection to display and add a title for the tab

    Products Tab

    • Choose products to display (by manual list) and add a title for the tab

    Section Heading

    You can add a section heading to provide users with general information about the section's content. Using the Section Heading block, you can:
    • Define the heading and subheading.
    • Add text, including links and lists, if necessary.
    • Control text alignment and select HTML tags.
    • Customize sizes for desktop and mobile views or use default sizes.

     

    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.