Skip to main content
The Featured Product section displays a product with a side-by-side layout featuring product media on one side and product information on the other.

​
Schema Location

File: sections/featured-product.liquid:95-205

​
Features

  • Single product showcase
  • Split layout (media left or right)
  • Responsive media gallery
  • Constrained height for visual consistency
  • Structured data for SEO
  • Full product information display

​
Settings

​
Product Selection

​
product
product
Select the product to featureRequired: This setting determines which product is displayed

​
Layout

​
layout
select
default:"media-left"
Position of product mediaOptions:
  • media-left - Media on left, content on right
  • media-right - Content on left, media on right

​
Appearance

​
color_scheme
color_scheme
default:"scheme-1"
Color scheme for the section

​
Padding

​
padding-block-start
range
default:"0"
Top padding in pixelsRange: 0-100px, step 1
​
padding-block-end
range
default:"0"
Bottom padding in pixelsRange: 0-100px, step 1

​
Static Blocks

The Featured Product section includes two static blocks:

​
1. Media Block (_media-without-appearance)

Type: _media-without-appearance Displays the product’s media gallery (images and videos). Settings:
  • Uses product’s aspect ratio
  • Responsive image sizing
  • Gallery navigation

​
2. Featured Product Block (_featured-product)

Type: _featured-product Contains product information and purchase interface. Child Blocks:
  • product-title - Product name
  • _featured-product-price - Price display
  • _featured-product-gallery - Additional gallery view
  • swatches - Color/variant swatches

​
Implementation

​
Structured Data

{% raw %}
<script type="application/ld+json">
  {{ section.settings.product | structured_data }}
</script>
{% endraw %}
From featured-product.liquid:1-3, the section outputs JSON-LD structured data for SEO.

​
Layout Logic

{% raw %}
{% liquid
  assign product = section.settings.product
  assign gallery_aspect_ratio = product.featured_media.preview_image.aspect_ratio | default: 1
%}

{% if section.settings.layout == 'media-left' %}
  {{ featured_product_media }}
  {{ featured_product_content }}
{% else %}
  {{ featured_product_content }}
  {{ featured_product_media }}
{% endif %}
{% endraw %}
From featured-product.liquid:5-44, media and content order changes based on layout setting.

​
CSS Custom Properties

--gallery-aspect-ratio: {{ gallery_aspect_ratio }};
--media-height: 100%;
--viewport-offset: 400px; /* 300px on desktop */
--constrained-min-height: 80dvh;
--constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
These variables create a responsive, constrained height system.

​
Grid Layout

From the stylesheet at featured-product.liquid:48-92: 
.featured-product-section .section-content-wrapper {
  grid-template-columns: 1fr; /* Mobile */
  display: grid;

  @media screen and (min-width: 750px) {
    grid-template-columns: 1fr 1fr; /* Desktop: 50/50 split */
  }
}

​
Preset Configuration

The default preset includes: Section Settings:
  • Color scheme: scheme-3
  • Layout: media-left
Static Blocks:
  1. Media Block
    • Type: _media-without-appearance
    • Displays product images/videos
  2. Featured Product Block
    • Type: _featured-product
    • Child blocks:
      • Product title (H5)
      • Price display
      • Gallery thumbnails
      • Variant swatches

​
Product Information Display

​
Title Block Settings

{
  "type": "product-title",
  "settings": {
    "type_preset": "h5",
    "width": "100%"
  }
}

​
Swatches Block Settings

{
  "type": "swatches",
  "settings": {
    "hide_padding": true
  }
}

​
Responsive Behavior

On mobile (< 750px):
  • Media always appears first (order: -1)
  • Single column layout
  • Padding: 20px block and inline
On desktop (≥ 750px):
  • 50/50 split layout
  • Content width constrained to aspect ratio
  • Padding: 40px block and inline
  • Centered content alignment

​
Content Sizing

@media screen and (min-width: 750px) {
  .featured-product-section .product-card__content {
    --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio));
    width: min(100%, var(--hugged-width));
    margin-left: auto;
    margin-right: auto;
  }
}
Content width hugs the gallery aspect ratio for visual consistency.

​
SEO Benefits

Structured Data: The section automatically outputs Product schema markup for improved search engine visibility and rich snippets.

​
Usage Examples

​
New Product Launch

Feature a new product with full details and high-quality imagery. Settings:
  • Layout: media-left
  • Color scheme: scheme-3 (accent color)
  • Product: Select your new product

​
Hero Product Showcase

Highlight your best-selling or flagship product. Settings:
  • Layout: media-right
  • Add descriptive blocks in the product content
  • Enable swatches for variants

​
Accessibility

  • Product images include alt text from product settings
  • Proper heading hierarchy with H5 title
  • Color contrast maintained via color scheme
  • Keyboard accessible variant selection
  • Screen reader friendly price announcements

​
Performance Optimization

  • Product media uses responsive image sets
  • Lazy loading for below-fold images
  • Aspect ratio preserved to prevent layout shift
  • Gallery aspect ratio calculated: product.featured_media.preview_image.aspect_ratio
The section uses dynamic viewport height calculations:
--constrained-height: max(80dvh, calc(100vh - 300px));
This ensures the section doesn’t overwhelm the viewport while maintaining visual impact.

​
Customization Tips

Color Scheme Selection: Use contrasting color schemes (e.g., scheme-3) to make featured products stand out from surrounding sections.
Product Selection Required: The section requires a product to be selected. Without a product, only placeholder content will display.

​
Related Sections

Product List

Display multiple products in grid or carousel

Product Recommendations

Dynamic product suggestions

Product Information

Full product page layout

Build docs developers (and LLMs) love

Get started for freeTalk to us