Product page image slider design

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

A user implemented Flickity slider arrows on a Shopify product page but encounters three technical issues:

Main Problems:

  • Arrow clicks are non-functional on mobile devices
  • A white border appears thicker at the bottom of images compared to other sides
  • Clicking variant capsules (e.g., color/bundle options) doesn’t display the corresponding product image

Community Response:
A helper couldn’t reproduce the mobile arrow issue on iPhone 15, Samsung S24+, Galaxy A54, and requested specific device/OS details for troubleshooting.

Current Status:
The user clarified that variant images are already configured in the admin panel, suggesting the issue stems from custom code implementation rather than backend settings. The white border issue was confirmed as distinct from shadow effects. The discussion remains ongoing with no resolution yet, awaiting further technical diagnosis of the Flickity integration conflicts.

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

Hi there,

I added slider arrows to my product page https://taneraskin.com/products/peeling-handschuh with a Code by “Flickity”. I now have the following problems:

  • Clicking on arrows does nothing in mobile version

  • White border at the bottom (see photo) in mobile version

  • When I click on a variant capsule (e.g. color or bundle) I want the respective image to come up

isabellemaria_0-1731077252367.png
isabellemaria_0-1731077252367.png1179×2556 253 KB

How can I fix these issues?

Thank you for your help!

Best,

Isabelle

2

Hallo Isabelle,

du bist im deutschsprachigen Teil der Community gelandet, hier musst du nicht unbedingt auf Englisch schreiben. :slightly_smiling_face:

Zu deinen Punkten:

  1. Das konnte ich nicht nachbilden. Welches OS & Smartphonemodell nutzt du? Auf einem iPhone 15, 12 Pro, S24+ und A54 habe ich keinerlei Probleme erkannt.
  2. Meinst du das mit dem Shadow? Das kommt, weil das Element angewählt wird.
  3. Dies musst du im Administrationsbereich beim Produkt selbst ändern. Variante auswählen und das entsprechende Produktbild hinterlegen.
3

Hallo Tobias,

  1. Wenn man auf die Pfeile direkt klickt, tut sich bei mir nichts.

  2. Nein ich meine den weißen Streifen, der am unteren Bildrand eingeblendet wird. Er ist dicker wie an allen anderen Seiten.

  3. Ich habe bereits die entsprechenden Bilder bei den Varianten hinterlegt, daran kann es nicht liegen. Ich denke, es liegt an meinem Code, weil ich ihn verändert habe. Aber ich weiß nicht, wo das Problem liegt. Weißt du es?

Viele Grüße,

Isabelle