Shopify themes, liquid, logos, and UX
How to increase the size of the collection display on the Dawn theme from this to the below picture
Solved! Go to the solution
This is an accepted solution.
Hello @Harshal54,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at the bottom of the file -> Save
<style>
.page-width.section-template--17577588687081__multicolumn_T8YV3J-padding.isolate.scroll-trigger.animate--slide-in{
padding: 3rem 0px !important;
max-width: 100% !important;
}
</style>
Result:
Thanks!
Hi @Harshal54
It looks like you are asking about increasing size of collection image showing in collection list section in Dawn theme, To do this, you can see this setting "Number of columns on desktop" and make it 3 or 4 to make it larger, larger number will decrease the image size as it tries to fit number of items in one row
Hope my solution will help you resolve the issue.
Thanks!
@Harshal54
If you set it to 4 like I explained above
You will find this option in theme customizer
It should look like this
Please check if it works for you
Thanks!
Could you please share your store url? @Harshal54
This is an accepted solution.
Hello @Harshal54,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at the bottom of the file -> Save
<style>
.page-width.section-template--17577588687081__multicolumn_T8YV3J-padding.isolate.scroll-trigger.animate--slide-in{
padding: 3rem 0px !important;
max-width: 100% !important;
}
</style>
Result:
Thanks!
Thank you so much, it worked just as I wanted.
Hi @Harshal54 ,
You can follow these steps:
- Go to Online Store -> Themes -> Customize
- Paste code below to Custom CSS section -> Save
- The following code will reduce the space between product tags and increase the width between product tags
-
@media screen and (min-width: 750px) {
.grid {
column-gap: calc(var(--grid-desktop-horizontal-spacing) - 4);
row-gap: calc(var(--grid-desktop-vertical-spacing) - 4);
}
}
@media screen and (min-width: 990px) {
.grid--5-col-desktop .grid__item {
width: calc(20% - (var(--grid-desktop-horizontal-spacing) - 4px) * 4 / 5);
max-width: calc(
20% - (var(--grid-desktop-horizontal-spacing) - 4px) * 4 / 5
);
}
}
Hope this help!
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
No, the size in between got reduced but not the image size
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025