# Shopify / Shopify plus app

### Installation <a href="#installation" id="installation"></a>

* The DAM x Shopify App can be installed from the [Shopify App Store](https://apps.shopify.com/filerobot-by-scaleflex).
* [Create a support request](https://scaleflex.zendesk.com/hc/en-gb/requests/new) to be helped adding the App to your store.

#### Prerequisites <a href="#prerequisites" id="prerequisites"></a>

* Have a DAM account, with the DAM App installed. If you don't have an account yet, please [contact us](https://www.scaleflex.com/request-a-demo) to get one;
* Create the Security Template Identifier (SEC) to use the app (Settings > Access > Security templates tab > [Add template](/vxp-visual-experience-platform/settings/project/access/security-templates.md))
* You need to  have a store on Shopify.

#### Step 1. Install and configure <a href="#step-1.-install-and-configure" id="step-1.-install-and-configure"></a>

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 <a href="#step-2.-add-filerobot-snippets" id="step-2.-add-filerobot-snippets"></a>

* 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 <a href="#step-3.-install-filerobot-webhooks" id="step-3.-install-filerobot-webhooks"></a>

* 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.

<figure><img src="https://docs.scaleflex.com/~gitbook/image?url=https%3A%2F%2F3586816136-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl0Yvbyw1t10jWRzoi0FW%252Fuploads%252F2VkvJF7fIe8dpvpx1IUl%252Fscreenshot_1695917113.png%3Falt%3Dmedia%26token%3Ddd90d87c-cadf-4706-b316-942a56b943c1&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=360c9c4f&#x26;sv=1" alt=""><figcaption></figcaption></figure>

### Usage <a href="#usage" id="usage"></a>

#### Upload your Shopify product media to DAM <a href="#upload-your-shopify-product-media-to-filerobot" id="upload-your-shopify-product-media-to-filerobot"></a>

* 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.

<figure><img src="https://docs.scaleflex.com/~gitbook/image?url=https%3A%2F%2F3586816136-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl0Yvbyw1t10jWRzoi0FW%252Fuploads%252FtW2uPJPQWMoYd92buMur%252Fimage2.png%3Falt%3Dmedia%26token%3D82796ceb-c6ee-4d6f-8779-ec728a67c4e8&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=b1d886fe&#x26;sv=1" alt=""><figcaption></figcaption></figure>

#### Sync media from DAM Hub to Shopify: <a href="#sync-media-from-filerobot-hub-to-shopify" id="sync-media-from-filerobot-hub-to-shopify"></a>

<figure><img src="https://docs.scaleflex.com/~gitbook/image?url=https%3A%2F%2F3586816136-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl0Yvbyw1t10jWRzoi0FW%252Fuploads%252FqE9S0BUe5jbP8t5eTbun%252Fimage.png%3Falt%3Dmedia%26token%3Debc144b3-3722-4197-992e-cc49cb09461b&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=d996d002&#x26;sv=1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://docs.scaleflex.com/~gitbook/image?url=https%3A%2F%2F3586816136-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl0Yvbyw1t10jWRzoi0FW%252Fuploads%252FrIerr90QLcbCAR4Hmy78%252Fimage.png%3Falt%3Dmedia%26token%3D8cac2118-2995-49cd-8aa7-3fddd8003883&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=40dffe62&#x26;sv=1" alt=""><figcaption></figcaption></figure>

#### Display images on your site <a href="#display-images-on-your-site" id="display-images-on-your-site"></a>

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.

<figure><img src="https://docs.scaleflex.com/~gitbook/image?url=https%3A%2F%2F3586816136-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fl0Yvbyw1t10jWRzoi0FW%252Fuploads%252F6SxY7hqxLPbrbiEv97jY%252Fimage1.png%3Falt%3Dmedia%26token%3Db3309c0e-1905-4163-bf14-41efb0a21edb&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=e976a346&#x26;sv=1" alt=""><figcaption></figcaption></figure>

#### Display any DAM image on pages <a href="#display-any-filerobot-image-on-pages" id="display-any-filerobot-image-on-pages"></a>

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](/dynamic-media-optimization-dmo/transformations/image-optimization.md)

#### Import multiple images to the product using CSV <a href="#import-multiple-images-to-the-product-using-csv" id="import-multiple-images-to-the-product-using-csv"></a>

**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](https://3586816136-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl0Yvbyw1t10jWRzoi0FW%2Fuploads%2F2XotxKSut0s6ZOu7VAYn%2Fproducts_example.csv?alt=media\&token=2897dbe1-8fef-4720-98f1-fe844ea1a6bd)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.scaleflex.com/digital-asset-management-dam/plugins-and-connectors/connectors/shopify-shopify-plus-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.