Collection list heading and button alignment

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.

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 –

What we want –

1 Like

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

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; }

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

1 Like