If you use Simple Layout with Stacked Design.
and you want to change Slide Image on Mobile to Format: 1 image (top) – Other Images (under Product Description). You can follow these steps.
#1. First, use this code to Custom CSS to make Stacked Image on Mobile.
@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item {
position: static !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
margin-bottom: 20px;
transform: unset !important;
}
.ProductItem-gallery-slides:before {
padding: 0 !important;
}
.ProductItem-gallery-scroll {
display: none !important;
}
.ProductItem-gallery-carousel-controls, .ProductItem-gallery-current-slide-indicator {
display: none !important;
}}
We will have.
#2. Use this code to Code Injection > Footer to move images under Product Description
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function moveImages() {
if ($(window).width() < 768) {
$('.ProductItem-gallery-slides > div:nth-child(n+4)').insertAfter('section.product-details.ProductItem-details');
} else {
$('section.product-details.ProductItem-details + div').insertBefore('section.product-details.ProductItem-details').appendTo('.ProductItem-gallery-slides');
}
}
moveImages();
$(window).on('resize', moveImages);
});
</script>
<style>
@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item img {
width: 100% !important;
}
}
</style>
#3. Result
