How to change the image quality/resolution for Standard and Quantity Bundles

Introduction

Revy Unlimited Bundles App provides a flexible way to showcase your product bundles, but sometimes you might want to adjust the image quality or resolution to better suit your needs. By default, the bundle images are displayed in _medium resolution. This guide will walk you through the process of changing the image quality to a higher resolution, such as _1024x1024 , using a simple JavaScript code snippet. You can also modify the code to use other available formats.

This article focuses on the Bundle Widgets, and the provided solution works for both Quantity and Standard types of Bundles. For other types of Bundles, please consult the dev team.

Prerequisites

• Access to your Shopify admin panel
• Basic knowledge of editing theme files in Shopify

Step-by-Step Guide

Step 1: Access the Theme Editor

1. Log in to your Shopify admin panel.
2. Go to Online Store > Themes.
3. Click the Actions button next to your current theme, and select Edit code.

Step 2: Add the JavaScript Code

1. In the Layout folder, locate and open the theme.liquid file.
2. Scroll down to the bottom of the file, just before the </body> tag.
3. Add the following JavaScript code:

<script>
  window.revyBundleDataLayer = window.revyBundleDataLayer || []; 
  window.revyBundleDataLayer.push({onReady: function() {
    console.log("Bundle onReady"); 
    window.setTimeout(() => {
      document.querySelectorAll('.revy-bundle-image').forEach(function(img) {
        let src = img.src;
        let newSrc = src.replace(/_(pico|icon|thumb|small|compact|medium|large|grande|1024x1024|2048x2048)(?=\.(jpg|jpeg|png|webp|gif|bmp|tiff))/, '_1024x1024');
        if (newSrc === src) {
            newSrc = src.replace(/(\.(jpg|jpeg|png|webp|gif|bmp|tiff))$/, '_1024x1024$1');
        }
        img.src = newSrc;
      });
    }, 1000);
  }});
</script>

Step 3: Save Your Changes

1. Click the Save button in the top right corner to apply your changes.

Explanation of the Code

• window.revyBundleDataLayer: Ensures that the code runs after the Revy bundle is ready.
• setTimeout: Waits for 1 second before executing the code to ensure all images are loaded.
• querySelectorAll('.revy-bundle-image'): Selects all images with the class .revy-bundle-image .
• src.replace: Replaces the existing image size suffix with _1024x1024 .

Modifying the Code for Different Resolutions

If you want to change the image resolution to a different size, simply replace _1024x1024 in the code with one of the following available formats:

• _pico (16x16)
• _icon (32x32)
• _thumb (50x50)
• _small (100x100)
• _compact (160x160)
• _medium (240x240) - Default
• _large (480x480)
• _grande (600x600)
• _1024x1024 (1024x1024)
• _2048x2048 (2048x2048)

For example, to use _large resolution, modify the code as follows:

<script>
  window.revyBundleDataLayer = window.revyBundleDataLayer || []; 
  window.revyBundleDataLayer.push({onReady: function() {
    console.log("Bundle onReady"); 
    window.setTimeout(() => {
      document.querySelectorAll('.revy-bundle-image').forEach(function(img) {
        let src = img.src;
        let newSrc = src.replace(/_(pico|icon|thumb|small|compact|medium|large|grande|1024x1024|2048x2048)(?=\.(jpg|jpeg|png|webp|gif|bmp|tiff))/, '_large');
        if (newSrc === src) {
            newSrc = src.replace(/(\.(jpg|jpeg|png|webp|gif|bmp|tiff))$/, '_large$1');
        }
        img.src = newSrc;
      });
    }, 1000);
  }});
</script>

Additional Resources

For more detailed information about callbacks and API events, refer to our Callbacks API Events documentation.

To learn more about the Revy Unlimited Bundles App, visit the Bundle App page.

Conclusion

By following these steps, you can easily change the image quality or resolution for your Revy Unlimited Bundles. This will ensure that your product images are displayed in the best possible quality, enhancing the visual appeal of your bundles. If you have any questions or need further assistance, feel free to contact our support team via the email [email protected].