Skip to main content

Featured product split

Merchant Developer

A split-screen section that spotlights one product with its details, price, rating, and a Buy now button on one side and a large product image on the other.

Featured product split shows a single chosen product in a two-column layout: the product's vendor, title, price, star rating, short description, and a Buy now button on one side, with a large featured image on the other. If no product is selected, it displays placeholder content so you can preview the layout.

storefront previewResult
Featured product split
Featured product split
storefront previewSettings
Featured Product Split section settings - product, color scheme and button shape/colors
Featured Product Split section settings - product, color scheme and button shape/colors

How to use it​

For merchants

In the Shopify theme editor, add or open this section, then:

  1. In the theme editor, add or open the Featured product split section.
  2. Under Select product, pick the product you want to feature (its image, title, price, and description are pulled in automatically).
  3. Choose a Color scheme to match the section to the rest of your page.
  4. Set the Button shape for the Buy now button (or leave it on Theme default).
  5. To restyle the button, set Button colors to Custom and pick a background and text color; otherwise it uses your global theme button colors.
  6. Save and preview the page.
tip

Use a high-quality product image; the featured image renders large (up to 1200px wide) and its natural width/height are used, so a clean, well-lit shot works best.

tip

The star rating only appears when the product has review metafields (reviews.rating); products without reviews simply hide the rating row.

tip

The description is auto-shortened to 40 words with HTML stripped, so no manual trimming is needed.

Settings reference​

SettingTypeDefaultWhat it does
Color schemecolor_schemescheme-1Applies a theme color scheme to the section background and text.
Select productproduct(none)The product to feature. If left empty, placeholder content is shown.
Button shapeselectdefaultShape of the Buy now button: Theme default, Rectangle, Rounded, or Rounded rectangle.
Button colorsselectdefaultSelect 'Custom' to override the global button colors set in Theme Settings.
Custom button backgroundcolor#000000Only used when 'Button Colors' is set to Custom.
Custom button textcolor#ffffffOnly used when 'Button Colors' is set to Custom.

Supports Shopify app blocks only (@app), which render after the section content; there are no built-in repeatable content blocks.

Developer notes​

Developer note

Renders section-color-scheme and loads featured-product-split.css; the section wrapper id is FPSplit-{{ section.id }} for scoped styling.

  • Button colors default to the section color-scheme tokens rgb(var(--color-button)) / rgb(var(--color-button-text)) unless button_color_style == 'custom', which switches to the section's button_bg/button_text_color; the resolved values are injected via an inline {% style %} block scoped to the section id.
  • Button shape is the section's own button_shape setting with a literal | default: 'default' fallback; applied as a btn-shape-{shape} class.
  • Rating is read from product.metafields.reviews.rating and reviews.rating_count; the Buy now form posts selected_or_first_available_variant.id via a {% form 'product' %}.
{%- assign product = all_products[section.settings.product] -%}
{%- if product != blank -%}
  <h2 class="fp-title">{{ product.title }}</h2>
  <span class="fp-price">{{ product.price | money }}</span>
{%- endif -%}