Fixing mixed content errors

Content that's displayed on your Shopify website but that is hosted externally (including images, webforms, or videos that are hosted on a domain without an SSL certificate) can't be automatically updated to HTTPS when you activate SSL certificates for your custom domains in Shopify. Pages that contain unencrypted content cause mixed content errors.

Pages with mixed content errors will still be visible, but they won't display a padlock icon and an https:// URL in the browser. In some cases, web browsers will block unsecured content or display an error when they open a webpage that doesn't have a valid SSL certificate.

There are a few different things you can do to fix mixed-content errors:

Change filenames from HTTP to HTTPS

If any of the content on your online store can't be updated automatically when you activate SSL certificates in your Shopify admin, then you might need to update it manually. For some content types, you'll need to edit the source HTML so that the path is set to HTTPS instead of HTTP.

Content type Solution Recommended hosts
Video with iframe In the src attribute, replace http with https. Youtube, Vimeo
Video or audio In the src attribute, replace http with https. Youtube, Vimeo
Forms In the form's URL, replace http with https. If your form is part of a purchased theme, contact the theme developer for support. Wufoo, MailChimp

After you make changes, test the new versions to make sure that your content displays properly. If it doesn't, then the host might not support HTTPS, and you should consider moving your content to a recommended host.

Move unsecured content to Shopify

In some cases, you can fix mixed content errors is by hosting unsecured content at Shopify instead of using a third-party provider.

To move content from an unsecured host to Shopify:

  1. From your Shopify admin, click Online Store, and then click Domains (or press G W D).

  2. In the SSL certificates section, click the unencrypted URLs link to view a list of the files that are causing mixed content errors:

    Retry ssl

  3. Copy the URL of a file that's causing a mixed content error:

    Unencrypted files ssl

  4. Paste the URL in your browser and then press enter.

  5. From your browser, download the file to your computer.

  6. Upload the file to Shopify.

  7. After you've successfully uploaded the file, copy its new, Shopify-hosted URL.

  8. From your Shopify admin, open the page that contains the original version of the file that's causing a mixed content error.

  9. In the rich text editor, find the file's original URL.

  10. Replace the file's original URL with the new, Shopify-hosted URL. Make sure that it begins with //.

  11. Save your changes.

  12. On the Domains settings page in your Shopify admin, click Retry SSL certificate activation:

    Retry ssl

Change URLs in your theme.liquid file

If your theme uses Liquid to modify URLs so that they are published with HTTP instead of HTTPS, then those URLs will cause mixed-content errors when you activate SSL for your storefront. You can fix these errors by changing the relevant URLs in your theme.liquid file:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. In the Layout folder, click theme.liquid.

  4. In the theme.liquid file, update the code that publishes using HTTP, and then save your changes. For example, the Liquid code might look like this:

  
  {% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
  
  

Or it might be a Liquid tag within an HTML tag, like this:

  <meta property="og:image" content="{{ product.featured_image | product_img_url: 'large' | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' }}" />
  

In either case, remove remove: 'https:' from the Liquid code.

Update your social media integrations

Since Facebook treats HTTP and HTTPS URLs as separate pages, after you activate SSL for your storefront your pages will lose any likes attributed to them. You can stop this from happening by updating the og:url value in your social-meta-tags.liquid or theme.liquid file.

Note

The location of the og:url value varies based on the theme that you're using. The most common locations would be either in the social-meta-tags.liquid file in the Snippets folder or in the theme.liquid file in the Layout folder.

To update the og:url value:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Open the file that has the og:url value.

  4. Replace this:

    
    <meta property="og:url" content="{{ canonical_url }}">
    
    

    with this:

    
    <meta property="og:url" content="{{ canonical_url | replace: 'https', 'http' }}"
    
    
  5. Save your changes.

Update your MailChimp form action URL

If you use MailChimp, then you might need to update your MailChimp form action URL to HTTPS manually. If you see a single link that appears as broken on multiple pages when you try to activate SSL certificates, then it might be your MailChimp form action URL.

To change your MailChimp form action URL from HTTP to HTTPS:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Click Customize theme:

    Click customize theme

  3. Find the box to enter your form action URL. If your theme integrates with MailChimp, you can find a box to enter your MailChimp form action URL on your Customize theme page. The box might be labeled with text like MailChimp form action URL or MailChimp form action. The box will most likely be in the Footer, Sidebar, or Newsletter section, but its location differs depending on which theme you are using:

    Mailchimp form action url box

  4. Change the URL in the MailChimp form action URL field so that it begins with HTTPS instead of HTTP.

    Note

    If this field is empty, then your mixed content errors aren't being caused by a MailChimp form action URL. You should try another way of fixing them, like moving your unsecured content to Shopify.

  5. Click Save changes to confirm the change to your theme settings.

  6. Try activating SSL certificates again to confirm that the link works.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free