Developers, you can follow the steps provided below to install Photolock.

In this article, following tutorials available:

  • Installation
  • Tracking Protection Installation
  • Filters
  • Lazyload
  • Shopify Code Guide

Installation:

Copy-paste the given code to all your website pages into <head> after all other javascript libraries to load photolock.js

 <noscript id="photolockNoscript"><style>body *{display:none}body::before{content:"Please enable javascript to view this site"}</style></noscript> 
<script type="text/javascript" id="photolockScript" src="https://www.photolock.io/lock.js?shop={{shop.permanent_domain}}" async defer></script>

Tracking Protection detection installation:

For websites other than Shopify, you may get the extra code in Photolock settings. For Shopify, to enable this detection, just turn on the related setting in the dashboard.

Easy Watermark Installation:

To enable easy watermark, you need to add the "photolock-watermark" class value to images you want to protect.

   <img class="photolock-watermark" src="/someimage.jpg" alt="someimage" />

Filters

You can disable Photolock™ on certain images by adding the "photolock-skipimage" class value to the image tag in your code.

<img class="photolock-skipimage" />

You can disable Photolock™ on certain pages by adding the photolock-skippage class value to the body tag in your code.

<body class="photolock-skippage">

Lazyload

Some locks may not work or there may be delays if the website is using a javascript library for lazy-loading. We recommend removing such libraries in favor of native lazy-loading

Starting with Chrome 76, you'll be able to use the new loading attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library.

<img class="photolock-skipimage" loading="lazy" />

Native lazy loading is supported Chrome 76+ and any Chromium 76-based browsers. You can use the code below to detect whether the browser supports native lazyload.

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
  } else {
  // fetch polyfill/third-party library
  }
    

Baking in native support for lazy-loading images and iframes can make it significantly easier for you to improve the performance of your web pages.

Shopify Code Guide

Automated installation is only available for Shopify stores. Just add the Photolock app from Shopify app store and it will automatically install to your site.

The Photolock script can be found in the "photolock" snippet and you can call the snippet when you need to

{% include 'photolock' %}

The snippet is added to <head> in theme.liquid by default.

You can use page and image filters by checking the template or other liquid values.

<body {% if template contains 'product' %}class="photolock-skippage"{% end %} ><img {% if template contains 'product' %}class="photolock-skipimage"{% end %} >

Did this answer your question?