How to change collection grid on desktop to 1 row (carrousel) on Dawn?
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?
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.
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,
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.
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.
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,
OMG, you are a life saver.
One more last thing.
Can I do something like that ? Like rounding corners and color background?
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.
Community Blog Articles
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024