Buy me a coffee

Move product title above image

#1. Store Page
Use this code to Code Injection Footer

<!-- Store page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.grid-item').each(function() {
    var title = $(this).find('.grid-title');
    var imageWrapper = $(this).find('.grid-image-wrapper');
    imageWrapper.before(title);
  });
});
</script>
<style>
@media screen and (min-width:768px) {
.grid-title {
    min-height: 80px;
}
}
</style>

Move Product Title Above Image 1 Min
Result
Move Product Title Above Image 2 Min

#2. Product Detail (Desktop)
Use this code to Code Injection > Footer

<!-- Product Detail - Desktop -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
function run() {
    if ($(window).width() > 768) {
    $('h1.ProductItem-details-title').prependTo('.ProductItem-gallery');
} else {

}
}
    run();
    window.addEventListener('resize', run)
});
</script>
<style>
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    flex-direction: column;
}
</style>

Move Product Title Above Image 3 Min
Result
Move Product Title Above Image 4 Min

#3. Product Detail (Mobile)
Use this code to Custom CSS box

<!-- Product Detail Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
function run() {
    if ($(window).width() <= 767) {
    $('h1.ProductItem-details-title').prependTo('.ProductItem-gallery');
} else {

}
}
    run();
    window.addEventListener('resize', run)
});
</script>
<style>
@media screen and (max-width:767px) {
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    flex-direction: column;
}}
</style>

Move Product Title Above Image 5 Min
Result
Move Product Title Above Image 6 Min

#4. Product Block
Use this code to Code Injection > Footer

<!-- Product Block -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.product-block').each(function() {
    var title = $(this).find('.product-title');
    var imageWrapper = $(this).find('.image-container');
    imageWrapper.before(title);
  });
});
</script>
<style>
.product-title {
    margin-bottom: 10px !important;
    display: block;
}
</style>

Move Product Title Above Image 7 Min
Result
Move Product Title Above Image 8 Min