Impulse theme: Product image thumbnails not flush

Store Design
,

Topic summary

A user is experiencing layout issues with product image thumbnails in the Shopify Impulse theme. The thumbnails are not displaying flush or aligned properly as desired, and the user wants to match a specific reference layout.

Two main issues identified:

  • Product image thumbnails appearing misaligned or “weird” when positioned beside the main product image
  • Unwanted slider dots appearing below the product image that need removal

Partial solution provided:
A CSS code snippet was shared to hide the slider dots:

ol.flickity-page-dots {
    display: none !important;
}

Instructions included adding this to theme.css/base.css/style.css via the Shopify theme editor.

Current status:
The thumbnail alignment issue remains unresolved. The helper requested access to view the actual problem but reported still seeing the default layout even after a preview link was provided. The discussion is ongoing as the primary layout concern has not been addressed.

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

Hello everyone,

I am using the impulse theme and I want to use the thumbnails besides the product image.

When I do this it comes out wierd.

  1. In the first screenshot is my store but I want to be like the second screenshot. How can I fix this?

  2. How can I remove the slider dots as seen below the product image?

My website: ozado.de

Help would be much appreciated.

Best regards,

Peter

Screenshot 2024-03-19 at 18.19.06.png
Screenshot 2024-03-19 at 18.19.06.png1002×1228 320 KB

Screenshot 2024-03-19 at 18.21.23.png
Screenshot 2024-03-19 at 18.21.23.png1008×920 238 KB

2

Hi @Peter2020 Thanks for providing the URL, but I am not able to see the format of image that you are specifying in the screenshot, not in mobile version as well, As without looking into it I may not be able to provide you the perfect solution.

Regarding the 2nd issue: Please add the code in your theme.css/base.css/style.css file which is available in your theme.

ol.flickity-page-dots {
    display: none !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1710932969253.png
sahilsharma9515_0-1710932969253.png748×496 273 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Thanks for the help.

Can you see it with this link? https://0wrye3wdecb3tlx1-76492144986.shopifypreview.com

4

Hi @Peter2020 No I am still seeing it:

sahilsharma9515_0-1711000185057.png
sahilsharma9515_0-1711000185057.png681×517 148 KB

sahilsharma9515_1-1711000202419.png
sahilsharma9515_1-1711000202419.png1824×871 225 KB

Best Regards

Sahil