How to Add Image in Shopify Code [in 2024]

Written by
Sellkite Support Team
Date published
July 9, 2024

Adding an image to your Shopify store can significantly enhance its visual appeal and provide a better user experience. Whether you're a beginner or an experienced developer, this comprehensive guide will walk you through the steps to add an image to your Shopify store's code. By following these instructions, you can ensure that your images are displayed correctly and professionally.

Understanding Shopify's File Structure

Before diving into the code, it's essential to understand how Shopify's file structure works. Shopify uses a templating language called Liquid, which allows you to manipulate the content of your store dynamically. The main files you'll be working with include:

  • theme.liquid: The primary template file that controls the overall layout of your store.
  • section files: These files define different sections of your store, such as the header, footer, and product pages.
  • assets folder: This folder contains all your images, stylesheets, and JavaScript files.

Preparing Your Image

Before adding an image to your Shopify store, you need to ensure it's optimized for the web. Here are some tips:

  1. Format: Use JPEG or PNG formats for your images. JPEG is ideal for photographs, while PNG is better for images with transparency.
  2. Size: Compress your images to reduce their file size without compromising quality. Tools like TinyPNG or ImageOptim can help with this.
  3. Name: Use descriptive file names for your images, such as "summer-collection-2024.jpg" instead of "IMG1234.jpg." This helps with SEO and organization.

Uploading the Image to Shopify

Once your image is ready, you need to upload it to your Shopify store. Follow these steps:

  1. Log in to your Shopify admin panel.
  2. Navigate to "Online Store" > "Themes."
  3. Select "Actions" > "Edit code" for the theme you want to edit.
  4. In the left sidebar, find the "Assets" folder and click "Add a new asset."
  5. Upload your image file from your computer.

Your image is now uploaded and ready to be used in your Shopify store.

Adding the Image to Your Code

Now that your image is uploaded, you can add it to your Shopify store's code. Here are a few common scenarios where you might want to add an image:

Adding an Image to the Homepage

To add an image to your homepage, follow these steps:

  1. Open your "index.liquid" file in the "Sections" folder.
  2. Find the location where you want to add the image.
  3. Insert the following Liquid code:
  4. <div class="homepage-image">
      <img src="{{ 'your-image-file.jpg' | asset_url }}" alt="Descriptive Alt Text">
    </div>
    

    Replace "your-image-file.jpg" with the name of your uploaded image and "Descriptive Alt Text" with a brief description of the image for accessibility.

Adding an Image to a Product Page

To add an image to a product page, follow these steps:

  1. Open your "product.liquid" file in the "Sections" folder.
  2. Find the location where you want to add the image.
  3. Insert the following Liquid code:
  4. <div class="product-page-image">
      <img src="{{ 'your-image-file.jpg' | asset_url }}" alt="Descriptive Alt Text">
    </div>
    

    Again, replace "your-image-file.jpg" with the name of your uploaded image and "Descriptive Alt Text" with a brief description of the image.

Adding an Image to the Header or Footer

To add an image to your header or footer, follow these steps:

  1. Open your "header.liquid" or "footer.liquid" file in the "Sections" folder.
  2. Find the location where you want to add the image.
  3. Insert the following Liquid code:
  4. <div class="header-image">
      <img src="{{ 'your-image-file.jpg' | asset_url }}" alt="Descriptive Alt Text">
    </div>
    

    or

    <div class="footer-image">
      <img src="{{ 'your-image-file.jpg' | asset_url }}" alt="Descriptive Alt Text">
    </div>
    

    Replace "your-image-file.jpg" with the name of your uploaded image and "Descriptive Alt Text" with a brief description of the image.

Styling Your Image

To ensure your image looks great on your Shopify store, you may want to add some custom CSS. Here's an example of how to style your image using CSS:

  1. Open your "theme.css" or "styles.css" file in the "Assets" folder.
  2. Add the following CSS code:
  3. .homepage-image img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    
    .product-page-image img {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }
    
    .header-image img, .footer-image img {
      width: 50px;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    

    This CSS code ensures that your images are responsive and fit well within their respective containers.

Testing Your Changes

After adding your image and styling it, it's crucial to test your changes to ensure everything looks as expected. Here's what you should do:

  1. Preview your changes in the Shopify admin panel.
  2. Check how your image appears on different devices (desktop, tablet, and mobile).
  3. Ensure that the image loads correctly and doesn't affect the page's performance.

Troubleshooting Common Issues

If your image doesn't appear as expected, here are some common issues and solutions:

  • Image not loading: Double-check the file name and path in your Liquid code. Ensure the image is uploaded to the correct folder.
  • Image not responsive: Make sure you've added the appropriate CSS to style your image responsively.
  • Image affecting page performance: Compress your image further to reduce its file size. Use tools like TinyPNG or ImageOptim.

Conclusion

Adding an image to your Shopify store's code is a straightforward process that can significantly enhance your store's visual appeal. By following the steps outlined in this guide, you can ensure that your images are displayed correctly and professionally. Remember to optimize your images, upload them to the correct folder, and use the appropriate Liquid code to add them to your store. With a little bit of CSS, you can style your images to look great on any device. Happy coding!