Sampo
documentation

Hero Promo

General 

In most sections of the theme, you can customize various settings to match your design needs. In the Hero Promo section, you can:

  • Select a color scheme that fits your store's branding.
  • Add an optional banner link (used if no buttons are present).
  • Adjust section height for both desktop and mobile views.
  • Choose the position of the content.
  • Adjust text alignment for both desktop and mobile views.
  • Edit text content width and enable full-width layout that spans the entire screen.

These options provide the flexibility to create a cohesive and visually appealing layout that aligns with your store’s style.

Creating Content for the Hero Promo

Use the following blocks to design and customize your Hero Promo:

Image or Video

  • Select the type of media to display (image or video).
  • Adjust overlay opacity to suit your design.
  • Add default media for desktop and mobile, including separate images or videos for mobile devices.

Heading

  • Add the main heading for the banner.
  • Choose the HTML tag (affects the heading base size).
  • Customize the size for desktop and mobile views.
  • Adjust margins for optimal spacing.

Subheading

  • Include a subheading if needed.
  • Choose the HTML tag (affects the heading base size).
  • Set the size for desktop and mobile views.
  • Adjust margins as required.

Text

  • Add additional text content to the banner.
  • Adjust size and margins for both desktop and mobile views.

Button

  • Add up to three buttons to your banner.
  • Define each button's label, link, and style.
  • Customize size and margins for desktop and mobile views.

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.