Featured products

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on layout settings
3. Company XYZ documentation on slideshow controls settings
4. Company XYZ documentation on headers settings
5. Company XYZ documentation on product cards settings
6. Company XYZ documentation on product variants
7. Company XYZ documentation on section padding settings
8. Company XYZ documentation on section backgrounds settings
9. Company XYZ documentation on separators settings
10. Company XYZ documentation on visibility settings
11. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Featured products to spotlight a specific set of items anywhere on the page. It is best for curated edits like new arrivals, seasonal picks, gift guides, or campaign callouts where you want full control over which products appear. For a broader overview of how sections and blocks work, see Shopify documentation on sections and blocks

Core settings

Start by selecting the products you want to feature. Because this section is manually curated, it works best when you want a deliberate product mix rather than an automatically changing feed.

Tip

Use this section when the exact product lineup matters. If you want products to update automatically as a collection changes, use a collection-based section instead.

Layout settings

Layout settings control how many product cards appear on desktop, tablet, and mobile, and whether each device uses a grid or slideshow layout. This gives you a lot of flexibility when you want comparison-friendly rows on larger screens and swipeable browsing on smaller ones. For layout control details, see Company XYZ documentation on layout settings.

Tablet columns can follow the desktop setting when the tablet value is left at 0. That is useful when you want one consistent large-screen layout without managing a separate tablet count.

Choose column counts based on how much product detail each card needs to carry. Fewer columns give product images, titles, and actions more room, while higher counts create a denser merchandising layout.

If you show more card details, avoid pushing column counts too high. Dense layouts can make product information and actions harder to scan, especially on tablet and mobile.

Slideshow settings

Slideshow settings control motion, autoplay, looping, navigation, pagination, and slide preview behavior whenever slideshow layout is enabled on a device. These settings are most useful when you want a more guided browsing experience than a fixed product grid. For slideshow control details, see Company XYZ documentation on slideshow controls.

Animation style is the main decision point. Fade creates a cleaner, one-item-at-a-time presentation, while the default animation is better when you want multiple products visible within the same carousel flow.

Autoplay can add movement, but it should not rush product discovery. A slower autoplay delay usually works better when cards include product titles, excerpts, or variant options.

Navigation and pagination help users understand how much content is available. Previewing the next slide can make the carousel feel more interactive, but it is not available with fade animation.

Fade animation forces a single-slide layout and hides some slideshow features such as pagination and slide previews. Use the default animation when you want a more traditional multi-card carousel.

Card color settings

Use these settings to override card colors for this section only. They are helpful when featured products need a campaign-specific look without changing product cards across the rest of the store.

Banner overlay settings apply only when the card style is set to Banner. For other card styles, focus on card background, border, heading, and text colors to keep product details clear and readable.

Caution

After changing card backgrounds or overlays, check title and text contrast across different product images so the cards remain easy to read.

Color settings

These settings control the section-level icon, heading, and subheading colors. Use them when the intro content needs to match a campaign palette or stand apart from the default text styling.

If you also use a section background image, gradient, or video, revisit these text colors after the background is in place. Contrast that looks fine on a plain background may not hold up once media is added.

Standard section settings

Header settings

Use the shared header controls to add structure and context with an optional icon, caption, heading, supporting text, and button. This can improve clarity and help the product group feel more intentional, especially in editorial or promotional layouts. For header control details, see Company XYZ documentation on headers.

The header button can sit above or below the text, with separate positioning on mobile and an optional full-width mobile treatment. Keep the button focused on one clear next step, such as viewing a broader product range.

Card settings

Use the shared card controls to override your default product card presentation in this section only. You can adjust the card style, image ratio, text density, button treatment, text alignment, and variant selector behavior. For product card details, see Company XYZ documentation on product cards.

This is the main place to balance visual merchandising against product detail. If the section is image-led, simplify text and actions; if the section is comparison-led, keep titles and calls to action consistent and easy to scan.

Variant selector display requires additional setup to work properly. For setup details, see Company XYZ documentation on product variants.

Padding settings

Use the shared padding controls to adjust space above and below the section on desktop and mobile. For padding control details, see Company XYZ documentation on section padding.

Larger padding can help a featured product group feel more premium or self-contained, while tighter spacing works well when this section supports nearby content. Separate mobile padding is useful if stacked cards or slideshow layouts make the section feel too tall.

Section background settings

Use the shared background controls to add a color, gradient, image, or video behind the section. For background control details, see Company XYZ documentation on section backgrounds.

Background media can give the section a more editorial feel, but it also affects readability. Use overlays carefully and check that header text and product cards still stand out clearly from the background.

Separator settings

Use the shared separator controls to add a top or bottom divider around the section. For separator control details, see Company XYZ documentation on separators.

Separators are useful when this section sits between visually similar content and needs a clearer boundary. Keep them subtle if your cards or backgrounds already create strong visual separation.

Visibility settings

Use the shared visibility controls to show or hide the section by device size. For visibility control details, see Company XYZ documentation on visibility.

This is helpful when your merchandising strategy differs by screen size. If you hide the section on one device range, make sure the same products still appear somewhere appropriate there.

Width settings

Use the shared width controls to manage both the content width and the outer section width. For width control details, see Company XYZ documentation on layout widths.

Content width affects how wide the product area can grow, while section width matters most when you use backgrounds or want the outer wrapper to extend further. Width changes are easiest to judge on the live page view, where spacing and edge-to-edge behavior are more accurate.

Usage notes

1. Curate a clear product story. Choose products that belong together by theme, audience, or use case so the section feels intentional.
2. Match the layout to the goal. Use grids for easier comparison and slideshow layouts for a more guided, swipe-friendly browsing experience.
3. Review both device views. Desktop and mobile can differ in layout, alignment, navigation, and media behavior, so check each breakpoint after you make changes.
4. Treat media overrides carefully. Separate desktop and mobile media choices can change cropping, loading, fallback behavior, and readability, especially when backgrounds or overlays are involved.
5. Keep card content proportional. The more columns you show, the simpler each card should be to keep titles, prices, and actions easy to scan.
6. Check commerce actions in context. Product details, selected variants, quantity, availability, and configured cart actions can all affect what customers can add or do from the section.