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
108 19 24

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
500 63 90

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
500 63 90

@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
108 19 24

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
108 19 24

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. 

BSSTech-Venture
Shopify Expert
358 84 90

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!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Harshal54
Tourist
13 0 1

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