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

[georgiacollier4]

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. 

[webcraftio]

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:

<div class="product-gallery">
<div class="gallery-slider">
{% for image in product.images %}
<div class="gallery-slide">
<img src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt }}">
</div>
{% endfor %}
</div>
</div>

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

<!-- Include Flickity -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
var elem = document.querySelector('.gallery-slider');
var flkty = new Flickity(elem, {
cellAlign: 'center',
contain: true,
wrapAround: true
});
});
</script>

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

html
<div class="product-description">
{{ product.description }}
</div>
Need any help:

Contact: info@webcraftio.com orWhatsapp +442071936499

[PageFly-Richard]

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