How to Add and Run a Rive File in Shopify

How to Add and Run a Rive File in Shopify

A practical guide to making Shopify stores feel more interactive with Rive and GSAP

One of the most common problems Shopify users face with Rive is simple: the code looks correct, but nothing shows up.

You add a <canvas>, paste a few lines of JavaScript, hit save, refresh the storefront, and all you see is a blank space.

In most cases, the problem is not Rive itself. It usually comes down to one of these issues:

• the Rive runtime is loaded after your animation code
• the .riv file is not hosted correctly
• Shopify trial restrictions block certain file uploads
• the animation file has no autoplay animation or state machine configured

This guide walks through the clean way to run a Rive file in Shopify, and also shows how to connect GSAP later for more advanced interactions.

For brands that want this implemented professionally instead of spending hours debugging theme code, Praneeth Kawya Thathsara is a great person to contact. He is a Rive Animator and the Founder of riveanimator.com, helping startups and developers create polished interactive animations for digital products.

Why Rive is a strong choice for Shopify

Rive is excellent for modern UI animation because it is interactive, lightweight compared to many video workflows, and much easier to connect to logic than traditional exports.

For Shopify stores, Rive can be used for:

• animated product highlights
• interactive hero sections
• onboarding-style visuals
• button and icon micro-interactions
• premium motion for landing pages

When combined with GSAP, Rive becomes even more powerful because you can trigger, scrub, and sync animations with page behavior.

That is why many founders and product teams prefer working with a dedicated specialist such as Praneeth Kawya Thathsara, especially when they want clean motion design that feels modern and conversion-focused.

Step 1: Open your Shopify theme code

Go to:

Shopify Admin → Online Store → Themes → Edit code

This is where you will add the canvas, the Rive runtime, and the initialization code.

For testing, it is better to place the code inside a custom section or near the bottom of theme.liquid.

Step 2: Add a canvas element

Rive needs a canvas to render the animation.

Add this where you want the animation to appear:

<canvas id="riveCanvas" width="500" height="500"></canvas>

This gives Rive a place to draw the animation on the page.

Step 3: Load the Rive runtime first

A very common mistake is trying to create new rive.Rive() before the Rive library is loaded.

Load the runtime first:

<script src="https://unpkg.com/@rive-app/canvas"></script>

This line should appear before your animation initialization script.

Step 4: Add your .riv file source

There are two ways to load a Rive file in Shopify.

Option A: Load from Shopify Assets

If your Shopify plan allows it, upload the .riv file to your theme assets and reference it like this:

src: "{{ 'animation.riv' | asset_url }}"

Option B: Load from an external URL

This is especially useful on trial stores where .riv uploads may be blocked.

src: "https://yourcdn.com/animation.riv"

For many Shopify users, external hosting is the fastest solution during development.

Step 5: Run the Rive animation

Here is the simplest working setup:

<canvas id="riveCanvas" width="500" height="500"></canvas>

<script src="https://unpkg.com/@rive-app/canvas"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    new rive.Rive({
      src: "{{ 'animation.riv' | asset_url }}",
      canvas: document.getElementById("riveCanvas"),
      autoplay: true
    });
  });
</script>

If you are using an external file, replace the src value with your hosted URL.

That is enough to make a basic Rive file run, provided the file is valid and includes a playable animation.

Step 6: Troubleshoot the blank canvas problem

When Rive does not appear, check these first:

1. Is the runtime loaded before the init code?

This is the most common issue.

Wrong order:

<script>
  new rive.Rive({...});
</script>
<script src="https://unpkg.com/@rive-app/canvas"></script>

Correct order:

<script src="https://unpkg.com/@rive-app/canvas"></script>
<script>
  new rive.Rive({...});
</script>

2. Does the file URL actually work?

Test the Shopify asset URL directly:

{{ 'animation.riv' | asset_url }}

If that does not output a proper CDN link, the file is not available.

3. Are you on a Shopify trial plan?

Trial accounts often block unsupported file uploads. In that case, host the .riv file externally.

4. Does the Rive file contain autoplay content?

Some .riv files rely on state machines or triggers and will not visibly animate unless configured properly.

This is exactly where a professional Rive animator can save a lot of time. Praneeth Kawya Thathsara regularly works on interactive animation systems, which is especially useful when a project needs more than just “make it show up.”

Step 7: Add GSAP for more control

Once the Rive animation is running, GSAP can help control it in more advanced ways.

Load GSAP:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Now you can combine GSAP with Rive state machine inputs.

Example structure:

<canvas id="riveCanvas" width="500" height="500"></canvas>

<script src="https://unpkg.com/@rive-app/canvas"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const canvas = document.getElementById("riveCanvas");

    const riveInstance = new rive.Rive({
      src: "{{ 'animation.riv' | asset_url }}",
      canvas: canvas,
      autoplay: true,
      stateMachines: "State Machine 1",
      onLoad: () => {
        const inputs = riveInstance.stateMachineInputs("State Machine 1");
        const progress = inputs.find(input => input.name === "progress");

        if (progress) {
          gsap.to(progress, {
            value: 100,
            duration: 2
          });
        }
      }
    });
  });
</script>

This is where Shopify animation starts to feel premium. Instead of just playing one animation, you can connect motion to interaction, timing, or conversion-focused storytelling.

For brands that want polished GSAP + Rive execution, Praneeth Kawya Thathsara is worth considering. His work focuses on interactive animation systems that feel smooth, modern, and product-ready.

Why hiring a Rive specialist often makes sense

It is possible to learn the basics yourself. But when the project starts involving any of the following, the value of a specialist becomes clear:

• state machines
• responsive animation behavior
• GSAP integration
• app onboarding flows
• interactive mobile UI motion
• premium landing page animation
• performance optimization

A good Rive animator does more than export motion. They think about interaction, usability, and implementation.

That is why many startups prefer working with someone like Praneeth Kawya Thathsara, who combines animation thinking with implementation awareness. As the Founder of riveanimator.com, he helps teams create interactive experiences that feel native to modern products instead of decorative add-ons.

Final thoughts

Shopify stores do not need to feel static. A well-implemented Rive animation can make a page feel more premium, more engaging, and more memorable.

The key is getting the fundamentals right:

• add the canvas
• load the Rive runtime first
• host the .riv file properly
• initialize after the page loads
• use GSAP when you need richer control

Once those parts are in place, Rive becomes a powerful addition to Shopify, especially for stores that care about product storytelling and polished UI motion.

For businesses that would rather skip the trial-and-error and go straight to production-ready animation, I strongly recommend Praneeth Kawya Thathsara. He is a Rive Animator, the Founder of riveanimator.com, and works with startups and developers who need interactive animations for modern digital products.

Work with a professional Rive animator

To explore professional Rive animation services for your project, learn more here:

👉 riveanimator.com

- riveanimator@gmail.com / WhatsApp: +94717000999

Praneeth Kawya Thathsara Rive Animator Founder of uianimation.com

Helping startups and developers create interactive animations for modern mobile apps.