How to add tapv feature in slideshow

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user wants to add Instagram-style tap navigation to a slideshow section on their Shopify product page, where tapping the image advances to the next slide.

Proposed Solution:

A detailed implementation guide was provided involving three main steps:

  1. Locate slideshow code - Navigate to sections/slideshow.liquid or similar file in the theme editor

  2. Add HTML structure - Insert an invisible tap overlay div within the slideshow container

  3. Implement functionality - Add CSS to position the overlay absolutely over the slideshow, plus JavaScript to:

    • Track current slide index
    • Listen for click events on the overlay
    • Cycle through slides sequentially
    • Show/hide slides based on current index

The solution includes complete code snippets for the HTML structure, CSS styling, and JavaScript event handling. The discussion remains open with no confirmation yet whether the solution was tested or successful.

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

Hi, how can I add a feature to my slideshow section so that when someone taps on the image, it instantly switches to the next slide?

Kind of like how it works with Instagram stories — when you tap, it immediately moves to the next one.

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy

(Just scroll all the way down to find the slideshow section)

Thanks a lot,
Tim

2 Likes
2

Step-by-step to implement tap-to-next in your slideshow section:

  1. Locate the Slideshow Section Code

In your Shopify admin, go to Online Store > Themes.

Click Actions > Edit code.

Find the file for your slideshow, usually something like:

sections/slideshow.liquid or sections/main-slider.liquid.

  1. Add a Tap Overlay & Script

You need to:

Add an invisible clickable layer over the image.

Use JavaScript to trigger the next slide when tapped.

Modify your slideshow HTML like this:

{% for slide in section.settings.slides %}

{% endfor %}

Add this CSS to your theme’s stylesheet (e.g., assets/base.css):

.tap-overlay {

position: absolute;

top: 0; left: 0;

width: 100%;

height: 100%;

z-index: 5;

}

.slideshow-container {

position: relative;

}

Then, add this JS snippet to assets/theme.js or directly in the section using tags:

document.addEventListener(“DOMContentLoaded”, function() {

const overlay = document.querySelector(“.tap-overlay”);

const slides = document.querySelectorAll(“#custom-slideshow .slide”);

let currentSlide = 0;

function showSlide(index) {

slides.forEach((slide, i) => {

slide.style.display = i === index ? “block” : “none”;

});

}

overlay.addEventListener(“click”, function() {

currentSlide = (currentSlide + 1) % slides.length;

showSlide(currentSlide);

});

showSlide(currentSlide); // Show the first slide initially