How to Left-Align 'Heading' and 'Description' in "Collection List" on Flow theme

Technical Q&A
, , ,

Topic summary

A user seeks to left-align the heading and description in the Collection List section of Shopify’s Flow theme. Their initial CSS code targeting .collection-list-wrapper__heading and .collection-list-wrapper__description in the theme.min.css file didn’t work.

Solution provided:

  • Add custom CSS to the theme.liquid file, just above the </body> tag
  • The code targets the specific section ID and uses text-align: -webkit-left !important and align-items: start !important
  • Also removes left margin from the description element

Outcome:

  • The solution successfully left-aligned the Collection List elements
  • The user confirmed it worked perfectly

Follow-up question:
The user now asks whether the same fix can be applied to “Featured Collections” sections, suggesting they want consistent alignment across multiple collection displays. This remains unanswered.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello there,

I’m using the “Flow” theme and would like a code fix which will enable left-aligning of the ‘Heading’ and ‘Description’ in the “Collection List”.

Does anyone out there have a solution?

I found the following code to add to the theme.min.css file, but it doesn’t work:

.collection-list-wrapper__heading, .collection-list-wrapper__description {
text-align: left !important;
}

If this code is correct, will someone please provide a screenshot of the exact location this code is to be pasted?

Thanks.

1 Like
2

Hey @Cremehaus

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

1 Like
3

Hi Moeed,

Here is the url: https://cremehaus.com.au/

1 Like
4

Hey @Cremehaus

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
div#shopify-section-template--19585022361657__06b36118-35e6-4312-b5b2-099a0ddc5aa6 .section-title--wrapper {
    text-align: -webkit-left !important;
    align-items: start !important;
}
div#shopify-section-template--19585022361657__06b36118-35e6-4312-b5b2-099a0ddc5aa6 .section-description.subdued-text.text-link-animated {
    margin-left: 0 !important;
}
</style>

RESULT:

image
image1896×347 50.2 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
5

Thanks, Moeed. I’ll try that shortly.

To clarify, this code is only for the Collection List, right?

1 Like
6

The code which I have provided will only for this section which I shared a picture of in the screenshot so yes it’s only for the Collection List.

Best,
Moeed

1 Like
7

Thanks - I’ll try that now and see how it goes.

8

That worked perfectly. Thank you so much.

1 Like
9

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. Don’t forget to mark it as solution too!

Best,
Moeed

1 Like
10

Is there a way to apply the same fix to “Featured Collections” ?