#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>
Result
#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>
Result
#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>
Result
#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>
Result