Align product thumbnail images with main product image (square)

Store Design
,

Topic summary

Misaligned product thumbnails on the product page, appearing too far left relative to the main image; requester wanted thumbnails aligned directly beneath the main image’s left edge.

Key actions:

  • Responders requested the storefront URL and password to inspect. The requester shared access details.
  • One responder noted the thumbnails looked balanced on their end and asked if the issue was already resolved.
  • Another responder provided concrete steps: Online Store > Edit Code > open theme.liquid and paste a small custom code snippet just above the tag to adjust thumbnail positioning.

Outcome:

  • After applying the snippet, the thumbnails aligned correctly, confirmed by the requester.
  • The issue is resolved; no further action needed.

Notes:

  • Screenshots were used to illustrate the misalignment and the corrected result.
  • “theme.liquid” is the main layout file in Shopify themes; the change was a minor template edit rather than a theme-wide redesign.
Summarized with AI on December 19. AI used: gpt-5.
1

Hello, I am trying to align the thumbnails that appear under my main product image exactly below on the left of the main image (see red line), currently they are showing too far over on the left if that makes sense! Please see screenshot below. Please could you help me to sort this? Many thanks

sfths_1-1726071618086.png
sfths_1-1726071618086.png1766Ă—853 183 KB

1 Like
2

@sfths , Could you kindly share your store url and password? I will check it for you :heart_eyes:

3

Hey @sfths

Share your Store URL and Password if enabled.

Best Regards,

Moeed

4

Hello @sfths
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

5

pw TheStillHome24

1 Like
6

BSSTekLabs_0-1726074407427.png
BSSTekLabs_0-1726074407427.png1507Ă—901 191 KB

I see they are in balance. Is your problem solved?

7

Hey @sfths

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

RESULT:

Moeed_0-1726074482891.png
Moeed_0-1726074482891.png1048Ă—877 567 KB

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

Best Regards,
Moeed

1 Like
8

Thanks that worked!

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.