Follow the below steps to install Dexecure if your site is using Shopify.

Dexecure Setup

1. Login to Dexecure Dashboard and create a Dexecure domain at https://app.dexecure.com/dashboard. 

2. Go to the website and add the domain you want to optimize.

Shopify Setup

Shopify Theme Modification

To actually start serving your content with Dexecure, you’ll need to make two changes to your Shopify theme.

You can access Shopify’s theme file editor by going to

Online store > Themes > Actions > Edit code

You can also follow the instructions from here.

settings_schema.json

The first change lets you configure your Dexecure installation from inside Shopify’s theme settings. Copy the code below to the bottom of your theme’s Config/settings_schema.json file, inside the outermost pair of square brackets ([ ]). Make sure to add a comma (,) to the file following the } preceeding where you paste in this code.

{
  "name": "dexecure",
  "settings": [
    {
      "type": "checkbox",
      "id": "enableDexecure",
      "label": "Enable Dexecure"
    },
    {
      "type": "text",
      "id": "dexecureUrl",
      "label": "Dexecure subdomain",
      "info": "The subdomain you are given on the Dexecure platform. Example: `https:\/\/xxx.cloudfront.net`."
    },
    {
      "type": "text",
      "id": "dexecureShopifyUrl",
      "label": "Shopify CDN domain",
      "default": "\/\/cdn.shopify.com",
      "info": "Don't change this unless you have a proxy in place. Not sure? Leave it as is."
    }
  ]
}

dexecure.liquid

The second file adds a new Liquid tag that helps you generate Dexecure URLs. This time, create a new file in the Snippets directory of your theme named dexecure.liquid. We have committed the file into this repository, you can find it's contents here. Copy that code into the dexecure.liquid file that you just created and save.

Enabling the Dexecure Integration

Now that you’ve set up your Shopify theme to work with Dexecure, you can enable Dexecure in your theme settings. Head to the Online store > Themes > Customize. Once there, you’ll see a Theme settings option in the left-hand sidebar. Click on this. Head to the Dexecure tab to configure your Dexecure setup. It should look something like the following:

Enable Dexecure: Make sure this is checked.
Dexecure subdomain: You would get this from Dexecure. It would be something like https://xxx.cloudfront.net
Shopify CDN domain: You’ll most likely not want to change this from the default value of //cdn.shopify.com.

After you’ve set everything up, click Save, and you can move on!

Migrating Your Theme Images to Dexecure

At this point, you’re ready to change your existing theme’s assets to use Dexecure. The exact process will vary depending on your theme, but the basic idea won’t change. Just find places in your theme where existing assets are being output, and replace them with the Dexecure Liquid tag you just created. Here are a few examples:

Before:

{{ product.featured_image }}

After:

{% assign feat_img_url = product.featured_image %}
{% render 'dexecure' src:feat_img_url %}

Before:

srcset="
{%- if card_product.featured_media.width >= 165 -%}
  {{ card_product.featured_media | image_url: width: 165 }} 165w,
{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}
  {{ card_product.featured_media | image_url: width: 360 }} 360w,
{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}
  {{ card_product.featured_media | image_url: width: 533 }} 533w,
{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}
  {{ card_product.featured_media | image_url: width: 720 }} 720w,
{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}
  {{ card_product.featured_media | image_url: width: 940 }} 940w,
{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}
  {{ card_product.featured_media | image_url: width: 1066 }} 1066w,
{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"

After:

srcset="
{%- if card_product.featured_media.width >= 165 -%}
  {% assign feat_img_url_165 = card_product.featured_media | image_url: width: 165 %}
  {% render 'dexecure' src:feat_img_url_165 %} 165w,
{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}
  {% assign feat_img_url_360 = card_product.featured_media | image_url: width: 360 %}
  {% render 'dexecure' src:feat_img_url_360 %} 360w,
{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}
  {% assign feat_img_url_533 = card_product.featured_media | image_url: width: 533 %}
  {% render 'dexecure' src:feat_img_url_533 %} 533w,
{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}
  {% assign feat_img_url_720 = card_product.featured_media | image_url: width: 720 %}
  {% render 'dexecure' src:feat_img_url_720 %} 720w,
{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}
  {% assign feat_img_url_940 = card_product.featured_media | image_url: width: 940 %}
  {% render 'dexecure' src:feat_img_url_940 %} 940w,
{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}
  {% assign feat_img_url_1066 = card_product.featured_media | image_url: width: 1066 %}
  {% render 'dexecure' src:feat_img_url_1066 %} 1066w,
{%- endif -%}

{% assign feat_img_url = card_product.featured_media | image_url %}{% render 'dexecure' src:feat_img_url %} {{ card_product.featured_media.width }}w"

src="{% assign feat_img_url_533 = card_product.featured_media | image_url: width: 533 %}{% render 'dexecure' src:feat_img_url_533 %}"

Before:

src="{% featured_img_src | img_url: product_image_size %}"

After:

{% assign feat_img_url = featured_img_src | img_url: product_image_size %}
src="{% render 'dexecure' src:feat_img_url %}"

Before:

{{ 'collection5-3.png' | asset_url | img_tag }}

After:

{% assign full_url_for_dexecure = 'collection5-3.png' | asset_url %}
{% capture modified_dexecure_url %}
{% render 'dexecure' src:full_url_for_dexecure %}
{% endcapture %}
{{modified_dexecure_url | strip | img_tag}}

Once you've made the changes you can enable/disable Dexecure under Customize>Theme Settings>Dexecure.