Sampo
documentation

Featured look

General

With this section you can inspire your customers by adding an image to which you can add several products as hotspots.
You can customize the section to match your design needs:
  • Select a suitable color scheme.
  • Select a Hotspot color scheme.
  • Add the image to show.
  • Adjust overlay opacity.
  • Select media position for desktop.

How to create product hotspots

By adding Product blocks you can create the hotspots to the image. 
  • Select the product to be showcased for each block.
  • Define the hotspot position in the block settings by adjusting vertical and horizontal position.

Section Heading

Add a section heading to give users general information about the section's content. By 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 the 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.