All Tutorials

Using protocol-independent URLs

All Tutorials

Using protocol-independent URLs

Using protocol-independent URLs

Different web protocols might cause your store to behave unexpectedly for some users.

  • Colors do not display correctly
  • Some page elements or images do not appear
  • Your browser address bar shows a warning:

This might happen if some of your theme assets do not use protocol-independent URLs. These URLs are required if you want to load your site through a secure connection (https://).

About assets

Assets are files that your theme needs to function properly. These include JavaScript files, stylesheets, and image files. External hyperlinks are not considered assets.

Protocol-independent URLs

URL protocols look like http://, https://, and ftp://. A protocol-independent URL simply begins with //.

You might be loading your store through a secured connection (https) if any of the following apply to you:

For your store to load properly, all theme assets must use your store's secure protocol. You can make sure this by replacing the http:// in their reference addresses with //.

Updating assets to use protocol-independent URLs

To make sure your assets work properly when your store is viewed through a secure connection, search your theme files for the text http://, and replace all instances of that text with //. For example:

Before:

<link
  href="http://fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet"
  type="text/css"
/>

After:

<link
  href="//fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet"
  type="text/css"
/>

Best practices

  • You can download your theme and use the Replace all feature in a text editor to replace the URL protocol in all your theme files. You can then upload your edited theme, and publish the imported theme that has protocol-independent URLs.

  • To find out which assets are not loading securely, you can check your browser console. The console should list the assets that are not loading properly.