Shopify provides a range of tools to help users build their store, manage inventory, process payments, and handle shipping. With Shopify, users can set up their store with no coding skills required and can customize their storefront to match their brand. Additionally, Shopify offers various integrations and apps to enhance the functionality of the store.

Shopify provides built-in dashboards in the “Analytics” section of a Shopify store that displays various data from the user’s store such as total sales, returning customer rate, average order value etc. With the help of Screenly, this dashboard can be displayed on a screen.

Adding your dashboards to Screenly

To display your Shopify dashboards on a digital sign with Screenly, you’ll be needing the URL to the dashboard you would like to display. To get this URL, login to your Shopify store and click on “Analytics” from the left side-menu.

From the analytics page, click on the particular dashboard you would like to display and copy the URL from your address bar.

Once you have your dashboard URLs ready, we can tackle the next piece: authentication. Shopify blocks computers from accessing a user’s dashboard via URL without logging in, so Screenly has made it easy by creating a ready-to-use Javascript snippet on the Screenly playground. Modifying this script with your Shopify email and password allows you to log in to your Shopify store and view your dashboard on a digital sign, using Screenly’s Javascript Injection feature.

Armed with the URLs to your dashboards, we can now add your dashboards to Screenly. The recommended way to work with our JavaScript Injector is to use Screenly’s Command Line Interface, so visit our CLI repository for more information on how to work with the CLI.

To add your Shopify dashboard to Screenly, simply add your dashboards as a new URL by running the following command on our CLI:

$ screenly asset add "<http://path-to-shopify-dashboard>" Shopify
+----------------------------+-------------+------+--------+
| Id                         | Title       | Type | Status |
+----------------------------+-------------+------+--------+
| XXXXXXXXXXXXXXXXXXXXXXXXXX | Shopify     | N/A  | none   |
+----------------------------+-------------+------+--------+

After adding the asset to your Screenly account, it is important to store the Asset ID, as it will be referenced later. You can store the Asset ID for later by running the following command.

$ export ASSET_ID=XXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXX

With our asset created, we can now apply the JavaScript Injection for Shopify authentication. Proceed to download shopify-sign-in-via-credentials.js from Screenly’s playground and modify it with your credentials. Run the following command to add the JavaScript to the Shopify dashboard.

$ screenly asset inject-js "$ASSET_ID" /path/to/script.js
20XX-XX-XXTXX:XX:XX.XXXZ INFO  [screenly] Asset updated successfully.

After running the above command, your Shopify dashboard should display correctly on your screen instead of the Shopify login page.

We are here to help

For more information on how to make use of our CLI, visit the repository for our CLI on github. To learn more about our javascript injector feature, you can also visit Screenly’s playground on github. If you have any trouble integrating Shopify with Screenly, let us know at Screenly Support. We are here to help!