Product Photo Issue

[TuneToyz]

My website tunetoyz.com is encountering a problem with the images below the product images how can I fix it?

[BSSCommerce-HDL · Accepted solution]

Hi @TuneToyz, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.product .flickity-slider {
    top: 80px !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[Sweans]

Hi @TuneToyz ,

We can resolve the issue by adding CSS to the product template. Please follow these steps to fix the issue across all devices:

1. In your Shopify admin, navigate to "Online Store" under Sales Channels. Click the "Customize" button for the theme you wish to modify. If you want to make changes directly to the live theme, select the first theme. Refer to the screenshot for guidance.

2. Click on a product shown on the homepage to be directed to the product template. Click on a blank area to add the CSS in the custom CSS section. Please refer to the screenshot (SCR087 02, SCR087 03).

3. Add the following code to the custom CSS section and save:

#shopify-section-template--17965974323412__main .product__image-thumbnail .flickity-lazyloaded {
transform: translateY(0) !important;
}

Please refer to the screenshots for more details.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans