Adding the Textmagic script to your Shopify Store

Overview

The Textmagic script is below is identical to that used in the TextMagic app, and has been made freely available to assist existing TextMagic users transition away from the app. Below are instructions for installing the script on a Shopify store.

DISCLAIMER: Please note that while the script is identical in functionality to the current version of the TextMagic app, it comes without warranty, and will NOT be maintained or supported moving forward (see code for MIT license details).

Preparation

1. Uninstall Textmagic (this will temporarily stop your animations working)
2. Open the Textmagic script in your web browser by following this link  https://textmagic.nyc3.cdn.digitaloceanspaces.com/textmagic.js
3. Save it with "File > Save Page As" or similar  (be sure to save it as textmagic.js with its proper “.js” extension). 

Make a backup of your theme and open the code editor

1. Navigate to the themes section of your online store (easiest to search "themes" in the search bar of your dashboard)
2. Make a backup of your active theme (recommended whenever editing theme code) - beside your main theme, click the three dots, and duplicate
3. Click edit code on your active theme - click the 3 dots again, click edit code

Add the Textmagic script

1. Scroll down to assets, open it, and click “add new asset”
2. Click add file, and add textmagic.js which you downloaded earlier
3. Scroll up, and find theme.liquid (in the layout folder)
4. Add the code below towards the end of the “head” section. A good place might be directly before the line which says {{ content_for_header }}

<script src="{{ 'textmagic.js' | asset_url }}" defer="defer"></script>

6. Click save

Test

Simply reload a page with your animations on it. Or if you don’t have one, you can create a quick text animation to text:

1. Create a new page (from search bar type “add page” and select add page
2. In the page editor, switch to html editor view by clicking the <> button. Add the html below

<div data-textmagic="bounce">
<h2>Sample Heading</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

3. Click save, then view page to see your animation.