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

I'm trying to embed some hype animations into Shopify and can't see to get it to work, I'm referencing the external file on our server and adding custom html but It won't play, I stuck in a background colour for the placeholder just so I could see it so it's doing something. I'm getting it flashing for a second.

It should look something like the pinkimage and text below it, I've tried recreating it as a slider within Shopify but the tools are very limited as far as scaling and alignment go.

As this thread is a few years old has anybody successfully got this to work with the current versions of Shopify?

Hmm... I don't have shopify experience, but perhaps you could post a zip of your .hype document and I could get a better sense of how the file should be loading. It is clear the document is at least partially loading and something is happening.

Also it looks like you're doing this on shogun.page which seems to be a website builder for shopify... if you post this on shopify itself does it appear properly? (Or do I misunderstand the flow?)

My guess would be though that if you post the hype export somewhere and show the .html as an <iframe> it may work better.

Hi Jonathan, no same issue if pasted in directly to Shopify (yes Shogun is a page builder) https://admin.shopify.com/store/go-group-test/themes/81798135923/editor

Its a pretty simple 3 page slider but I want to keep the nice scaling and fades from Hype, can't create that in Shopify.

This is the file:

Archive.zip (1.3 MB)

Since you have a 100% x 100% Hype div, your content isn't showing up correctly -- you need to set a height of your Hype document, or use this tool by @MaxZieb: Hype Auto Height

The Hype div as it works now is likely filing a space without a height (which amounts to 0 pixels tall object).

1 Like

You can also use the CSS aspect ratio approach if you have a fixed ratio:

2 Likes

...I too need to incorporate a hype animation and actually Shopify doesn't allow access.
the iframe seems like the only simple solution but I wouldn't want to use it.
Even just creating a unique custom field for a product is complex, it seems designed for kids!
I'm working on it

In Shopify you have full access to the HTML (including the dynamic data via Liquid) or am I missing something.

Hi Max sorry for the delay.

I'm still working on it and I'm not very familiar with Shopify.
I need to add an HTML field to the product page that is empty.
In my tests with Liquid I only get the same field for all products but I have to add animation only in some.
Now I just uploaded the animation to a second level domain

That sounds like a case for custom fields and some conditional Liquid.
Here is some untested Liquid to get you started on a new section …

{% schema %}
{
  "name": "Custom Iframe Section",
  "settings": [
    {
      "type": "text",
      "id": "iframe_url",
      "label": "Iframe URL",
      "default": ""
    }
  ]
}
{% endschema %}

{% stylesheet %}
/* Ensure the iframe is responsive and borderless */
.iframe-container iframe {
  border: none;
  width: 100%;
  height: 500px; /* You can adjust this value */
}
{% endstylesheet %}

{% javascript %}
// Optional: JavaScript code if needed for additional functionality
{% endjavascript %}

{% if section.settings.iframe_url != blank %}
<div class="iframe-container">
  <iframe src="{{ section.settings.iframe_url }}" frameborder="0" allowfullscreen></iframe>
</div>
{% endif %}


The previous solution was on a section basis… if you want it on a page or product basis you would use meta field (Here is a quick ChatGPT guide):

To have individual iframe URLs for different products in Shopify, you would typically use metafields to store the URLs for each product. Metafields allow you to store additional information for products that isn't covered by Shopify's standard options. Here's how you can set this up and modify the Liquid section to use product metafields:

Step 1: Define the Metafield

  1. Go to your Shopify Admin, then to Settings > Metafields.
  2. Select Products.
  3. Click on Add definition and create a new metafield for the product. For example:
    • Name: Iframe URL
    • Namespace and key: e.g., namespace.key (you can define your own namespace and key, like custom.iframe_url)
    • Type: URL

Step 2: Add URLs to Products

For each product that you want to display an iframe on, you'll need to add the iframe URL to the product's metafield:

  1. Go to the product page in your Shopify admin.
  2. Find the metafield section (you might need to scroll down) and enter the URL into the Iframe URL metafield you created.
  3. Save the changes.

Step 3: Update the Liquid Section Code

Adjust your Liquid section code to use the product's metafield for the iframe URL. Here's an example of how your updated section might look:

{% stylesheet %}
/* Ensure the iframe is responsive and borderless */
.iframe-container iframe {
  border: none;
  width: 100%;
  height: 500px; /* You can adjust this value */
}
{% endstylesheet %}

{% if product.metafields.custom.iframe_url %}
<div class="iframe-container">
  <iframe src="{{ product.metafields.custom.iframe_url }}" frameborder="0" allowfullscreen></iframe>
</div>
{% else %}
  <!-- You can add alternative content here if there's no iframe URL -->
{% endif %}

In this code, product.metafields.custom.iframe_url is used to fetch the URL from the product's metafield (replace custom.iframe_url with your actual namespace and key). The if statement checks if there's a URL set for the iframe in the product's metafield, and if so, it renders the iframe. If not, nothing is shown, or you can opt to display alternative content.

This setup allows you to have individual iframe URLs for each product, or none at all, depending on whether you've set a URL in the product's metafield.

4 Likes

your help is much appreciated Max. Thank you!
I'll give it a look, unfortunately I don't have an editor account now but I will have one soon to do some tests (the store is already active).

Now, for the presentation of my first mokup I solved with an Iframe pasted in the product description but is a brutal a trivial solution! :poop:

thank again!

1 Like