Collection list heading and button alignment

Shopify Discussion

Topic summary

A user seeks to reposition elements in their Shopify store’s collection list section (Symmetry theme). Currently, the collection heading and navigation arrows are center-aligned, but they want the heading moved to the left and arrows to the right.

Proposed Solutions:

Two respondents provided CSS-based fixes:

  • Both suggest adding custom CSS code to the theme.liquid file, placed before the closing </body> tag
  • The code targets the collection heading class to apply text-align: left
  • Navigation buttons are repositioned using float: right, position: absolute, and display: inline-block properties

Status: The discussion appears resolved with working code solutions provided, though the text formatting in responses is reversed/garbled, making exact code implementation unclear without careful review.

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

Hi :slightly_smiling_face: Does anyone know if it’s possible to move the collection list heading to the left and arrows to the right? Currently the title and overflow arrow buttons sit in the centre. See inspiration below.

URL (Symmetry theme) – https://pantee.co.uk/collections/not-basics

Current look –

Screenshot 2024-09-03 at 19.01.44.png
Screenshot 2024-09-03 at 19.01.44.png2880×970 176 KB

What we want –

Screenshot 2024-09-03 at 18.52.50.png
Screenshot 2024-09-03 at 18.52.50.png1374×732 136 KB

1 Like
2

Hey @emilyaugstudios

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 tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @emilyaugstudios

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

h2.hometitle.h4.align-center.has-paging.slider-nav.cc-animate-init.cc-animate-in { text-align: left; } button.slider-nav__btn.has-ltr-icon[name="prev"] { display: inline-block; float: right; } button.slider-nav__btn.has-ltr-icon[name="next"] { display: inline-block; position: absolute; right: -27px; }

Tech_Coding_0-1725387514106.png
Tech_Coding_0-1725387514106.png1323×398 285 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like