Sampo
documentation

Promo Grid & Slideshow

General

In most sections of the theme, you can customize various settings to match your design needs. Customize the Promo Grid & Slideshow section with the following settings:

  • Select a color scheme to align with your branding.
  • Choose the aspect ratio for banners.
  • Choose display type Grid or Slideshow for desktop and mobile.
  • Adjust the number of columns for desktop, tablet, and mobile views.
  • Enable full-width layout for desktop and edge-to-edge for mobile.
  • Set the gap between items for desktop and mobile views.
  • Enable rounded corners for banners, tailored separately for desktop and mobile.

If using the Slideshow display type, you can:

  • Enable autoplay to cycle through banners automatically.
  • Set the autoplay interval to control timing between slides.
  • Define sliding behavior:
    • One by One: Each slide advances individually.
    • All Visible: All displayed slides move together in one motion.
    These options provide flexibility to create a cohesive and visually appealing layout tailored to your store's style.

    Banner Blocks for Customization

    Each banner in the grid or slideshow is configured using blocks. The available block types offer diverse content and design options:

    Banner / Image

    • Choose a color scheme for the banner.
    • Adjust the overlay opacity for text clarity over the image.
    • Add an image and set a link for the banner.
    • Include a heading and define its style (can also function as a button).
    • Adjust heading position and banner padding for proper alignment.

    Banner / Text

    • Add a image if needed.
    • Add a heading, subheading, and text content.
    • Include a button with a label, link, and style.
    • Customize the color scheme and adjust padding.
    • Choose text alignment and text position for optimal layout.

    Banner / Video

    • Add a video and assign a link for the full banner area.
    • Include a heading and select a style (can function as a button).
    • Adjust the heading position and banner padding.
    • Choose a suitable color scheme for the video banner.
    • Set overlay opacity for better visibility.

      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.