Alternate product image thumbnails not showing in mobile

Store Design

Topic summary

Issue: On cocooninglove.com product pages, the product media slider (alternate image thumbnails) disappears on mobile view under 768px. It displays correctly on larger devices like iPad and on desktop. Screenshots were provided comparing mobile (missing carousel) vs desktop (visible carousel).

Likely cause: A responsive rule or script is hiding/disabling the slider for small screens.

Suggested fixes:

  • CSS: In Online Store > Themes > Edit Code, check theme.css/theme.scss.liquid for selectors (e.g., .product-media) that apply display: none or visibility: hidden under 768px; remove/adjust those rules.
  • JavaScript: Review Assets (e.g., product.js) for viewport conditionals that disable the slider below a width threshold; modify to keep it enabled on mobile.
  • Testing: Use theme preview and browser developer tools to verify the slider renders and identify any hidden elements or layout issues.

Status: Guidance provided; no confirmation of resolution yet. Action items: audit CSS/JS for mobile-specific disabling and retest.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi I’m having trouble fixing an image viewing problem in my product pages.

URL is : cocooninglove.com (on any product page )

The product media slider is not showing under 768 px wide mobile view. See attached images

I’ve checked on a wider mobile mobile device, such as an Ipad, and everything looks fine.

thanks in advance for your help !

On mobile (768 px and less ) we cannot see alternate media carousel
On mobile (768 px and less ) we cannot see alternate media carousel311×618 33.6 KB

on desktop - we can see alternate media carousel
on desktop - we can see alternate media carousel1830×1080 179 KB

2

Hi @Cindy_SW

The issue with the product media slider not showing under 768px wide on mobile devices likely stems from a CSS rule or JavaScript condition hiding or disabling the slider for smaller screens. Here’s how you can fix it:

1- Check CSS:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Open the theme.css or theme.scss.liquid file: https://prnt.sc/WEF8B80zrNMI
  • Look for rules targeting .product-media or related classes and ensure they aren’t set to display: none; or visibility: hidden; under 768px width. Adjust to make the slider visible.

2- Check Javascript:

  • Inspect Assets for a file controlling the slider, such as product.js.
  • Look for viewport conditionals disabling the slider under a certain width and adjust accordingly.

3- Test Changes:

  • Use the Shopify theme preview to ensure the slider is visible on smaller screens after adjustments.

For further debugging, inspect the page using developer tools to identify hidden elements or layout issues.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy