Make collection description taking the full space - Dawn Theme

Store Design

Topic summary

A user wants to modify their Dawn theme collection page so the description spans the full width of the screen, rather than being constrained to a narrower column.

Solution Provided:

  • Add CSS code to make the collection description full-width
  • Navigate to: Online Store → Theme → Edit code → theme.css
  • Insert the following code at the top of the file:
.collection-hero__description {
  max-width: 100% !important;
}

Implementation Notes:

  • Some users couldn’t locate theme.css but found the code worked in component-collection-hero.css instead
  • Multiple participants confirmed the solution successfully resolved the issue
  • The modification affects how the description displays relative to product images on the collection page
Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hey everyone !

At the moment, my collection description is like that :

LRDN_0-1665672476961.png
LRDN_0-1665672476961.png2542×1161 280 KB

But I want it to be full width, i mean that is goes from the product on the right (it does already) to the product on the left.

Anyone could help me ?

Thanks in advance !

2

Hi @LRDN
Can you share with me the page url

3

https://le-reve-de-noel.com/collections/boules-de-noel-gonflables

4

Hi @LRDN

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.css ->paste bellow code in top of file

.collection-hero__description.rte {

max-width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

2 Likes
5

I am also using Dawn theme, and want my collection description to be the full width. I could not find a theme.css file but I did find component-collection-hero.css so I took a shot and inserted your code, which made my description go the full width of the screen.

1 Like
6

@PageFly-Richard Thanks, that worked for me!