I need to show gallery arrow always visible on product gallery page.

I tried in gallery.phtml variable arrows="always", but its not working.

I want to show both arrow always visible on product gallery.

I need to know that How to overide fotorama.js in a custom theme.

Path of fotorama lib/web/fotorama


I got the solution after some R&D on fotorama.js I override the file of fotorama.js in My_Theme.


I want to Enable both gallery nav arrow and don't want to hide nav arrow when slider goes up and down in vertical way arrow. Also i want to enable that arrow only if image is more than 4.

Lets see in fotorama.js for enabling both arrow.

line no 22.

//wrapToggleArrowsClass = wrapClass + '--toggle-arrows',
  wrapToggleArrowsClass = wrapClass + '',

line no 33.

//arrDisabledClass = arrClass + '--disabled',

  arrDisabledClass = arrClass + '',

From Line no 2635 to 2664

function arrsUpdate() {
            /* var disablePrev = disableDirrection(0),
                disableNext = disableDirrection(1);
                .toggleClass(arrDisabledClass, disablePrev)
                .attr(disableAttr(disablePrev, false));
                .toggleClass(arrDisabledClass, disableNext)
                .attr(disableAttr(disableNext, false));

        function thumbArrUpdate() {
            /*var isLeftDisable = false,
                isRightDisable = false;
            if (opts.navtype === 'thumbs' && !opts.loop) {
                (activeIndex == 0) ? isLeftDisable = true : isLeftDisable = false;
                (activeIndex == opts.data.length - 1) ? isRightDisable = true : isRightDisable = false;
            if (opts.navtype === 'slides') {
                var pos = readPosition($navShaft, opts.navdir);
                pos >= navShaftTouchTail.max ? isLeftDisable = true : isLeftDisable = false;
                pos <= navShaftTouchTail.min ? isRightDisable = true : isRightDisable = false;
                .toggleClass(arrDisabledClass, isLeftDisable)
                .attr(disableAttr(isLeftDisable, true));
                .toggleClass(arrDisabledClass, isRightDisable)
                .attr(disableAttr(isRightDisable, true));

Comment out these two functions, after this your gallery arrow will not hide.

For the enabling nav arrow when image is more than 4.

"navarrows": <?php /* @escapeNotVerified */  echo (($block->getVar("gallery/navarrows") == 'true') && ($block->getGalleryImages()->count() > 4)) ? 'true' : 'false'; ?>,

Arrow enable is more than 4 answer source. display arrow if image count is greater than 4

Now every thing is as per requirement.


You will have to write custom js for it as fotorama by default don't provide functionality to always show arrrows

I tried in gallery.phtml variable arrows="always", but its not working.

arrows param in gallery.phtml corresponds to data-arrows for fotorama js, which takes only true and false value and tells if to render the arrows or not.

You can check it here - http://fotorama.io/customize/arrows-click-swipe/

All the options for fotorama can be checked here - http://fotorama.io/customize/


If you want to override fotorama js you should copy it from /lib/web/fotorama/fotorama.js to app/design/[Vendor]/[Theme]/web/fotorama/fotorama.js and modify it there.

  • I done this task by modifying in fotorama.js in ProjectRoot/lib/web/fotorama/fotorama.js..... Only i need to know that how can overide this file in my theme and Done changes there..not in Lib. pls help – Deepak Rai Aug 29 '18 at 6:43
  • Please check edit. – Vivek Kumar Aug 30 '18 at 15:22
  • Also please post your modifications so other users who come looking for this can see that as well, – Vivek Kumar Aug 30 '18 at 15:23
  • please see the answer. – Deepak Rai Sep 1 '18 at 6:23
  • I doing same and works well in developer mode but not in production. Please guide me – Suman Singh Sep 7 '18 at 5:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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