Skip to main content

Featured products

With the Featured Products section (found under the preset 'Featured products'), you can display specific items from your assortment in a dynamic, swipeable carousel. This is the ideal way to present bestsellers or new collections on your homepage without making the page too long.

Note: The visual layout of the individual product cards (such as prices, buttons, and badges) is adjusted in the general theme settings under 'Product Cards'.

General Layout & Background

  • Color scheme: Choose a fitting color scheme for the background and text color of the entire section.
  • Section display (Type): Determine whether the background spans the full width (Full width / Edge-to-edge) or is centered within a frame (Box / Container).
  • Background image: You can give the slider extra atmosphere by setting a background image, with the option for a separate photo for mobile.
  • Height & Background height: Choose whether the section automatically grows with the products (Auto) or work with a fixed height (Fixed). With a fixed height, you can use a slider to determine how far the background color extends, which is useful for creative overlapping effects.

Spacing (Whitespace)

Manage the margin (outer space) and padding (inner space) at the top and bottom to seamlessly integrate the slider with the rest of your page.

Selecting Products

  • Product list: Manually select the products you want to show in the slider here. You can add up to 20 products and determine the order by dragging them in the list.

Slider Settings

  • Number of products in view (Slides per view): Determine how many products are visible at the same time:
    • Desktop: Choose from 3 to 6 products.
    • Tablet & Mobile: Choose full or 'half' views here (such as 1.5 or 2.5). A half view shows a portion of the next product, which is a strong visual cue for the visitor to swipe.
  • Navigation & Display:
    • Pagination: Enable or disable the clickable dots below the slider.
    • Playful staggering (Alternate offset): Check this to place the product cards alternately slightly higher or lower for a dynamic effect.
    • Carousel overflow: Determine whether the slider stops strictly within the frame or visually extends to the edge of the screen.

Text & Buttons

Introduce your products with strong text and optional call-to-actions:

  • Alignment: Align the title and introductory text to the left, center, or right.
  • Title Formatting: Add a heading and adjust the SEO HTML tag, the visual size, and the font weight.
  • Content (Rich text): Use this field for a short description of the collection or promotion.
  • Action buttons (Buttons): Add up to two buttons below the text (e.g., "Shop All").
    • Fill in the label and the link.
    • Check Secondary button style for a transparent 'outline' look.
    • Optionally add an icon (such as a right arrow).