How can I center the Collection Banner description in Dawn?

Store Design

Topic summary

  • Issue: In the latest Dawn theme, the collection banner description sits left; the goal was to have the description span/center across the page width (not center-align the text within the paragraph).

  • Guidance: Staff advised making theme code customizations, shared resources on editing code, duplicating the theme, and rolling back changes. They noted 60 minutes of complimentary design support for free Shopify themes on Basic or higher plans, and suggested Support or hiring a Shopify Expert if needed.

  • Solution implemented: The OP adapted a suggestion from a related thread and used CSS to make the description expand full width:
    .collection-hero__description{
    text-align: justified !important;
    max-width: 100% !important;
    }
    This achieved the desired full-width layout on their store.

  • Outcome: Staff confirmed and encouraged further questions. Another member expressed appreciation for the shared fix.

  • Status: Resolved. Key detail: the CSS snippet is central to the solution; no further open questions were raised.

Summarized with AI on January 12. AI used: gpt-5.
1

Hello -

I am using the most recent version of Dawn and am attempting to center the Collection Banner description across the page. I don’t want the text itself center aligned within the paragraph, rather the text to flow across the width of the page.

Currently the Collection Description sits on the left side of the page.

Thank you!

2

Hey, @Krysti926 .

Thanks for bringing your question to our Community forums. I understand that you’re hoping to move the collection banner description on your storefront. I’m happy to provide some suggestions.

In order to do so, you will need to make some code customizations to your theme. You can find more information here: Editing Code. If you are comfortable with coding, I’ve found a similar Community thread linked here with some suggestions.

If you’re going to edit the code of your theme, I highly recommend duplicating your theme first, and learning how to roll back to an older version of your theme. That way, you can reverse the changes if needed.

Because you’re using a free Shopify theme, if you’re on the Basic Shopify plan or higher, then you receive 60 minutes of complimentary design support. If you don’t feel comfortable making these changes yourself, our Support team may be able to help further with this. You can learn more about the types of customizations available here: Theme Support.

Otherwise, you could consider hiring a Shopify Expert to help you make this change as well. I suggest browsing the list of Experts that specialize in theme customizations.

I noticed that you are a new member of our Shopify Community, welcome! How has everything been going with your store set-up so far? If there is anything else I can help with please let me know!

1 Like
3

Thank you so much for your response. I’ve been mostly learning by trial and error and reading the posts in this community, which have been a tremendous help as this is all new to me. The post you sent wasn’t exact, so I altered what was there just to see and it worked! My description now expands the width of the page. The code I ended up using was:

.collection-hero__description{
text-align: justified !important;
max-width: 100% !important;
}

4

Hey, @Krysti926 .

Thanks for getting back to me! I’m happy to hear that you were able to alter the code accordingly. Please don’t hesitate to let me know if you have any questions going forward.

All the best,

1 Like
5

I love you so much right now!!! Thank you for sharing this!