Shopify / Shopify plus app

Filerobot Shopify app

Installation

• The Filerobot 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 Filerobot Asset Hub account, with the Filerobot 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 (Setting > Security templates > Add template)

• You already have a store on Shopify.

Step 1. Install and configure

From Shopify, open the Filerobot app in the Apps menu item and click the button “Configuration”

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

Step 2. Add Filerobot Snippets

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

Step 3. Install Filerobot Webhooks

• Add product webhooks for action create/update/delete, that will check and update images to Filerobot Hub when the user has action create/update/delete.

Usage

Upload your Shopify product media to Filerobot

• In Shopify, open the Filerobot 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 on your store, the process will download all product images from Shopify and store them on Filerobot Library.

Sync media from Filerobot Hub to Shopify

• Fill in your product name you need to "Sync"

Display images on your site

You can add Filerobot images to your site by editing your theme's code.

The snippets provide the functionality to display images on your site

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

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

• filerobot-url.liquid: This will help you build a Filerobot URL to deliver an image on your site 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 Filerobot image on pages

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

• First we need 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 Filerobot 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 your application in Shopify

• Install 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 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:

3KB

products_example.csv

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