Shopify / Shopify plus app

Installation

• The DAM x Shopify App can be installed from the Shopify App Store.

• Create a support request to be helped adding the App to your store.

Prerequisites

• Have a DAM account, with the DAM App installed. If you don't have an account yet, please contact us to get one;

• Create the Security Template Identifier (SEC) to use the app (Settings > Access > Security templates tab > Add template)

• You need to have a store on Shopify.

Step 1. Install and configure

In Shopify, open the DAM app in the Apps menu item and click the button “Configuration”

• Fill-in your DAM token, CNAME (not required), Security Template Identifier (SEC), Upload Directory (not required, the default will be "/"), and press “Save”

Step 2. Add DAM Snippets

• Add DAM snippets to your theme: In modal Configuration, click the button “Update Snippets” to update or create new DAM snippets in your theme store.

Step 3. Install DAM Webhooks

• Add product webhooks for actions create/update/delete, that will check and update images from DAM Hub when the user has a permission to create/update/delete.

Usage

Upload your Shopify product media to DAM

• In Shopify, open the DAM app from the Apps menu item.

• Click the button “Sync All Product Media”. The process will run in the background for a few minutes depending on the number of images in your store. It will download all product images from Shopify and store them in your DAM Library.

Sync media from DAM Hub to Shopify:

• Fill in your product name. Then press "Sync":

Display images on your site

You can add DAM images to your website by editing your theme's code.

The following snippets provide the functionality to display images on your website:

• filerobot-image-tag.liquid: Builds an image tag with multiple sources to render product images on your website lazily, applying transformations.

• filerobot-product-media.liquid: Uses filerobot-image-tag to render product images on your website, with optional transformations.

• filerobot-url.liquid: This will help you build a DAM URL to deliver an image on your website with any transformations that you want to apply.

You can use these snippets in your theme's code, referencing them in other snippets or sections.

Display any DAM image on pages

You can use filerobot-image-tag.liquid or filerobot-url.liquid to display DAM image on your page

• First you will need to assign variable fr_metafields:

  Example:

{%- assign fr_metafields = product.metafields.filerobot_galleries -%}

• To render image tag

  Example:

{% render 'filerobot-image-tag', media: media.preview_image, metafields: fr_metafields, class: '', width: 1100, height: 1100, sizes: '(min-width: 750px) calc(100vw - 22rem), 1100px', media_id: media.id %}

• To get DAM image url

  Example:

<img src="{%- render filerobot-url', media: media.preview_image, metafields: fr_metafields, optimizer: '?grey=1&width=500&height=500' -%}">

Note: Read more about attribute optimizer following this LINK

Import multiple images to the product using CSV

Require:

• Configuration of your application in Shopify

• Installing the Product Webhook

To import multiple images you need to follow the document of Shopify: https://help.shopify.com/en/manual/products/import-export/using-csv#adding-multiple-product-images

Copy the image URL in the Hub and paste the URL to the column Image Src in the CSV file. After that, you can use the function "Import" on the Products page to update the product with your CSV file.

Example file:

3KBproducts_example.csv

When Shopify import is done, the DAM webhook will convert the image links from Shopify CDN to DAM CDN link.