How to install Piio Images on your Shopify website
Following this guide, you will be able to successfully optimize and deliver all your website images using Piio Images.
- Get your Domain Key
- Clone your current theme
- Include Piio Images script
- Get your images to work
- Using Piio Images as background images
- Art Direction
- Video Posters
- Test the installation
#
1. Get your Domain KeyThe Piio Images library uses a Domain Key to identify your website and where the images are hosted. If you haven't created an account and added your first domain, follow the steps after signing up for a free account here.
#
2. Clone your current themeStart by cloning your current theme so you can do the whole installation and test it before publishing it live.
Name the new theme as you want and start editing the code.
#
3. Include Piio Images scriptCopy and paste the following code inside your <head>
and before initializing any other script. This placement is because your images are mission-critical, and this code will be responsible for loading them properly.
You can find the <head>
tag at the theme.liquid
file that is within the Layout folder.
Replace the DOMAIN-KEY in the code with the one provided for your domain on the Piio Dashboard.
#
Preload & preconnectAdd the following code right after the <head>
opening tag and replace the DOMAIN-KEY
with the one provided for your domain on the [Piio Dashboard].
#
4. Get your images to workYour img tags are the ones responsible for displaying the images on your website. You need to modify every template and section where an image is displayed.
#
1. Find your img tagsIn case you need extra help looking for your images tags, you can use the filter to search files with keywords related to the components that you use in your site.
As an example, if you have a hero component at your homepage, then you can search for files containing 'hero'.
You will probably find something similar to this:
#
2. Adding the data-piio attributeNow that you found your img tags, you need to replace the src attribute with data-piio. Once you've accomplished that your img tags should look like this:
Notice that you need to set the img_url
filter to 'master' so Piio can get your original images.
#
3. What to put on the src attribute of your img tagsThe src attribute needs to be present on your img tags in order to have a valid HTML structure and should not be empty.
In order to have a valid HTML structure and a successful integration, we need to add a small image code to the src attribute. Here is the code we are going to add:
#
Success!A successful integration on your img tags will look like the following code:
#
Other considerationsYou can place any absolute or relative URL in the
data-piio
attribute. Relatives URLs should start with/
and keep them relative to your website root.- Invalid relative url
data-piio="image/image.png" ✖️
- Valid relative url
data-piio="/image/image.png" ✔️
- Invalid relative url
Use a
NoScript
tag to show images to users that have disabled scripts in their browser or have a browser that doesn't support scripts. Details here.
#
5. Using Piio Images with background imagesTo use Piio Images on almost any HTML tag that is not an image, we can use data-piio-bck
attribute. You can assign to this attribute the original URL of the image you want to show, and Piio Images will take care of the rest.
Example using a <div>
:
The code above will set the background.png image as background on the div
#
Working with background images case by caseThere are many ways to show an image on a website, some html elements like the <body>
, <div>
or <a>
allows you to use a property called background-image.
That property is usually set inline or in your css files. Inline example:
CSS example:
data-piio-bck
for inline style background-image#
Using First, you need to remove the code that is adding the background image.
Now you can add the data-piio-bck attribute to the element with the url of to the original image.
data-piio-bck
for CSS background-image#
Using In this case, the URL of the image you want to use is defined on your CSS files. To properly load that image with Piio Images and optimize it, we will need to remove it from the CSS file and place it as data-piio-bck
attribute in the HTML element.
Once we apply those changes, our code will look like the following:
Piio Image allows the div to inherit the CSS properties from the with-background class and applies the backgruond.png as background-image for the div
#
6. Art DirectionAdd a data-piio
to each <source />
tag contained in the <picture>
tag, and include the code for the transparent image in the srcset
.
Read more about Art Direction here.
#
7. Video PostersReplace the poster
attribute with data-piio
.
#
8. Test the installationOnce you finish editing your website code, click on the Preview button and check if everything is working as expected.
Finally, you can Publish your modified theme and get Piio working on your live site.