Dawn theme collection page width customisation

Shopify Discussion
1

Hi I am building an apparel store. https://softsavg.com/

I want to make the collection page full width. Can some one please help with this?

Thanks

2

Hey @DasPod !

You can increase the collection page width directly from the theme customizer settings:

  1. Go to Online Store → Themes
  2. Click Customize
  3. Navigate to Theme Settings → Layout
  4. Set the Page Width to 1600px

This should make your collection page full width.

If your theme doesn’t offer this option or you need more flexibility, you can also achieve this using CSS. Just add the following code to your base.css file:

.collection.page-width { max-width: unset !important; padding: 0 !important; }

Let me know if you need any further tweaks or if you have any questions. Happy to help :slightly_smiling_face:

Shubham | Untechnickle

3

Hi @DasPod

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.collection.page-width {
    max-width: unset !important;
    padding: 0 !important;
}
{% endstyle %}

DaisyVo_0-1738854294229.png
DaisyVo_0-1738854294229.png1919×866 289 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

Hi DasPod

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.collection.page-width {
    max-width: unset !important;
}

Result:

LizHoang_0-1738854590176.png
LizHoang_0-1738854590176.png929×651 541 KB

Best,
Liz

5

Hi @LizHoang

I think we should remove the padding too.

6

ohh, thank mate

7

This is Richard from PageFly - Shopify Page Builder App
Hi @DasPod Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag 

<style>
  .collection.page-width {
     max-width: 100% !important ;
     padding: 0 10px !important;
  }
</style>

And here is result

PageFlyRichard_0-1738896948314.png
PageFlyRichard_0-1738896948314.png1912×997 290 KB

Hope my solution will help you resolve the issue.Best regards,
Richard | PageFly

8

Hi Aii,

the solutions you provided works. I have used the code in base.css. But the only makes the image cards full width. Not the Filters below the header. Can you please help with that?

9

Hi @DasPod ,
can you try this code

.page-width {
  max-width: 100% !important;
}

Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly