How can I center the Collection Banner description in Dawn?

Store Design
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!