In the mobile view of product page (Blank theme) there are dots below the image gallery to indicate the active image.

I tried to changed the color of those dots (orange by default) in the file I use for my custom theme's customizations. However the dots classes are defined in a gallery.css file, I guess that's why the new values I set in my custom theme haven't been applied.

How can I override / extend the values from the gallery.css file?

enter image description here

1 Answer 1


To override, copy lib/web/mage/gallery/gallery.less to your theme: theme_dir/web/mage/gallery/gallery.less. Make the desired changes in this file. Now recompile less files by removing contents of pub/static and var/view_preprocessed and then flush cache and browser cache.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.