Featured Product Section

Auto-generate your docs

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

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

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

default:"scheme-1"

Color scheme for the section

Padding

range

default:"0"

Top padding in pixelsRange: 0-100px, step 1

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:

Media Block
- Type: _media-without-appearance
- Displays product images/videos
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

Mobile Layout

On mobile (< 750px):

Media always appears first (order: -1)
Single column layout
Padding: 20px block and inline

Desktop Layout

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

Image Loading

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

Height Constraints

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.

Product List

Display multiple products in grid or carousel

Product Recommendations

Dynamic product suggestions

Product Information

Full product page layout

⌘I

Sections

Blocks

Snippets

Web Components

Featured Product Section

Schema Location

Features

Settings

Product Selection

Layout

Appearance

Padding

Static Blocks

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

2. Featured Product Block (`_featured-product`)

Implementation

Structured Data

Layout Logic

CSS Custom Properties

Grid Layout

Preset Configuration

Product Information Display

Title Block Settings

Swatches Block Settings

Responsive Behavior

Content Sizing

SEO Benefits

Usage Examples

New Product Launch

Hero Product Showcase

Accessibility

Performance Optimization

Customization Tips

Product List

Product Recommendations

Product Information

​Schema Location

​Features

​Settings

​Product Selection

​Layout

​Appearance

​Padding

​Static Blocks

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

​2. Featured Product Block (_featured-product)

​Implementation

​Structured Data

​Layout Logic

​CSS Custom Properties

​Grid Layout

​Preset Configuration

​Product Information Display

​Title Block Settings

​Swatches Block Settings

​Responsive Behavior

​Content Sizing

​SEO Benefits

​Usage Examples

​New Product Launch

​Hero Product Showcase

​Accessibility

​Performance Optimization

​Customization Tips

​Related Sections

Product List

Product Recommendations

Product Information

Schema Location

Features

Settings

Product Selection

Layout

Appearance

Padding

Static Blocks

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

2. Featured Product Block (`_featured-product`)

Implementation

Structured Data

Layout Logic

CSS Custom Properties

Grid Layout

Preset Configuration

Product Information Display

Title Block Settings

Swatches Block Settings

Responsive Behavior

Content Sizing

SEO Benefits

Usage Examples

New Product Launch

Hero Product Showcase

Accessibility

Performance Optimization

Customization Tips

Related Sections