CODE

Add BeyondWords to Shopify

ESTIMATE 7-MINUTE READ

Start Talking

Pin

Earbuds are changing the way people interact with the internet. When you are ready for a robust text-to-speech solution, consider BeyondWords. Though a free option is available, with prolific writing, you will quickly upgrade to a subscription plan.

If you have a considerable amount of existing pages to convert, consider investing $75 or more per month.

The breadth of features and options within BeyondWords is too vast to consider here. Instead, I will focus on two methods of getting audio into your website.

  1. Manual text-to-speech. With this option, you can choose numerous voices. It is ideal for stories with several people speaking. It is rewarding, but time consuming, to paste text into paragraph fields, edit out unwanted phrases, and select a voice from associated dropdown menus. (Sample)
  2. Automated text-to-speech. Using RSS, it is possible for BeyondWords to create audio files as you publish articles. If you edit an article, the audio updates soon thereafter. These default to one voice for the title and another for the rest of the text. (Sample)

You can even use a combination of manual and automated audio on the same site. This is particularly useful if you have multiple blogs or stories that benefit from voice changes within the main text.

Shopify RSS Feed

The standard Shopify RSS feed is robust, non-editable, and works with BeyondWords. With the appropriate iFrame code on each blog article page, you can connect the atom feed for automated text-to-speech audio.

This is fine if your articles include subheads and basic text. But you might have redundant blockquotes, superscript footnotes, table data, inline ads, image captions, or other page elements you prefer to exclude from the audio. In this case, it is best to parse and optimize the text within a custom RSS feed.

A prior article described a method of embedding the audio controls on desired pages without editing them individually. My valiant efforts to develop a solution with a friendly interface for modifying settings failed. With a user interface, settings can be validated with menus and checkboxes.

This custom RSS feed is a hack that requires settings to be typed into the code. It conforms to BeyondWords specifications but does not pass official RSS validation due to a couple of issues (HTML text and lack of recognized RSS origin).

The goal is to minimize needless text (which can be distracting in audio and costly to convert), not format pristine HTML. It is inspired by code from Jason Bowman for a MailChimp RSS feed.

Modify Liquid Code

Shopify is an e-commerce platform that supports blogging. Merchants build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid.

Before making modifications to your Shopify theme, duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.

Now you access the Liquid programming code with Actions: Edit code. Beneath the area called Templates, click Add a new template. Choose the liquid instead of JSON option. Then replace all default code with the custom code on this page:

Login For Code

Give special consideration to the options above in red. Specify a default author email on line 16. Otherwise a default will be info@[your shop name] unless your shop URL includes ‘myshopify’. Then it will be [your shop name]-author@gmail.com.

Beyond Parsing

BeyondWords recognizes various classes to suppress content. Wrapping text within <aside> elements is quite effective. CSS classes .pullquote, .callout, and .definition reportedly can markup text for suppression.

I manually edited my blog articles to suppress references at the bottom of each page by wrapping them within <aside> elements. But modifying other CSS classes within body copy is more tedious. This is why a parsed RSS feed is helpful. Shopify lacks the power of Grep string modifications. Instead, we must rely on replace or remove Liquid commands.

The default number of recent articles is set to a half dozen. You can increase it to 25, 100, or whatever you like. But BeyondWords allots a limited number of ASCII characters each month. So for your initial test, you should try just 2 articles.

Settings within the above code include an option to suppress <blockquote>, <pre>, <sup>, <s>, <table>, and <h6> content within attributes. (You may add more replacements or remove some if required.) You can also specify an article.tag that excludes corresponding posts from your RSS feed. (Replace no-reader.)

Centralize Javascript Option

The BeyondWords player code includes a remote script link enabling audio to play anywhere. I recommend loading their script within the Theme template and including only their iFrame code on article pages.

This eliminates the need to load the script multiple times while browsing your website. You can optionally, choose to isolate the script below and add it near the bottom of the header area within the Theme template.

Login For Code

To place the iFrame code on each page, either paste it directly within the code on the article.liquid page or pair this code with the prior tip for controlling where and on which blogs to insert the BeyondWords player.

Ready to Activate

Navigate to the desired blog on your site and append it with ?view=feed. This is the link you select within the BeyondWords Importer Settings field. Click the Test button to validate.

BeyondWords Importer Settings

Find Your Voice

Human voices can be deep, high-pitched, sultry, commanding, or irritating. BeyondWords offers hundreds of voices with different dialects across global regions. Choose one that conveys the intent of your articles or, for a fee, create a custom one modeled after your own voice.

Choose Your RSS

A prior article discussed how to enable RSS for specific blogs on your website. After adding this alternate blog to your website (and testing), you can include an option in your blog page settings. Here, you can choose which RRS feed to serve.

First edit the schema at the bottom of the blog-template under the Sections area within your Shopify theme. The code below adds a menu option.

Login For Code

Next, search for the word “atom” within the code above it. It might look something like <a href="{{ blog.url }}.atom" or <a href="{{ blog.url | append: '.atom' }}. You can replace it with:

<a href="{{ blog.url | append: section.settings.rss_type }}".

Join Discussion