Use DAT URL in Shopify

Overview

This guide outlines the method for utilizing Bynder Dynamic Asset Transformation (DAT) URLs directly within a Shopify theme.

By default, Shopify serves images via its own CDN. To leverage Bynder's on-the-fly transformations (DAT), we utilize the Alt Text field as a data carrier. This allows us to pass both the descriptive text and the specific DAT URL from Bynder to Shopify, which can then be parsed by the Liquid theme code.

Phase 1: Integration Configuration

First, you must configure the connector to inject the DAT URL into the Shopify Alt Text field using a specific delimiter.

• Navigate to your Dataggo Connect Platform configuration.
• Locate the Alt Text mapping configuration for your assets.
• Update the pattern to the following format:

%%name%%||%%transformBaseUrl%%

Understanding the Pattern:

• %%name%%: Represents the name or description of the asset (standard Alt Text).
• ||: Functions as a unique separator (delimiter) between the text and the URL.
• %%transformBaseUrl%%: Represents the direct Bynder Dynamic Asset Transformation URL.

Result: Once synchronized, the Alt Text in Shopify will look like this:

Blue Running Shoes||https://subdomain.bynder.com/transform/asset-id

Phase 2: Shopify Theme Modification

Next, modify your Shopify theme to parse the Alt Text and extract the DAT URL for image rendering.

1. Access your Shopify Admin panel.
2. Navigate to "Online Store" > "Themes".
3. Click "Actions" > "Edit Code".
4. Locate the relevant Liquid template file where product images are rendered (e.g., product-media.liquid or product-media-gallery.liquid, card-product, ...).
5. Replace the existing image rendering code with the following snippet:

{% assign alt_text_parts = media.alt | split: '||' %}
{% assign alt_text = alt_text_parts[0] %}
{% assign dat_url = alt_text_parts[1] %}
{% if dat_url %}
    <img src="{{ dat_url }}" alt="{{ alt_text | escape }}">
{% else %}
  <img src="{{ media.preview_image | img_url: 'master' }}" alt="{{ media.alt }}">
{% endif %}

Explanation of the Code:

• The split filter divides the Alt Text into two parts using the '||' delimiter.
• alt_text captures the descriptive text for accessibility.
• dat_url captures the Bynder DAT URL.
• The if statement checks if a DAT URL exists. If it does, it uses that URL for the image source; otherwise, it falls back to the default Shopify image.
• The alt attribute is set to the descriptive text for accessibility.
• Save your changes.

One of the main benefits of using DAT is the ability to transform images on the fly by appending parameters to the URL directly in your Liquid code. This allows you to serve optimized images (e.g., specific sizes for mobile vs. desktop) without creating new assets in the PIM/DAM.

You can append parameters using standard URL query strings.
Learn how to create a DAT derivative using URL parameters.

For example, to create a centered crop of 100x200 pixels, you would modify the code to add ?io=transform:fill,width:100,height:200,gravity:center

<img src="{{ dat_url }}?io=transform:fill,width:100,height:200,gravity:center" alt="{{ alt_text | escape }}">

Important Notes

• We are not Shopify integrators. For assistance with theme modifications, please consult a qualified Shopify developer.
• The above code snippets are examples and may require adjustments based on your specific Shopify theme structure.
• This must be applied to each template where product images are rendered.