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. This includes enabling you to make the most of the Shopify third party ecosystem whilst optimizing for site performance and editability.

Apps on a site using Nyla and Shopify have the following entry points:

Nyla: Powers your site for everything up to checkout
Shopify: Powers the checkout and backend of your site (e.g managing products, collections, customers, orders, fulfillment and so on)
Google Tag Manager: Can be installed on Nyla to add custom tagging using Nyla’s data layer

Third party Shopify apps can be plugged into this setup in order to deliver additional functionality that helps your team or your customers.

Nyla & App Integrations

Nyla sites are “headless” frontends that replace your Shopify theme (up to checkout). This means that app installation differs from when your entire site uses a Shopify theme.

Integration can be required: Apps that interact with the frontend of your site (before checkout) need to be integrated with Nyla in order to work. (Continue reading for more info on how to identify if an integration is required or not).

However, setup is easier: Nyla’s no-code approach makes it even easier in many cases to install apps that are already integrated with Nyla site than on a Shopify theme. It’s possible to install apps without code, and our ever-expanding set of templates and blocks enable you to drop in apps with best practices right out of the box. What’s more, whenever an app is added to Nyla, it becomes available for all Nyla customers, so keep an eye out for new additions and upgrades which are added on a regular basis.

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 by reaching out to your Success partner.

When integrations aren’t available, please reach out to your Success partner to help you select a ready-integrated alternative that’s already good to go, or to discuss adding a feature request to our backlog if you have a flexible timeline.

How to know if an app needs to be integrated with Nyla in order to work

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 the Shopify portions (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 unjustifiable pricing increases on behalf of app providers).

Wherever possible, we recommend using existing Nyla integrations in order to implement new activations. 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. If you have any questions about activating existing Nyla integrations, please reach out to your Success partner.

3P complexities

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

Headless compatibility issues: entire 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. Some apps are fundamentally limited to only working in a Shopify theme for example. 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, for example certain loyalty rewards, or add to cart functionality on a product finder not being available on headless sites due to app provider restrictions.
  - Many cart-based apps are incompatible with Nyla given that they depend on being inside of a Shopify theme in order to work. Iin most cases these can be superseded by better 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 totally 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 when moving to a headless setup.
- 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.

What does the integration process look like?

If you don’t see the app you want in Nyla apps, and it requires integration with Nyla in order to work, this will require you to make a feature request in order to get the app added to our apps library.

We’re actively seeking to improve Nyla all the time, so we welcome feature requests for the best and brightest of the app ecosystem that will help your business to thrive. Given limitations on our internal capacity, our Success team will first partner with you to suggest an alternative solution that you could adopt from existing app or Nyla native functionality. If a feature request is necessary, we do our best to integrate requested apps in a timely manner, but are unable to provide exact timelines.

To allow more flexibility in the future, we are also actively working on a way to enable app providers and Nyla experts to integrate apps directly, so please stay tuned for updates on this.

Today, if you want to make a feature request for an App that you need for your business please:

Reach out to your Success partner to discuss your needs; they might be able to suggest a tried and tested solution
If needed and timing is flexible/available, make a Feature Request to your Success partner
Once work begins, we’ll get in touch with you and help you with the rollout of the feature
Any app that has been added to Nyla is available to all Nyla users at once

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.