Featured Product List

Everything You Need for Featured Product Displays

Create a polished product showcase with flexible columns, optional sliders, product details, sale tags, responsive layouts, and custom styling controls.

Get App

Flexible Product Selection

Choose specific Shopify products for each card and build a curated featured product section.

Optional Product Slider

Turn the product list into a slider so shoppers can browse featured items without taking extra page space.

Desktop Column Control

Choose 3-6 products per row on the desktop to create a layout that fits your storefront.

Mobile Column Options

Show one or two product cards per row on mobile for a cleaner and easier shopping experience.

Product Sale Tags

Display sale tags with custom text or automatically show the percentage saved on discounted products.

Vendor & Price Details

Show product vendors, current prices, and compare-at prices to give shoppers useful product information.

Slider Navigation Styles

Use arrows or dots for slider navigation and adjust their colors, borders, backgrounds, and sizes.

Responsive Card Layout

Keep product images, titles, prices, badges, and card spacing organized across desktop and mobile screens.

Featured Product List Settings & Options

Control products, layout, cards, colors, navigation, spacing, and section width directly from the Shopify theme editor.

Section Settings

Applies to the whole section

Main heading displayed above the product list.

Heading

Supporting text displayed below the heading.

Content

Choose the alignment of the section text.

Text Alignment

Set the number of visible products on the desktop.

Desktop Columns

Set the number of product columns on mobile.

Mobile Columns

Turn the product slider on or off.

Enable Slider

Choose arrows or dots for slider navigation.

Pagination Type

Show or hide the vendor name on product cards.

Show Vendor

Show or hide product sale tags.

Enable Tag

Set custom text for the product sale tag.

Sale Tag Content

Set the product card content alignment.

Content Alignment

Set the section background color.

Background Color

Set the heading color.

Heading Color

Set the section content color.

Content Color

Make the section span the available width.

Full Width

Set the maximum section width.

Section Width

Add Section

Block Settings

Applies to each product card

Choose the Shopify product displayed in the card.

Product

Add a custom image for the product card.

Image

Add a custom title for the product card.

Title

Add Section

Where This Section Can Be Used

Use the section across your Shopify store to highlight selected products, guide shoppers to key items, and create focused product displays without complex layouts.

Home Page
Collection Page
Product Page
Landing Page

Home Page

Highlight Products Worth Exploring First

Place featured products on your homepage to introduce shoppers to best-selling, seasonal, discounted, or newly promoted items as soon as they enter your store.

Put important products in front of new visitors

Highlight seasonal or promotional products

Create a focused product discovery area

Show prices and sale information at a glance

Guide shoppers toward selected products

Collection Page

Add Curated Products to Collection Pages

Use a featured product list to complement collection browsing with selected products that deserve extra attention, such as promotions or popular items.

Spotlight selected products within a collection

Promote discounted items near related products

Add curated product recommendations

Help shoppers discover popular items

Create another path to product pages

Product Page

Show Related Products Beside Key Details

Add a product list below or around your main product content to introduce shoppers to complementary, popular, or specially selected products.

Introduce complementary products

Promote other items from your store

Encourage continued product browsing

Highlight discounted products nearby

Keep shoppers exploring your catalog

Landing Page

Build Focused Product Displays for Campaigns

Use the section on campaign pages to present selected products with clear images, prices, sale tags, and optional slider navigation that supports focused browsing.

Feature products tied to a campaign

Create a compact product showcase

Highlight promotional pricing clearly

Keep campaign pages visually organized

Link shoppers directly to products

Make Featured Products Easier to Discover

Give shoppers a clear way to browse selected products while keeping control over layout, card content, navigation, colors, spacing, and responsive behavior.

Create a Storefront-Matched Display

Adjust the product section to fit your theme with flexible columns, card styling, colors, spacing, and navigation choices.

Highlight specific products instead of showing an entire catalog

Give shoppers quick access to product images and pricing

Promote discounted products with visible sale tags

Choose between a standard grid and an interactive slider

Adapt product displays for desktop and mobile screens

Match cards and navigation to your store's visual style

Control section width and spacing for better page balance

Do this, skip that

DO

Select products that support the page's main shopping goal
Use clear product images that look consistent across cards
Keep custom product titles short and easy to scan
Use sale tags when discounts are important to shoppers
Choose columns that leave products comfortable to browse

DON'T

Add unrelated products just to fill empty card spaces
Mix inconsistent image styles across featured products
Use long titles that make product cards harder to scan
Overuse sale tags when products are not actually on sale
Choose too many columns for comfortable mobile browsing

Frequently Asked Questions

Can I choose which products appear in the section?

Yes. Select a Shopify product in each product block to create a curated list of featured products.

Can I display products in a slider?

Yes. Enable the slider setting so shoppers can browse featured products using arrows or dots.

How many product columns can I show on the desktop?

On a desktop, you can choose between 3 and 6 product columns in the section settings.

Can I choose the number of columns on mobile?

Yes. You can display products in either 1 or 2 columns on mobile for a responsive layout.

Can I show the product vendor?

Yes. Enable Show Vendor to display the vendor name on each product card when available.

Can I add sale tags to products?

Yes. Enable product tags and add custom sale text, or let the section calculate the discount percentage automatically.

Can I use a custom image for a product?

Yes. Add a custom image to a product block. If no image is selected, the product's featured image is used.

Can I customize the slider navigation?

Yes. You can choose arrows or dots and customize arrow colors, backgrounds, borders, and sizes.

Can I customize product card colors and spacing?

Yes. You can adjust card colors, text colors, tag styling, content spacing, border radius, and section padding.

Is the Featured Product List mobile responsive?

Yes. The section includes separate mobile column settings and responsive styling for product cards, images, text, and spacing.

Help Center

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready When You Are: Showcase Products in a Flexible Grid

Install SectionHub and add the Featured Product List section to your theme in minutes - no coding required.