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

Shopify Discussion
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