Hype animations in shopify

Hello, I’m very new to hype and am interested in what it can do for my shopify site. I did some brief searching but couldnt find any resources on what the process would be to integrate or import the proper code into my shopify site. I assume there must be a way to do this but can’t find any info about it.

Does anyone have any experience with this?

Thanks

Hi Daniel, As long as you can add HTML/Javascript then you can incorporate your Hype animation.

I see that Shopify has it’s own Theme template language “Liquid” you can Edit these .liquid files directly and add any code you need. So within these files you can add a reference to your generated script. I am assuming you can upload the associated files.

I am not up to speed with Shopify but have had a quick read of some of their documentation and it seems possible.

Hi, I’m working on a solution for integrating Tumult Hype into a Shopify site, but I’ve hit a roadblock. Since Shopify does not support a folder system that would accommodate Hype’s resource folder, I’ve set up a subdomain where I can host the .html page and resources folder. The example that I’m using is here: http://hype.iambrazen.com/Brazen%20Symptom%20Grouping.html

I’ve tried to embed this on a demo page, but I can’t get it to display. Here is the code that I have on that page.

<div id="brazensymptomgrouping_hype_container" style="margin: auto; position: relative; width: 320px; height: 568px; overflow: hidden;"><script type="text/javascript" charset="utf-8" src="http://hype.iambrazen.com/Brazen%20Symptom%20Grouping.hyperesources/brazensymptomgrouping_hype_generated_script.js?60503"></script></div>

Basically that code comes from this instructional video on embedding Hype in existing html sites, but it doesn’t seem to work here. I’ve also tried embedding via the same method on a Squarespace site and no luck there either.

Any help much appreciated!

Might be that at least one problem arises from trying to embed content from a HTTP source into an HTTPS environment. Also known as ‘mixed content’ that gets blocked by browsers.

Looking at the source I’d imagine that is true:

Safari’s web developer console reports:

[blocked] The page at https://iambrazen.com/pages/demo was not allowed to run insecure content from http://hype.iambrazen.com/Brazen%20Symptom%20Grouping.hyperesources/brazensymptomgrouping_hype_generated_script.js?60503.

Chrome’s web developer console reports:

Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

If you can load via HTTPS that would probably solve it; perhaps loading from the same domain might also help. Another thing to try would be to load via iframe pointed at a .html page instead of the div method.

This was the issue. Added an SSL and was able to get it working. So, if anyone else is looking for a Shopify solution here’s what worked for me:

  1. Shopify doesn’t have a subfolder system, so there’s nowhere to upload the hype resources file.
  2. I used a workaround by creating a subdomain (hype.YOURSITE.com) that’s hosted outside of shopify. Make sure that this site has an SSL so you have an https:// address.
  3. Upload the .html file and the resources folder to this subdomain.
  4. Embed the hype document in your Shopify site using the instructions from Hype here: this instructional video
2 Likes