Solved

How to change collection grid on desktop to 1 row (carrousel) on Dawn?

glendagiordani
Shopify Partner
8 1 0

Hi everyone,

 

Right now I have 7 collections and I would like to display them in a row (carrousel) on desktop not as a grid, just as it show on mobile.

 

Do you guys can help me?

Screen Shot 2024-02-23 at 11.31.38 AM.pngScreen Shot 2024-02-23 at 9.49.35 AM.png

Accepted Solutions (4)
ThePrimeWeb
Shopify Partner
1728 480 353

This is an accepted solution.

It won't be, because I will have to go to your store and write code and test it based on how your store is built. All the code we provide here is written specifically for your store. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media screen and (min-width: 990px) {
    .slider--tablet.grid--peek {
        margin: 0 !important;
        width: 100% !important;
    }  
    
    .slider.slider--tablet {
        position: relative !important;
        flex-wrap: inherit !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scroll-padding-left: 1rem !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }

    .slider:not(.slider--everywhere)+.slider-buttons {
        display: flex !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708798582824.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

glendagiordani
Shopify Partner
8 1 0

This is an accepted solution.

Oh I see, sorry I did not know that.

Amazing, worked perfectly. Thank you very much

 

I am trying to change the size of the background of the image banner button, on desktop is great but on mobile the height is too big. Do you know how I can solve this?

 

As you can see in the image it has a lot of white background,

Untitled design - 2024-02-23T110109.288.png

 

 

 

View solution in original post

ThePrimeWeb
Shopify Partner
1728 480 353

This is an accepted solution.

Just replace the earlier code with this 

 

<style>
@media screen and (min-width: 990px) {
    .slider--tablet.grid--peek {
        margin: 0 !important;
        width: 100% !important;
    }  
    
    .slider.slider--tablet {
        position: relative !important;
        flex-wrap: inherit !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scroll-padding-left: 1rem !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }

    .slider:not(.slider--everywhere)+.slider-buttons {
        display: flex !important;
    }
}

@media screen and (max-width: 989px) {
    .banner__box {
       padding: 0 !important;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1728 480 353

This is an accepted solution.

Yeah you can replace the old code with this one

<style>
@media screen and (min-width: 990px) {
    .slider--tablet.grid--peek {
        margin: 0 !important;
        width: 100% !important;
    }  
    
    .slider.slider--tablet {
        position: relative !important;
        flex-wrap: inherit !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scroll-padding-left: 1rem !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }

    .slider:not(.slider--everywhere)+.slider-buttons {
        display: flex !important;
    }
}

@media screen and (max-width: 989px) {
    .banner__box {
       padding: 0 !important;
    }
}

.card-information {
    padding: 0 10px 10px 10px !important;
}

.card-wrapper {
    border-radius: 15px !important;
    background-color: #fff9e0 !important;
    overflow: hidden !important;
}

.card-wrapper .card-information {
    min-height: 130px !important;
}
</style>

 

You can change the color where it says "#fff9e0" at the last portion in the code. 

 

The price arrangement is all different because of the one that has reviews and the others don't. Can't really balance that. 

ThePrimeWeb_0-1708801882824.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 12 (12)

ThePrimeWeb
Shopify Partner
1728 480 353

Hey @glendagiordani,

 

Can you share the link to your store please?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
glendagiordani
Shopify Partner
8 1 0

Hi @ThePrimeWeb 

 

I don't have the store on yet, I am still designing. 

 

ThePrimeWeb
Shopify Partner
1728 480 353

You can share a preview link to the draft theme

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
glendagiordani
Shopify Partner
8 1 0

Sure, I just thought the image that I attach would be enough.

 

https://28t08v4x4khtupdk-78118420763.shopifypreview.com

ThePrimeWeb
Shopify Partner
1728 480 353

This is an accepted solution.

It won't be, because I will have to go to your store and write code and test it based on how your store is built. All the code we provide here is written specifically for your store. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media screen and (min-width: 990px) {
    .slider--tablet.grid--peek {
        margin: 0 !important;
        width: 100% !important;
    }  
    
    .slider.slider--tablet {
        position: relative !important;
        flex-wrap: inherit !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scroll-padding-left: 1rem !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }

    .slider:not(.slider--everywhere)+.slider-buttons {
        display: flex !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708798582824.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
glendagiordani
Shopify Partner
8 1 0

This is an accepted solution.

Oh I see, sorry I did not know that.

Amazing, worked perfectly. Thank you very much

 

I am trying to change the size of the background of the image banner button, on desktop is great but on mobile the height is too big. Do you know how I can solve this?

 

As you can see in the image it has a lot of white background,

Untitled design - 2024-02-23T110109.288.png

 

 

 

ThePrimeWeb
Shopify Partner
1728 480 353

This is an accepted solution.

Just replace the earlier code with this 

 

<style>
@media screen and (min-width: 990px) {
    .slider--tablet.grid--peek {
        margin: 0 !important;
        width: 100% !important;
    }  
    
    .slider.slider--tablet {
        position: relative !important;
        flex-wrap: inherit !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scroll-padding-left: 1rem !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }

    .slider:not(.slider--everywhere)+.slider-buttons {
        display: flex !important;
    }
}

@media screen and (max-width: 989px) {
    .banner__box {
       padding: 0 !important;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
glendagiordani
Shopify Partner
8 1 0

OMG, you are a life saver.

One more last thing.

 

Can I do something like that ? Like rounding corners and color background?

 

Screen Shot 2024-02-24 at 1.58.02 PM.png

ThePrimeWeb
Shopify Partner
1728 480 353

This is an accepted solution.

Yeah you can replace the old code with this one

<style>
@media screen and (min-width: 990px) {
    .slider--tablet.grid--peek {
        margin: 0 !important;
        width: 100% !important;
    }  
    
    .slider.slider--tablet {
        position: relative !important;
        flex-wrap: inherit !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        scroll-padding-left: 1rem !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 1rem !important;
    }

    .slider:not(.slider--everywhere)+.slider-buttons {
        display: flex !important;
    }
}

@media screen and (max-width: 989px) {
    .banner__box {
       padding: 0 !important;
    }
}

.card-information {
    padding: 0 10px 10px 10px !important;
}

.card-wrapper {
    border-radius: 15px !important;
    background-color: #fff9e0 !important;
    overflow: hidden !important;
}

.card-wrapper .card-information {
    min-height: 130px !important;
}
</style>

 

You can change the color where it says "#fff9e0" at the last portion in the code. 

 

The price arrangement is all different because of the one that has reviews and the others don't. Can't really balance that. 

ThePrimeWeb_0-1708801882824.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
glendagiordani
Shopify Partner
8 1 0

Thank you so much!!

glendagiordani
Shopify Partner
8 1 0

Hi there,

 

Can you help me changing the color of the product box for this link as well?
https://shopdanycfratfscreations.com/

ThePrimeWeb
Shopify Partner
1728 480 353

Hey @glendagiordani,

 

I see the old code is still there, leave it as it is and add this on as well. Instructions are the same as earlier

 

<style>
.card.card--card.card--media {
    background-color: transparent !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website