Auto Scroll Review Section (Empire Theme)

Technical Q&A
,

Topic summary

A user needed to add auto-rotation functionality to the review/testimonial section on their homepage using the Empire theme, as this feature wasn’t available in the theme settings.

Initial Solution:

  • A community member provided JavaScript code to be added to the empire.js file
  • The code uses setInterval to automatically click through Flickity carousel buttons
  • Initial implementation worked on desktop but affected the featured collection section on mobile instead of testimonials

Resolution:

  • An updated script was provided with more specific selectors (.testimonials .flickity-button.next and .testimonials .flickity-button.previous)
  • This targeted only the testimonial section, preventing conflicts with other carousel elements
  • The solution successfully resolved the issue

Status: Resolved - the auto-scroll feature now works correctly across devices.

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

Hello,

I am trying to figure out a way to make the review section on my homepage auto rotate, but there isn’t an option for this in the theme settings. I’m wondering how I can do this in the theme code. Thanks in advance!

Website: https://chinchileproducts.com

Thanks,

Tony

2

Hi @ChinChile ,

Please paste below script code in your

online store → edit code → assest - > empire.js

Put below code at very end of the JS file

document.addEventListener("DOMContentLoaded", function(event) { 
var direction = 0;
setInterval(function(){
    console.log(direction,"direction");
    if(direction == 0){
        var _next = document.querySelector(".flickity-button.next").hasAttribute("disabled");
            console.log(1,"next",_next);
        if(_next === false){
            document.querySelector(".flickity-button.next").click()
        }else{
            direction = 1
        }
    }
    if(direction == 1){
            console.log(2,"next");
        var _next = document.querySelector(".flickity-button.previous").hasAttribute("disabled");
        if(_next === false){
            document.querySelector(".flickity-button.previous").click()
        }else{
            direction = 0
        }
    }
},5000)
});

Hope it will help…

3

Hi @gr_trading ,

Thank you for the reply. I added the code and it was working on desktop, but on mobile it was affecting the featured collection instead of the testimonial section.

4

Hi @ChinChile ,

Please find the updated script

document.addEventListener("DOMContentLoaded", function(event) { 
	var direction = 0;
	setInterval(function(){
		console.log(direction,"direction");
		if(direction == 0){
			var _next = document.querySelector(".testimonials .flickity-button.next").hasAttribute("disabled");
				console.log(1,"next",_next);
			if(_next === false){
				document.querySelector(".testimonials .flickity-button.next").click()
			}else{
				direction = 1
			}
		}
		if(direction == 1){
				console.log(2,"next");
			var _next = document.querySelector(".testimonials .flickity-button.previous").hasAttribute("disabled");
			if(_next === false){
				document.querySelector(".testimonials .flickity-button.previous").click()
			}else{
				direction = 0
			}
		}
	},5000);
})
1 Like
5

This fixed it. Thanks!