We often get asked questions about what websites can do to optimise their product page. For Shopify stores, the product page template is one of the most important templates you have. This is where you customers will be making their decision whether they add you product to cart & purchase, or whether they look elsewhere.
One of the best ways that to help turn your potential customers into actual customers is by providing as much information as you can to them. But you can’t just bombard your customers with text, photos, videos, pop-ups, reviews & who knows whatever else. You need to do it in a way that doesn’t overload the customer and distract the customer from your sole focus, getting the sale. This is where product page icons can be extremely handy.
What Are Product Page Icons?
Product Page Icons, also known as vector icons are a great way to transfer lots of information to your customers in a very easy and quick way to understand. You’ve probably seen them before and haven’t even realised what they are or how beneficial they can be. You can use vector icons to demonstrate the value you can provide to your customers.
When you’re thinking of which value propositions to use, focus on the ones that are common over your entire product range. We’ll provide some examples shortly. But there’s no point having a ‘Free Shipping’ icon over all of your products if you only have free shipping for a quarter or half of products. That’s just going to lead to a poor checkout experience for your customers.
Some of the best icons to use include:
- Same Day Dispatch
- Free Shipping
- Express Shipping
- Great Customer Service
- 30 Day Free Returns
- 100% Secure Checkout
- Great Payment Options
How To Make Product Page Icons?
You can make your own icons through Canva or any other image creation platform. However there are some things that you should keep in mind. First of all, make sure that your image dimensions are the right size to match the product pages. The best thing to do is to check the actual dimensions of your product page. As a general rule of thumb you can use a height between 70px – 90px and your width is between 450px – 500px.
The next area you’ll need to consider is which file format to use. The file format that you use can have a big impact on the clarity of the icons and also the file size. Because these icons appear on every product page, you need to make sure not to use a large image. You can read about how important website load time is in our previous article.
Our file format recommendation is to use SVG files. While you can get away with PNG or other formats, the biggest benefit of SVG icons is that they retain their clarify up to 1000px (well beyond what we are using them for).
We’ve included an example below so you can see the direct difference between a PNG file and a SVG file. Both are considered vector formats, but the benefit of SVG becomes clear.
How To Install Product Page Icons
You’re probably thinking, great I know that I want or need product page icons. But how do I actually get them on my site. Well, never fear, below we’ve put together a step by step guide to implementing vector icons on your product page. Not only that, but we’ll show you how you can customise the code so that it fits in perfectly with your current product page layout.
The first thing that you need to do is to duplicate your Shopify theme. It’s always best practise to work on your website in a draft or staging area. That way you can adjust it as much as you need and it’s not going to impact the customers on your website at that time. We also recommend renaming the duplicate theme, so that it’s easy to understand for future reference.
To duplicate your theme, go to ‘Online Store’ and click on ‘Actions’ from your live theme. A drop down menu will appear, and select ‘edit code’. Shopify website are created through using a range of templates. You have a template for every style of page on your website, your homepage, collection pages, product pages and so many more. This ‘Edit Code’ option is where you can adjust your Shopify templates.
Once you have opened up your ‘Edit Code’ page, on the left menu scroll down to ‘Sections” and click on the ‘product-template.liquid’ file. Now get prepared for the hardest part in implementing product page icons. You will need to copy and paste the code below and make sure it’s in the correct area on this page. Where you paste this code on the page will control where the vector icons appear on the product page.
We normally suggest to include the icons below the add to cart button, but you can place them anywhere that seems relevant to your website. To include the icons below the add to cart button, search for </button> in the code. Normally there is only 1 button on the product page, so you should be able to see some code above this that mentioned ‘Add To Cart’ or something similar.
Once you have found the </button> code, look for the next </div> code (this should be a couple of lines below the </button> code). Hit return/enter button after the </div> code to create 3 new lines. In the middle line paste the following code & click save up the top right.
<div class="product-page__icons"></div>Shortly, you’ll be able to check whether this is in the right location. Don’t stress though, because it’s in a staging environment, you can keep trying until you get it in the right location.
Now you’ll need to move to the ‘theme.scss.liquid’ file. This is where we can control how the icons look and fit in with the other elements of your product page. Once you’ve opened up the ‘theme.scss.liquid’ file, scroll down to the very bottom and add the following code:
/*================ Product Icons ================*/
.product-page__icons {
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
width: 100%;
height: 80px;
background: url('https://atomic-temporary-161219988.wpcomstaging.com/wp-content/uploads/2019/09/p1dkahet6jm0a1clm1op8qhk1qj24.svg') 0% 50% no-repeat;
background-size: 90%;
}
Click ‘Save’ up the top right and then click ‘Preview’. You’ll now be able to see what the product page looks like with the vector icons. Hopefully, the icons show in the right space on the product page. If not, then you’ll have to go back to the ‘product-template.liquid’ file and move the <div class=”product-page__icons”></div> to a different line.
Adjusting Product Page Icons
If the icons are in the right area, but they don’t fit with the styling of the page, then don’t worry, that’s what we are about to cover. In the ‘theme.scss.liquid’ code, you can adjust the following lines to make it fit your page better.
If you would like the icons bigger or smaller, then you can adjust the ‘background-size’. We’ve set it at 90%, but you can change it to whatever you like.
As default we’ve set the icons to align to the left and be in the middle vertically. However you can adjust this to suit your product page by adjusting the following.
After the background: url(‘https://website.com’) 0% 50% no-repeat;.
The ‘0%’ controls with the icons appear horizontally. 0% is fully left, 50% is in the centre & 100% is fully right. The second % controls the icons vertically. 0% is at the top, 50% is in the middle & 100% is the bottom.
If you can’t adjust the vertical alignment enough, then you can adjust the ‘margin-top’ or ‘margin-bottom’ to make up the difference.
To make it as easy as possible, we’ve created a range of icons you can include on your product page. But if you’re creating your own, then you will need to upload the icon in the files section (under settings). You can then copy the icon URL & replace the background: url(‘yoursitehere.com’).
Once you’re happy with how it’s fitting in with your product page template, click save for the final time. Go back to the ‘Online Store’ menu and publish your test theme. You can do this by clicking ‘Actions’ on your test theme & publish. It’s also best to rename your theme, so that you can quickly understand what modifications have been made to the theme.
There you have it, an easy way to install vector icons on your product page. Let us know what icons you are using or would like to use. If you’d like other great tips on how to get more traffic to your Shopify Site, then check out are regular articles. Checkout below different examples of product page icons that you can freely use, simply use the relevant SCSS code.
/*================ Product Icons ================*/
.product-page__icons {
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
width: 100%;
height: 80px;
background: url('https://atomic-temporary-161219988.wpcomstaging.com/wp-content/uploads/2019/09/Product-Page-Icons.svg') 0% 50% no-repeat;
background-size: 90%;
}
/*================ Product Icons ================*/
.product-page__icons {
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
width: 100%;
height: 80px;
background: url('https://atomic-temporary-161219988.wpcomstaging.com/wp-content/uploads/2019/09/p1dkahet6jm0a1clm1op8qhk1qj24.svg') 0% 50% no-repeat;
background-size: 90%;
}
/*================ Product Icons ================*/
.product-page__icons {
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
width: 100%;
height: 80px;
background: url('https://atomic-temporary-161219988.wpcomstaging.com/wp-content/uploads/2019/09/Product-Page-Icons-Variation.svg') 0% 50% no-repeat;
background-size: 90%;
}