How can i fix a moving product photo when i scroll down to description ?

Shopify Discussion

Topic summary

A user is experiencing an issue where product images move out of view when scrolling down to read the product description. They want to implement a fixed slideshow that allows flicking through product images while keeping the description below.

Proposed Solutions:

  • Custom Code Implementation: Modify the theme’s product.liquid or product-template.liquid file to create a slideshow using JavaScript libraries like Flickity or Swiper.js
  • Technical Steps Include:
    • Adding a slideshow container with product images
    • Including necessary CSS and JavaScript files in theme.liquid
    • Ensuring the product description is positioned below the slideshow in the HTML structure
  • Alternative Approach: Use CSS positioning or JavaScript to create a sticky/fixed effect for the image gallery

Status: The discussion remains open with no confirmation from the original poster about which solution they’ll pursue. Both respondents offered development assistance if needed.

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

My product image on my product theme layout page keeps moving when i scroll down to my description. I want it as a slide show where you can flick through my product images with the description below.

2

Customize Theme Code

If you’re comfortable with coding or have a developer, you can modify the theme code to implement a slideshow manually.

  1. Find the Product Template:

    • Go to Shopify Admin > Online Store > Themes > Actions > Edit Code.
    • Open the product.liquid or product-template.liquid file.

  2. Include a Slideshow Library: Use a JavaScript library like Flickity or Swiper.js to create a responsive slideshow.

  3. Modify the Product Image Section: Replace the current image layout with a slideshow container. For example:

{% for image in product.images %}
{{ image.alt }}
{% endfor %}

Add Styles and Scripts: Include the necessary CSS and JS for the slideshow in your theme’s theme.liquid file:

Ensure Description Placement: Ensure the product description is below the slideshow in the HTML structure:

html

{{ product.description }}
Need any help:

Contact: info@webcraftio.com orWhatsapp +442071936499

3

Hi,
This is Richard at PageFly - Shopify Advanced Page Builder app.

1. Understand the Issue:

  • Scrolling Issue: The current setup likely has the product image positioned in a way that it moves out of view as you scroll down the page to read the description.
  • Desired Outcome: You want a fixed image slideshow that remains visible while you scroll through the product description.

2. Solutions:

  • Theme Customization (Recommended for those comfortable with coding):

    • Edit Theme Code:
      • Access your theme editor in Shopify.
      • Locate the file responsible for displaying product images (usually in the sections or snippets folder).
      • Modify the CSS to position the image slideshow as a fixed element or use JavaScript to create a sticky effect.

Hoping my solution helps you solve your problem.
Best regards,
Richard | PageFly