How to make only 6 product show on feature collection moblie (dawn)

Store Design
, , , ,

Topic summary

A user needed to display only 6 products in a featured collection on mobile devices while keeping 8 products visible on desktop for their homepage.

Solution Provided:

  • Add custom CSS code to the theme’s base.css file
  • Use a media query targeting screens up to 767px width (mobile devices)
  • Hide the 7th and 8th product slides using display: none on specific slide IDs

Implementation Steps:

  1. Navigate to Online Store → Theme → Edit code
  2. Open Assets → base.css
  3. Paste the provided CSS at the bottom of the file

Outcome:
The solution successfully resolved the issue. The user confirmed it worked as intended, maintaining different product counts across desktop and mobile views without affecting the overall collection.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

27656591-7A10-414C-B295-E6303F166C3C.png
27656591-7A10-414C-B295-E6303F166C3C.png960×2079 219 KB

How would we make only 6 product show up on a feature collection mobile but keep the desktop version with 8 products? we only need to edit the mobile version.

our website : www.munnafashion.com

*we are only need the first featured collection on our home page edited.

2

Hi @munfas_uk ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file

@media (max-width: 767px) {
li#Slide-template--18026016604473__featured_collection-7 {
    display: none;
}
li#Slide-template--18026016604473__featured_collection-8 {
   display:none;
}
}

Hope my answer will help you.

Kate from PageFly Team

1 Like
3

Thank you, that worked! Your help was very much appreciated. :black_heart:

1 Like