Nyla, Shopify and Apps

Using Nyla with third party apps

As outlined in Nyla & Shopify, Nyla is designed to interact seamlessly with your Shopify instance, including enabling you to make the most of the Shopify third party ecosystem whilst taking advantage of Nyla's benefits for performance and site management. 

This article covers: 

• Adding Apps to your site
  • Nyla Native Integrations
  • Integrating Shopify apps
• How to know if an app needs to be integrated with Nyla
• Third party compatibility & headless policy issues
• How to find out if an app is compatible with Nyla 
• Different app types

Adding Apps to your site: 

Nyla Native Integrations

Nyla comes with a list of native apps that are already integrated and ready to go. It’s possible to install these apps on Nyla without code, and our ever-expanding set of templates and blocks help you to drop them in to your site out of the box. 

You can see which apps are available on Nyla by browsing the Apps on the left navigation bar. Our documentation informs you on how to set them up. If you do require an Expert pair of hands when setting up an app in Nyla, you can always contract a Nyla Expert to do this on your behalf. 

Integrating other Shopify Apps

Apps that need to load on your site before checkout need to be integrated with/loaded on Nyla in order to work.

You have the following options to do this: 

• Use Nyla Custom app to add integrations directly yourself
• iFrame in pages from your Shopify theme
• Use Google Tag Manager to load tags and pixels

Whilst these options are available, we’re also actively seeking to improve Nyla all the time and welcome feature requests to add native support for the best of the app ecosystem that will help your business to thrive but, as with any feature request, are unable to provide exact timelines on delivery.

 

How to know if an app needs to be integrated with Nyla

A simple rule of thumb to apply to understand if an app needs to be integrated in order to work on your site is to ask whether it touches the frontend of the site in any way before checkout. 

If an app interacts with the frontend of your site before checkout, then it needs to be integrated with Nyla to work. E.g: 

• A live chat widget (Gorgias, Zendesk)
• Product reviews (YotPo Reviews, Okendo, Stamped Reviews)
• A loyalty programme (Rivo, YotPo Loyalty, Loyalty Lion)
• Popup widgets (JustUno, Attentive)
• Email signup (Klaviyo, Attentive)
• Search (Algolia) 
• Product Finder Quizzes (Octane AI, Fitsize)
• etc

If an app only interacts with Shopify (e.g checkout or the backend of your site), then it does not need to be integrated with Nyla, because it can function with everything it needs directly from Shopify. Examples include: 

• Fulfillment apps
• Data feed apps
• Backend management apps
• Post purchase upsell apps

If your app is purely analytics and can be installed via Google Tag Manager, you add the tag via Google Tag Manager (or contract the help of a Nyla Expert to help you do so). You may also need to add tracking to your Shopify checkout and/or confirmation page. 

Third party compatibility & headless policy issues

Given that the Nyla frontend is different from a Shopify theme, there can be compatibility issues that arise. We find that issues are the exception rather than the rule and can be generally overcome through leveraging Nyla native functionality, choosing an alternative app provider, or simply discussing your issue with the app provider directly to find a solution (e.g in the case of pricing increases on behalf of app providers). 

Wherever possible, we recommend using Nyla native integrations. We tend to see that the best technology providers in the Shopify space have excellent headless support, and we actively seek to deliver best in class integrations with the best providers in the  relevant space.

3P complexities

Issues that we have seen in the third party apps include: 

• Headless compatibility issues: apps, or certain functionality within existing apps may not be compatible with a headless setup due to restrictions or lack of capabilities on the app provider’s side. As a general rule, we find that the best app providers offer excellent headless support, and a lack of headless functionality can be indicative of a lower quality or less mature solution. 
  • Examples include:
    • Some apps having functionality differences or restrictions on their headless offering vs their Shopify theme offering.
    • Many cart-based apps are incompatible with Nyla given that they depend on being inside of a Shopify theme in order to work. In most cases these can be superseded by Nyla native functionality given they are no longer necessary. 
• Pricing issues: A small number of app providers change pricing for moving to a headless setup, referred to as a “headless tax.” Having a direct conversation with your app provider can lead to pricing hikes being waived, however this is at the discretion of the app provider’s internal policies. Given these can change at any time, Nyla is not responsible for any updates to pricing for third party apps. 
  • Example (accurate at the time of writing): 
    • Okendo Reviews and Octane AI charge extra for headless support
• Additional setup required: a low number of apps require an extra setup step(s) in order to activate their service in a headless environment. 
  • Example: 
    • Attentive requires you to request access to the source ID from their support team and pass an additional QA process in order to submit signups via API. 
    • Loup.ai require you to coordinate with them as part of a headless transition
• Functionality / support issues:
  • Occasionally third party apps can have bugs on their functionality that are unrelated to Nyla. In the event that a bug or functionality limitation arises on the third party’s side, please reach out to the relevant third party app contact in order to expedite a resolution, or reach out to your Nyla Success team for a suggestion of an alternative, existing app to install. 

How to find out if an app is compatible with Nyla:  

To find out if an app is compatible with Nyla, this blurb is a good way to qualify whether the app provider in question offers headless support:

“We have a headless site with nyla.app that comprises a fully custom frontend up until checkout. We connect to Shopify using the Shopify Storefront API. Everything from checkout and beyond is powered by Shopify. Analytics can be added via Google Tag Manager. 

• Does your app have headless support for Shopify? If so, could you please share documentation on how to install your app on a headless site? 
• Are there any limitations on your app functionality for a headless implementation vs how it works on a Shopify theme? 
• Do you have any differences in pricing for using a headless setup? 
• Are there any additional setup steps we’d need to go through in order to get the functionality up and running?” 

Different types of apps: 

Apps typically fall into the following categories. Occasionally apps might fall into multiple categories: 

• Script based apps (most common) typically load a script on your Nyla site in order to work. Nyla may pass certain information to the script in order for it to function. In typical script based integrations, Nyla simply loads the script at the right time and with the right information required for it to function. Once loaded, the functionality of the script is owned by the third party provider. Script based apps can have content items, global scripts, form actions and link actions. 
• Source based apps: add a source so that you can use properties as you would with any source on Nyla. Source based apps can have sources, properties, content items, states, global scripts, form actions and link actions.
• Form based apps (e.g Back in Stock) require a form action being added in the right format to send information to the relevant location in the app.
• Analytics/Pixels only: These apps can be dropped in via Google Tag Manager and configured by a Nyla expert leveraging Nyla’s data layer.
• Checkout-only apps: If an app only requires access to Shopify (e.g anything from checkout and beyond) in order to function, then the app is entirely independent of Nyla.
• Backend apps: If an app only requires access to Shopify (e.g anything from checkout and beyond) in order to function, then the app is entirely independent of Nyla.
• Iframe: It is possible to use the Nyla Iframe content item to iframe other web pages into Nyla. Some apps only require an iframe embed to work, in which case it’s possible that no integration with Nyla is required at all. Some customers have also iFramed in pages from their Shopify theme in order to carry over custom development work, or to use apps that are only available on a Shopify theme at present. This approach requires that you ask Shopify Support to disable "x-frame-options: deny" default settings on your Shopify theme and potentially have custom development on your theme itself to support whatever feature is being iframed into your Nyla site.