The following guide will support you with installing the Recite Me toolbar onto your Shopify website.
- From your main Shopify dashboard on the right-hand side under "SALES CHANNELS" please select “Online Store”. Then select “Themes”.
Once the Themes menu appears select the green “Customize” button in the center of the page.
2. In the bottom left corner of the screen please click “Theme Actions”. Once the sub menu appears click “Edit Code”.
3. Now you are in the code editor of your website. Please open the “theme.liquid” file.
You will find this under the “Layout” Section. Once open scroll to the bottom of this code and paste the ReciteMe code in a new line just above “</body>” tag. Now Save the code and Recite Me will now be added to your site theme.
4. To create a link to the Recite Me toolbar you will need to add a menu button through your navigation.
Firstly select “Navigation” from the right-hand side main menu then select your “Main menu” to edit.
You now need to “Add menu item”. At this point please give this link a name such as “Accessibility Tools”. Next, set the link address to #reciteme-launch. Finally, save your website to launch these changes.
Custom Recite Me Shopify Code
Remember to replace 'CLIENT KEY' (line 3 of the code) with your client key.
<script type="text/javascript">
var serviceUrl = "//api.reciteme.com/asset/js?key=";
var serviceKey = "CLIENT KEY";
var options = {}; // Options can be added as needed
var autoLoad = false;
var enableFragment = "#reciteEnable";
var loaded=[],frag=!1;window.location.hash===enableFragment&&(frag=!0);function loadScript(c,b){var a=document.createElement("script");a.type="text/javascript";a.readyState?a.onreadystatechange=function() {if("loaded"==a.readyState||"complete"==a.readyState)a.onreadystatechange=null,void 0!=b&&b()}:void 0!=b&&(a.onload=function(){b()});a.src=c;document.getElementsByTagName("head")[0].appendChild(a)} function _rc(c){c+="=";for(var b=document.cookie.split(";"),a=0;a<b.length;a++){for(var d=b[a];" "==d.charAt(0);)d=d.substring(1,d.length);if(0==d.indexOf(c))return d.substring(c.length,d. length)}return null}function loadService(c){for(var b=serviceUrl+serviceKey,a=0;a<loaded. length;a++)if(loaded[a]==b)return;loaded.push(b);loadScript(serviceUrl+serviceKey,function() {"function"===typeof _reciteLoaded&&_reciteLoaded();"function"==typeof c&&c();Recite. load(options);Recite.Event.subscribe("Recite:load",function(){Recite.enable()})})}"true"==_ rc("Recite.Persist")&&loadService();if(autoLoad&&"false"!=_rc("Recite.Persist")||frag)document. addEventListener?document.addEventListener("DOMContentLoaded",function(c){loadService()}):loadService();
var reciteMeButton = document.querySelector(‘[href*="reciteme-launch"]');
if(reciteMeButton) {
reciteMeButton.addEventListener("click", function() {
loadService();
});
}
</script>