What this section controls
- Images, videos, and other media presentation options
- Layout structure, width, alignment, and spacing
- Calls to action, links, and navigation behavior
- Product, collection, or cart-related storefront behavior
- Color schemes, contrast, and shared visual styling
Getting started
Add or open Featured Products
Add the Featured Products section to a compatible template or select the existing section from the left sidebar.
Section settings
Settings
Collection
Collection
Select the collection source used by collection.
Product list
Product list
Choose the product source used by product list.Overrides the collection choice.
Featured card
Featured card
Choose how Featured card behaves in the section.Available options: Normal, Big.Default:
normalLayout
Layout
Choose how Layout behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Grid, Carousel.Default:
gridMedia order
Media order
Choose how Media order behaves in the section.Review the result on both desktop and mobile when media changes are involved.Available options: First, Last.Default:
firstThis setting only appears when its related parent option is enabled.Optimized for mobileNumber of columns
Desktop
Desktop
Adjust Desktop with a slider-based control.It has the strongest effect on layout balance and visual hierarchy.Range:
1 to 6 Default: 3Mobile
Mobile
Adjust Mobile with a slider-based control.It has the strongest effect on layout balance and visual hierarchy.Range:
1 to 1.4 Default: 1Carousel layout
Pagination
Pagination
Choose how Pagination behaves in the section.Available options: None, Progress.Default:
progressNavigation
Navigation
Color for navigation
Color for navigation
Overflow
Overflow
Enable or disable Overflow.Default:
disabledCommon settings
Section width
Section width
Choose how Section width behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: Page, Fluid, Full.Default:
pageColor scheme
Color scheme
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default:
scheme-1Top spacing
Top spacing
Choose how Top spacing behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: No, S, M, L, XL.Default:
2Bottom spacing
Bottom spacing
Choose how Bottom spacing behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: No, S, M, L, XL.Default:
2Section border
Section border
Choose how Section border behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: None, Top, Bottom, Both.Default:
noneBest practices
- Check contrast after changing color schemes so text and controls remain easy to read.
- Review media-heavy layouts on both desktop and mobile before publishing.
- Keep labels short and scannable, especially in tighter layouts or utility areas.
- Adjust layout changes alongside neighboring sections so page rhythm stays consistent.
- Start with the structural settings first, then refine decorative styling after the layout feels settled.