Change product gallery from Stacked to Slideshow on mobile

To change product gallery from Stacked to Slideshow on Mobile, you can follow these.

#1. First, edit a Product

Next, click Edit Section

#2. Choose Slideshow (we will use code to change it to Stacked on Desktop)

#3. Next, use this code to Custom CSS to change Slideshow to Stacked on Desktop.

/* Stacked Product */
@media screen and (min-width:768px) {
.ProductItem-gallery-slides-item {
position: static !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
margin-bottom: 20px;
}
.ProductItem-gallery-slides:before {
padding: 0 !important;
}
.ProductItem-gallery-scroll {
display: none !important;
}

.ProductItem-gallery-carousel-controls {
display: none !important;
}}

#4. If you want to do this for a specific product only, you can edit Additional Info > Add a Code Block

Click plus icon to add a Code Block

and paste this code into Code Block

<style>
  /* Stacked Product */
@media screen and (min-width:768px) {
.ProductItem-gallery-slides-item {
    position: static !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 20px;
}
.ProductItem-gallery-slides:before {
    padding: 0 !important;
}
    .ProductItem-gallery-scroll {
    display: none !important;
}

.ProductItem-gallery-carousel-controls {
    display: none !important;
}}
</style>