Featured collection show 3 products on desktop and 1 product on Mobile

Store Design
1

Hello guys, is it possible on Featured collection on the main home page to show 3 products on desktop and 1 product on Mobile and to swipe for more. Not only 1 static on the main page. Thanks!

2

Hi! This task requires knowledge in CSS and js if you want to do this without app.

In another way, you can install application instead of using default functionality
Apps:
https://apps.shopify.com/product-slider-by-enormapps
https://apps.shopify.com/featured-products-slider-1

3

This apps are a little bit buggy and I wonder if there’s a method without third-part apps. Maybe some editing in the code.

4

Hi @SergHei124 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

5

Skull-bracelet.com

6

Hi @SergHei124 ,

Sorry for the late reply.

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->Paste the code below at the top of the file:
@media (max-width: 749px) {
.grid--peek .grid__item {
    width: 100% !important;
    max-width: 100% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Oh, sorry, I forgot to mention that I have Dawn Theme

8

Hi @SergHei124 ,

can you send the preview link of dawn theme, so i can check and see for you

thanks

9

the site is www.skull-bracelet.com

10

Hi @SergHei124 ,

Sorry for the late reply,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-product-grid.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
.product-grid .grid__item {
    width: 100% !important;
    max-width: 100% !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.