Mobile product image gallery in Shopify’s Expanse theme shows dot pagination on phones; the merchant wants left/right arrows over the main image to navigate between photos.
Theme uses the Flickity carousel. The recommended fix is to enable arrows by setting prevNextButtons: true in the carousel options.
Specific instruction: in product.js, locate the slider configuration (let mainSliderArgs) and add prevNextButtons: true. If the option is missing, insert it into that object.
Actions taken: store URL shared; collaboration access requested and accepted. Another contributor provided exact file location guidance and a screenshot indicating where to add the option.
Artifacts central to understanding: screenshots of the current dot navigation and a code-location screenshot.
Status: A clear, actionable solution is provided and access has been granted for implementation. No final confirmation of the change being live yet.
Hi All,
The theme that I am using is the Expanse theme and I need some help on the mobile view.
On the product page when switching to mobile view the thumbnails turn to dots under the main image.
I am looking to turn these dots into arrows on the main image to people can go to next or previous pictures via the arrow and not by clicking on the dot.
Any help would be appreciated.
Kind Regards,
Little Poppets
Kindly share the store URL and Password if it password password-protected
Hi,
The URL is littlepoppets.co and its not pw protected as its a live site
Kind Regards,
Little Poppets
The carousel used in this theme is Flickity so there must be an option to show an arrow if not I have to search for the script and replace this code:
prevNextButtons: true;
If you can do it yourself that is great otherwise share your store collaboration code so I can do that for you
Hi,
The request code is : 7769
I would be grateful if you could do this as I do not want to break the site.
Kind Regards,
Little Poppets
kindly accept the request
Request has been accepted.
Thank You
Hi @LittlePoppetsco ,
Please send me the code of product.js file, I will help you add option for it
Hi @LittlePoppetsco ,
Please find ‘let mainSliderArgs’ and add code here:
Code:
prevNextButtons: true,