How do I add a preloader on a product image in Shopify?

To add a preloader to product images in a Shopify store, you can use custom code to display a loading spinner or animation until the product image is fully loaded. Here's a basic approach to achieve this:

1. Modify Theme Files: Navigate to your Shopify theme files by going to "Online Store" > "Themes" in your Shopify admin dashboard. Then, click on "Actions" > "Edit code" for the theme you want to modify.

2. Edit Product Template: Locate the product template file where the product images are rendered. This could be product.liquid or similar depending on your theme. Look for the section of code that displays the product image.

3. Add Preloader HTML/CSS: Insert HTML and CSS code for the preloader before the product image code. Here's an example of HTML and CSS for a simple preloader:

htmlCopy code<!-- Preloader HTML -->
<div class="preloader"></div>

<!-- Product Image -->
<img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" class="product-image">

<!-- Preloader CSS -->
<style>
    .preloader {
        display: block;
        width: 50px;
        height: 50px;
        border: 3px solid #f3f3f3;
        border-radius: 50%;
        border-top: 3px solid #3498db;
        width: 50px;
        height: 50px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

4. Add JavaScript: Add JavaScript code to hide the preloader once the product image is fully loaded. You can use the load event listener for this purpose.

javascriptCopy code// JavaScript to hide preloader when image is loaded
document.addEventListener("DOMContentLoaded", function() {
    const preloader = document.querySelector('.preloader');
    const productImage = document.querySelector('.product-image');

    productImage.onload = function() {
        preloader.style.display = 'none';
    }
});

5. Save Changes: After making the necessary modifications, save your changes in the Shopify theme editor.

6. Test: Test the preloader by visiting a product page on your Shopify store and observing the loading behavior of the product image.

Keep in mind that this is a basic example, and you may need to adjust the HTML, CSS, and JavaScript code to fit your specific theme and requirements. Additionally, consider the impact on performance and user experience when adding preloader animations.