Easily Add Image Zoom to Your Shopify Blog Posts Without an App

While I love so much about Shopify, the blogging functionality leaves a lot to be desired when compared with other platforms. Sure, you can insert photos into posts easily, but Shopify resizes them regardless of the image size you upload. This is certainly helpful for page load times and mobile optimization, but it’s frustrating when you want users to be able to click in for a larger view.

There are plenty of apps out there to fill gaps like this, but those monthly subscription fees can add up quickly. The lacking image zoom has been a persistent frustration for me — until recently. After some fruitless searching for a free solution, I decided to build my own. With a bit of custom JavaScript, I was able to add simple, clean image zoom functionality to my Shopify blog posts.

I’m happy to share my solution with you today. It works seamlessly and is easy enough to implement, even if you’re not a developer. Here’s how you can do it, too.

The Problem: Apps Galore

Shopify’s app store is incredibly diverse and powerful, with add-ons for nearly any functionality you may need. The downside? Many come with a monthly fee. In the case of image zoom, the apps I evaluated were overkill — packed with features I didn’t need, or they only worked on product pages.

Adding too many front-end apps also comes with the hidden cost of potentially slowing down your site’s performance. I needed a clean, no-frills image zoom solution for my blog posts — and I was determined not to pay for it.

The Solution: Custom JavaScript

Here’s the step-by-step process I followed to add image zoom to my blog post images — no apps required. If you’re not a developer, don’t worry. You can copy and paste the code, and I’ll explain exactly what’s happening. Let’s do it!

1. Create a Custom JavaScript File
   First, I created a new JavaScript file in my Shopify theme. Here’s how:

• From your Shopify admin, go to Online Store > Themes.
• Click the Actions menu to the left of the “Customize” button and select Edit Code.
• In the left-hand rail, expand the Assets folder. Click Add a new asset, then select the Create a blank file tab.
• Create a new JavaScript file by choosing js from the file extension menu and giving it a name (e.g., lightbox.js).

Create a new JavaScript file in the Assets folder of Shopify’s theme editor.

 

2. Add the Image Zoom Code

Paste the following code into your new lightbox.js file, then click the Save button in the upper-right corner:

 

document.querySelectorAll('p img').forEach((img) => {
  img.style.cursor = 'zoom-in'; // Add a zoom cursor to indicate interactivity
  img.addEventListener('click', () => {
    // Create a modal overlay
    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = 0;
    modal.style.left = 0;
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    modal.style.zIndex = 1000;

    // Get the full-size image URL
    const fullSizeUrl = img.src.replace(/_\d+x\d+/, ''); // Removes dimensions like _480x480

    // Create a full-size image element
    const fullImg = document.createElement('img');
    fullImg.src = fullSizeUrl; // Use the larger image URL
    fullImg.style.maxWidth = '90%';
    fullImg.style.maxHeight = '90%';
    fullImg.style.cursor = 'zoom-out'; // Indicate click-to-close functionality

    // Append the image to the modal
    modal.appendChild(fullImg);
    document.body.appendChild(modal);

    // Add a click event to close the modal
    modal.addEventListener('click', () => {
      document.body.removeChild(modal);
    });
  });
});

3. Link the JavaScript File to Your Theme

To ensure the JavaScript runs on your blog pages, you’ll need to include it in your theme:

• In the left-hand rail, find the Layout folder and open the theme.liquid file.
• Scroll to the bottom, and just before the closing </body> tag, add the following:

<script src="{{ 'lightbox.js' | asset_url }}"></script>

• Click Save to update your theme.liquid file.

Add the JavaScript file to the theme.liquid file.

4. Test Your Changes

Navigate to a blog post with images and click on one. You should now see a zoomed-in version of the image appear in a modal overlay.

Image zoom functionality in place on a Shopify blog post.

 

Breaking Down the Code

Here’s how it works and what each part of the JavaScript code does:

Select Images: 

document.querySelectorAll('p img').forEach((img) => {

This line selects all <img> tags within <p> tags in your blog post content.

Add a Zoom Cursor: 

img.style.cursor = 'zoom-in';

This adds a zoom-in cursor when hovering over images, signaling interactivity to users.

Create a Modal:

 

const modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = 0;
modal.style.left = 0;
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
modal.style.display = 'flex';
modal.style.justifyContent = 'center';
modal.style.alignItems = 'center';
modal.style.zIndex = 1000;

This block creates a full-screen overlay to display the zoomed-in image.

Display the Full-Size Image:

 

const fullImg = document.createElement('img');
fullImg.src = img.src.replace(/_\d+x\d+/, '');code>

This retrieves the original image by removing Shopify’s size parameters from the image URL.

Add a Close Event:

 

modal.addEventListener('click', () => {
    document.body.removeChild(modal);
});

Clicking anywhere on the modal removes it, closing the zoomed-in view.



Additional Considerations

• Fallback Behavior: Start with uploading high-resolution images to Shopify. This solution pulls the full-size image, so starting with low-res images may appear pixelated when zoomed.
• Browser Compatibility: Test your fix across different browsers (Chrome, Firefox, Safari) to ensure consistent and expected behavior.
• Custom Styling: If you want to customize the modal further (e.g., rounded corners or drop shadows), you can add additional CSS styles to the modal and fullImg elements.

Why it Works

This solution works by targeting all images inside <p> tags (the typical structure of blog content) and dynamically creating a modal to display a larger version of the image. The code removes Shopify’s size parameters (e.g., _480x480) to ensure the full-size image is shown.

Final Thoughts

I love this solution! It’s simple and cost-effective. With a little bit of custom code, you can achieve professional functionality without relying on third-party apps. This approach not only saves money but also keeps your Shopify store lean and fast — an important factor for user experience and SEO.

If you’ve been having the same issue with your Shopify blog images, I hope this solution works for you as well as it has for me. If you’re not comfortable working with code or need help implementing features like this, feel free to reach out — I’m always happy to help!

At Matt Traxler Design Studio, we specialize in Shopify store setup, migration, and customization to help businesses like yours succeed. Contact us to learn more about how we can enhance your Shopify store.

Need a custom app developed? Our partners at Dharma Software help Shopify merchants maximize their sales with specialized apps and seamless integrations.