To increase size of the collection images

Solved

To increase size of the collection images

Harshal54
Tourist
13 0 1

     433d82c4-a10b-413c-a3c3-64cc5437ebd0.jpg

 

How to increase the size of the collection display on the Dawn theme from this to the below picture

 

 

7fc21801-b210-4bdc-8347-6f16d84fbf1d.jpg

  

Accepted Solution (1)
thirtycoders
Shopify Partner
135 21 28

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>

 

 

thirtycoders_0-1715019609303.jpeg

Result:

thirtycoders_1-1715019731714.png

 



Thanks!

 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 8 (8)

pawankumar
Shopify Partner
673 98 121

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!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
pawankumar
Shopify Partner
673 98 121

@Harshal54 
If you set it to 4 like I explained above
You will find this option in theme customizer
It should look like this

pawankumar_0-1715010526004.png
Please check if it works for you

Thanks!

 

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

thirtycoders
Shopify Partner
135 21 28

Could you please share your store url? @Harshal54 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
thirtycoders
Shopify Partner
135 21 28

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>

 

 

thirtycoders_0-1715019609303.jpeg

Result:

thirtycoders_1-1715019731714.png

 



Thanks!

 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
Harshal54
Tourist
13 0 1

Thank you so much, it worked just as I wanted. 

BSSCommerce-HDL
Shopify Partner
2305 834 907

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

view (9).png

@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

Harshal54
Tourist
13 0 1

No, the size in between got reduced but not the image size