Visual Experience Platform
Help CenterRelease NotesBlogWebsite
  • VXP - Visual Experience Platform
    • The VXP
      • Token
    • Settings
      • My Account
        • Profile
        • Support
      • Organisation
        • General Organisation Settings
        • Billing
          • Payment
          • Invoices
          • Plan
        • Users
          • Users
          • Roles
        • Teams
      • Project
        • Branding
        • Subscription
        • Analytics
          • Standard Dashboards
            • Multi tenants
            • User Dashboard
            • DAM Storage
            • Workflows Monitoring
            • Traffic Origin
            • Caching (Volumetry)
            • CDN performance
          • Custom Dashboard
        • Access
          • API keys
          • Security templates
          • OAuth2
  • Digital Asset Management (DAM)
    • Library
      • Assets
        • Asset Details window
          • Asset actions
            • Regional settings
            • Context menu ("..." button)
            • Add to My favorites (heart icon)
            • Edit media (image, video, etc)
              • Edit image
              • Edit video (coming soon)
              • Edit design template (coming soon)
            • Share
          • Asset information tabs
            • General
            • Metadata
            • Variations
            • Comments
            • Approvals
            • History
      • Folders
      • Collections
      • Labels
      • Products
      • My favorites
      • Help
      • Sharebox
      • Airbox
      • Search and Filters
        • Faceted Search
    • Plugins & Connectors
      • Plugins
        • Adobe Creative Cloud
        • Adobe Commerce (Magento)
        • Canva
        • Contentful
        • Contentstack
        • Directus
        • Drupal
        • Opencart
          • Opencart (v4)
        • Prestashop
        • Shopware
        • Storyblok
        • Strapi (v4)
        • Sylius
        • Uniform CMS
        • Wordpress
      • Connectors
        • Akeneo PIM App
        • Canva App
        • CI-Hub
        • Commercetools FaaS App
        • Hygraph app
        • Kontent.ai
        • OneTeg
        • Pabbly Connect
        • Prismic
        • Shopify / Shopify plus app
        • Zapier automation
    • Settings
      • Library
        • Featured components
        • Interface customization
      • Metadata
        • Metadata Configuration
        • Assets
      • Tags
        • Configuration
        • Dictionary
      • Notifications
      • Automations
        • Post processing
        • Webhooks
        • Workflows
      • Storage
        • Providers
        • Upload
        • Video
        • Listing
        • Download
        • Custom routing
  • Visual AI
    • Welcome
    • Visual AI
      • Images
        • Classification models
          • Auto-tagging
          • Brand detect
          • Dominant color extraction
          • Faces
            • Face analysis
            • Face clustering
          • Image quality
          • OCR
          • Number Plate recognition
          • Product type
          • Property classification
          • Scene Classification
          • Sport Classification
        • Generative AI models
          • Image-to-text
          • Plate blurring
          • Quality improvement (remove artifacts)
          • Remove background
          • Text-to-Image
        • Moderation models
          • Face count
          • NSFW - Not Safe For Work
          • Real estate authenticity
          • Watermark detection
      • Videos
        • Face detection
      • Search & find assets
        • Text Search
        • Similar Assets
  • Portals
    • Welcome
    • Creating a Portal
    • Editing a Portal
      • Pages
      • Sections
      • Design
      • Fonts
    • Managing a Portal
      • Settings
      • Access
      • Users
      • Labeling, Cloning, Archiving
    • Publishing a Portal
  • Dynamic Media Optimization (DMO)
    • Welcome
      • Responsive libraries
      • Native plugins
      • 360° view builder
      • Service status
    • Insights
      • Delivery
      • Optimization
      • Alerts
      • Logs
    • Transformations
      • Image optimization
        • Operations
          • Width and height
          • Prevent enlargement
          • Crop
            • Automatic Gravity Crop
            • Positionable Crop
            • Focal point Crop
            • Face Crop
            • Face hide
            • Aspect ratio crop
          • Fit
          • Cropfit
          • Bound
          • Boundmin
          • Cover
          • Device pixel ratio
          • Flip
          • Rotate
          • Trim
          • Rounded corners
        • Filters
          • Adjustment
            • Brightness
            • Contrast
            • Saturate
          • Color manipulation
            • Color overlay
            • Grayscale
            • Duotone
          • Blur
          • Pixelate
          • Sharpen
        • Watermarking
          • Static watermark
          • Dynamic watermark
          • Text watermark
        • Image compression
          • Image formats
          • Optipress
      • Video optimization
        • Video API
          • Editing
            • Chapters
            • Combine
            • Trim
          • Optimizing
            • Convert
            • Compress
            • Transcode
        • On-the-fly-video optimization
      • Static content optimization
        • PDF to image
        • JS/CSS optimization
    • Invalidation
    • Settings
      • Asset Origin
        • AWS S3 or any other S3-compatible storage provider
        • Google Cloud storage (GCP)
        • Azure Blob storage
        • Own HTTP-based Storage
      • Images
        • Compression
        • Optimization
        • Watermark
      • Static content
      • Delivery
        • CNAME
        • URL format
        • Rules
        • Security
        • Caching
        • Default behaviors
  • Developers / Headless
    • Headless DAM
      • DAM APIs
        • API Authentication
        • API Reference
      • Command Line Interface (CLI)
      • Media Asset Widget(MAW)
        • Overview
        • Developer reference
        • V2 End-of-life
Powered by GitBook
LogoLogo

Quick links

  • Go to website
  • Legal Center

©2024 Scaleflex SAS

On this page
  • Installation
  • Usage
Export as PDF
  1. Digital Asset Management (DAM)
  2. Plugins & Connectors
  3. Connectors

Shopify / Shopify plus app

DAM Shopify app

PreviousPrismicNextZapier automation

Last updated 6 months ago

Installation

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

  • 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 to get one;

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

  • 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' -%}">

Import multiple images to the product using CSV

Require:

  • Configuration of your application in Shopify

  • Installing the Product Webhook

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:

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

Note: Read more about attribute optimizer following this

To import multiple images you need to follow the document of Shopify:

LINK
https://help.shopify.com/en/manual/products/import-export/using-csv#adding-multiple-product-images
3KBproducts_example.csv
Shopify App Store
Create a support request
contact us
Add template