Having a “secure” Shopify store sounds like a no brainer and with Shopify now supporting free SSL, it’s not only easy, but can be quite important for your business — however, making the switch over to SSL on your Shopify theme can be tricky at times.
SSL?
SSL, which is short for “Secure Sockets Layer” (which I personally always thought would make a great band name), is actually the term for one of the original methods of securing communications between users and websites.
The more current technology is known as Transport Layer Security, or TLS, but the term SSL is still commonly used to refer to both the original SSL and TLS. For the sake of consistency with Shopify terminology, I’ll use the term SSL to refer to TLS, however.
More alphabet soup: HTTPS
When a site is secured using SSL, you’ll notice that, in the address bar of your browser the “http” that you are probably most familiar with seeing before Web addresses gains an “s” after the “p” to become “https.”
HTTP is short for “Hypertext Transfer Protocol” (also another great band name) and, in simplified form, refers to how Web servers and browsers transfer information between each other.
When the letter “s” is added to HTTP, this signals that the connection is “secure” or is being handled by SSL.
One important thing to note is that some browsers, including Google Chrome, will hide “http” in the browser bar, but typically show “https” when the site being accessed is considered secure.
So, what is SSL?
The exact methodology and functionality of SSL is rather complex and there are plenty of online resources that can explain the intricate technical details of how it works, but here’s a simplified explanation:
- Data between the Web browser and server are encrypted. In simplified terms, think back to rudimentary code systems you may have experimented with as a kid, where A = 1, B = 2 and so on. This is an example of encryption. Of course, the encryption used by Web servers are significantly more complex. However, the basic concept of encryption is based on knowing the “key” to solve the problem. In our simplified example, the key is that each letter is replaced by the number matching its numerical position in the alphabet. In order for data to be encrypted and decrypted, both the Web browser and server need to know the key. SSL provides the necessary technology for the browser and server to safely share the proper key for each browsing session.
- Encryption means that data, whether it be a customer name or credit card number, is not passed in “plain text” over the Internet but instead is replaced with what appears to be a jumble of letters, numbers and symbols.
- SSL also typically includes a way of ensuring each computer is who it claims to be. For example, when a shopper accesses a store secured by Shopify’s SSL feature, Shopify’s servers provide a digital certificate to “prove” that it is a genuine Shopify server. This prevents another server from “pretending” to be a Shopify server and obtaining your customers’ login credentials, credit card details and other information.
- SSL also ensures the integrity of data passed between two servers. This prevents third parties from somehow intercepting and altering or grabbing the data.
A quick note to techies: These explanations are very simple and aren’t meant to be an exhaustive explanation of all the nuances of how SSL works.
The benefits of SSL
While SSL is certainly complex, it also comes with plenty of advantages.
The most obvious one is that data such as customer login credentials and credit card numbers are encrypted during transfer over the Internet and therefore protected against a third party intercepting or viewing any of this sensitive data.
SSL also helps ensure your customers’ computers are always connecting to and communicating with genuine Shopify servers.
A second benefit of SSL is with SEO. Google, for example, has publicly acknowledged that SSL-enabled sites will receive a small ranking boost over non-SSL ones.
Keep in mind, however, that SSL is just one of numerous factors search engines will use in ranking your site, so switching over to SSL won’t necessarily give you any noticeable boost.
Finally, while Shopify has always processed checkouts over a secure “https” address (that’s the reason why checkouts always have to go through https://checkout.shopify.com), having all of your store pages being notated as secure can give customers added confidence of the safety and security of your whole store. It also illustrates that your company has a dedication for security and pays extra attention to details such as data security and integrity.
Enabling SSL
Enabling SSL in your Shopify store is easy using these steps and Shopify has also announced that it will be requiring all of its stores to use SSL soon.
When SSL causes issues
While SSL is obviously a key part of ensuring that secure information such as customer names and payment information is kept secure, it can cause a few issues.
The most common issue that store owners encounter when switching on Shopify SSL is what is commonly known as a “mixed content” error.
This refers to when a user is visiting a site with the “https” in front of it but some of the resources the page uses, such as images or JavaScript, are being transmitted over “http”.
Shopify’s SSL tool will automatically check for mixed content errors in the most common places and attempt to show you where they should be fixed, but it can require a bit of trial and error to extinguish these errors. We have a guide on things to look for when fixing SSL issues with Shopify themes here.
Mixed content issues can cause a variety of problems:
- Warning messages that your customers’ browsers display
- Liquid errors
- Images not loading or returning an error message instead of displaying the image
- Issues with Web fonts
- Problems with apps or third party customizations
- Avoiding SSL issues
The best way to avoid theme related SSL issues is to ensure you are using the most recent version of your theme.
Shopify has been requiring theme developers to ensure themes are fully compatible with SSL for some time now, so using the most recent version will ensure you are getting one that meets these requirements.
If you’re having issues with SSL, the first thing to do is upgrade your theme. If you’re an Out of the Sandbox theme user, you can try using our Shopify theme updater app to upgrade.
The next step is to ensure that any customizations or third party apps you are using are compatible with SSL.
Protocol agnostic
When viewing code of updated themes, you may notice that links to external resources such as images, inline frames, widgets, stylesheets or JavaScript files start with a double forward slash: “//” instead of “https://” or “http://”.
This is known as a “protocol agnostic” (yet another great potential band name).
When a request for an external resource such as an HTML file, image, CSS stylesheet or JavaScript file is prefixed with “//,” the browser will automatically request the file over the same protocol the current page is being displayed on.
For example, if you are on a page starting with “http://,” the image or other resource will be requested over “http://” — and vice-versa.
Using protocol agnostic URLs and Shopify asset tags have been required in Shopify themes for some time now and is considered best practice as it doesn’t assume that the user is accessing the site via SSL.
There are some cases, however, when protocol agnostic URLs aren’t the best option — namely in links (or <a> tags) to external sites or pages. Unless you are certain the site you’re linking to always uses “https://” as the beginning of its URLs, it’s often best to leave links as “http://” to avoid unpleasant warning messages or errors when linking to third party sites.
That said, assuming you have SSL activated on your site, there’s no harm in having your internal links start with “https://” on your pages. Another option is to remove your domain name entirely and simply start internal links with a forward slash.
For example, https://www.mystore.com/collections/my-collection/” can be simplified to just “/collections/my-collection” as Web browsers will automatically assume that “/collections/my-collection/” is stored on the same domain name as the page linking to it.
