Hi, I’d like the Featured collection slider on my mobile view to show 2 rows for my grid rather than one.
Theme: Stiletto
It currently looks like this:
I want it to look like this:
website - www.amierafa.com
Topic summary
A user wants to modify their Shopify store’s Featured Collection slider on mobile to display products in a 2-row grid instead of a single horizontal row, while maintaining the desktop layout.
Solution Provided:
Two community members offered CSS code solutions to be added to the theme’s stylesheet (base.css, style.css, or theme.css). The working solution uses a media query targeting mobile screens (max-width: 749px) that:
- Converts the carousel wrapper to use flexbox with row wrapping
- Displays products in multiple rows
Additional Request:
The user asked to reposition the “View All” button below the section heading. This was addressed with updated CSS code using flexbox ordering properties.
Limitation Noted:
Changing the number of products displayed (e.g., showing 6 SKUs on desktop vs. mobile) cannot be achieved with simple CSS alone—it would require editing the theme’s code files since the section uses a carousel structure.
Status: The main issue appears resolved with CSS modifications, though the user initially had difficulty locating the </head> tag for one suggested solution.
1 Like
Hi @amierafa
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.carousel.swiper {
overflow: hidden;
}
.featured-collection-slider__products.carousel__wrapper.swiper-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
}
- And Save.
- Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
thank you! is it possible to only show two rows on mobile but allow there to be 6 SKUs to be on desktop view?
Welcome, Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Nope, we cant change into 6 for a simple css. Needs to edits some code to show the other products you have in your store since this is a carousel section.
I did command+F to search for the tag and nothing comes up. Where should I place this?
To change view all in the top, please replace the code on this code below.
@media only screen and (max-width: 749px){
.carousel.swiper {
overflow: hidden;
}
.featured-collection-slider__products.carousel__wrapper.swiper-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
.featured-collection-slider__content-view-all-wrapper {
order: -1;
flex: 1 1 100%;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!