How can I center a collection description using CSS custom code?

Store Design

Topic summary

A user is attempting to center collection descriptions on their Shopify store. They’ve successfully centered the title but are struggling with the description alignment.

Suggested Solutions:

  • Built-in Editor: Check the editing options within the collection description box in either Collections or Theme Customizer for a direct center alignment option.

  • CSS Approach: If coding is needed:

    1. Use Chrome’s Inspect tool (F12) to identify the CSS class/ID targeting the collection description
    2. Add CSS code to the theme stylesheet (likely theme.css)
    3. Use text-align: center; for simple text centering
    4. If the description is within a container, use flexbox properties: display: flex; justify-content: center; align-items: center;

The discussion remains open, awaiting confirmation on whether the proposed solutions resolved the issue.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1 
Hello 

I am trying to add collection title's and descriptions to my shopify  store. 

I have so far managed to centre the title but not the description. Any ideas on CSS Custom code for this?

![Screenshot 2024-01-18 at 08.23.56.png|2144x496](upload://8mw1aHJGX8pm98VYtcyJZpYBuUK.png)

TIA

2

@Emmad - can you please share this page link?

3

Hi, @Emmad !

If this is the regular collection description, have a look at the Editing options on top of the box and just centre the text. It should be possible directly from the Collections or from the Theme Customizer.

If you want to use code:

First thing you need to do is to find the CSS class or ID that targets the collection description in your theme. Use Google Chrome’s Inspect tool (F12). Then go to your stylesheet (theme.css most likely) and use this code:

.your-collection-description-class {
    text-align: center;
}

/* If the description is within a container and you need to center the entire block */
.your-collection-description-container-class {
    display: flex;
    justify-content: center;
    align-items: center;
}

Let me know if it worked. Thanks!