Theme Sections

Editorial product feature

Editorial product feature pairs a styled editorial panel with a product slideshow from a collection you choose. Use it to spotlight bestsellers beside campaign copy, a shop button, and a warm solid or gradient background.

Storefront preview

Editorial product feature section preview on the Fragrance Shop storefront

Storefront preview

Where to find this section

Where to find this

Themes → Customize → Add section → Editorial product feature

Find it under Products in the section picker. Pick a collection and adjust the editorial panel and product slideshow from the section settings.

Editorial product feature section in the Shopify theme editor

Theme editor section list

Section content

Heading

Main title centered above the editorial panel and product slideshow. Default: Most popular products. Leave blank to hide the heading.

Usage

  • Use a short headline that introduces the product row.
  • Keep to one line for a clean centered layout.

Subheading

Supporting line under the heading. Default: Top-selling scents loved by fragrance fans worldwide. Leave blank to show the heading only.

Usage

  • Add one or two sentences that explain what the products represent.
  • Leave blank for a heading-only section.

Products

Collection

Choose which collection supplies the products shown in the slideshow.

Usage

  • Pick a collection with enough products to fill the slideshow.
  • Without a collection, placeholder product cards appear until you connect one.

Products to show

Maximum number of products pulled from the selected collection. Range: 1–25. Default: 8.

Usage

  • Match this count to how many products you want visible in the carousel.
  • Fewer products mean fewer slides and dots when pagination is on.

Product layout

Columns on desktop

How many product cards appear per row on large screens. Options: 2, 3, 4, or 5 columns. Default: 4.

Usage

  • Use 4 columns for a dense row beside the editorial panel.
  • Lower the count when product titles or images need more space.

Columns on tablet

How many product cards appear per row on tablet screens. Options: 2, 3, or 4 columns. Default: 3.

Usage

  • Use 3 columns for a balanced mid-size layout.
  • Adjust if cards feel cramped or too sparse on tablet widths.

Columns on mobile

How many product cards appear per row on phones. Options: 1 or 2 columns. Default: 2.

Usage

  • Use 2 columns for a compact mobile grid in the slideshow.
  • Switch to 1 column for larger product cards on small screens.

Slideshow controls

Show pagination dots

Shows dot indicators below the product slideshow when there is more than one slide. Default: On.

Usage

  • Turn on so shoppers can see how many slides there are and jump between them.
  • Turn off for a cleaner look when autoplay alone is enough.

Enable autoplay

Automatically advances the product slideshow after the time set in Autoplay speed. Default: On.

Usage

  • Turn on to rotate products without customer interaction.
  • Turn off so slides stay put until the customer swipes or uses dots.

Autoplay speed

Time each slide stays visible before autoplay moves to the next. Range: 2–10 s (step 2). Default: 6 s.

Usage

  • Use a slower speed when product cards have long titles or rich imagery.
  • Applies only when Enable autoplay is turned on.

Dot color

Color of the pagination dots below the slideshow. Default color: #000000.

Usage

  • Pick a color that stays visible against the section background.
  • Applies when Show pagination dots is turned on.

Editorial content

Heading

Main title inside the editorial panel beside the product slideshow. Leave blank to hide the heading.

Usage

  • Use campaign or collection copy that complements the products shown.
  • Keep it concise so it fits comfortably in the panel.

Button label

Text on the call-to-action button in the editorial panel. Default: Shop the collection. Leave blank to hide the button.

Usage

  • Use action wording that matches the button link destination.
  • Leave blank when you want the editorial panel to show heading only.

Button style

Visual style for the editorial button. Options: Primary, Secondary, Tertiary, or Arrow button. Default: Tertiary.

Usage

  • Use Tertiary for a subtle outline-style button on the warm panel.
  • Pick Arrow button when you want a trailing arrow icon on the label.
  • Button colors come from Theme settings → Colors and schemes.

Open in new tab

Opens the button link in a new browser tab when enabled. Default: Off.

Usage

  • Turn on for external URLs.
  • Keep off for in-store collection and product links.

Editorial appearance

Heading color

Color of the editorial panel heading. Default color: #121212.

Usage

  • Ensure enough contrast against the panel background.
  • Match or complement the text color for a unified panel.

Text color

Base text color for content in the editorial panel. Default color: #121212.

Usage

  • Applies to body-style text in the editorial panel area.
  • Pair with the heading color for readable campaign copy.

Background style

Fill style behind the editorial panel. Options: Solid or Gradient. Default: Gradient.

Usage

  • Pick Solid for one flat color; the editor shows Solid background.
  • Pick Gradient for a color blend; the editor shows Gradient background.

Solid background

Flat fill color for the editorial panel when Background style is Solid. Default color: #FFF5F0.

Usage

  • Use a soft warm tone that fits beauty and fragrance branding.
  • Visible only when Background style is set to Solid.

Gradient background

Color blend for the editorial panel when Background style is Gradient. Default: warm pink-to-cream gradient (#FFF5F0 to #FCE9F1).

Usage

  • Adjust the gradient for a soft editorial look beside the product row.
  • Visible only when Background style is set to Gradient.

Section spacing

Section spacing

Adds empty space above and below this section on desktop and mobile.

Usage

  • Top padding (desktop) — Default: 40 px · 0–100 px
  • Bottom padding (desktop) — Default: 40 px · 0–100 px
  • Top padding (mobile) — Default: 40 px · 0–100 px
  • Bottom padding (mobile) — Default: 40 px · 0–100 px
  • When you move the slider, the gap above or below grows or shrinks