Integrate Next.js App in Shopify Theme

Highlighted
Tourist
9 0 0

Hello everyone,

 

I've recently building a Custom Form and FAQ app with Next.js. Basically the app fetch FAQ elements from Re:amaze and display the informations to the user. This app is now deploy on Heroku and my last step is to embed this app on my shopify theme. Later I want to create features for creating/editing articles on the app admin.

 

So the point here is: How to display my App on my store where only app owner can access to the creation and editing part and display the FAQ articles on a page for my Shopify Theme end user ?

 

I've seen Script Tag and Embedded App on the documentation but I'm not sure if that fit my needs. 

 

Can you guide me for these next steps ?

 

Thank you and Happy new years !

 

 

0 Likes
Highlighted
Shopify Partner
135 4 57

Hey @Jbardon!

 

I've basically asked the customer to add the liquid tags themselves, since the location can be quite tricky (at least in my app).

So:

 

1. Generate some liquid snippet based on user input/outside information

2. Inject it into the snippets folder using the Asset API, capturing the name of the snippet for later processing

3. Instruct the user to use {% include snippety-snippet %} somewhere in their store.

 

It really is quite straightforward when you do it once. 

0 Likes
Highlighted
Tourist
9 0 0

Ok I try to explain in a more simple way. I've a React Application (whatever the app). This App is hosted on AWS or Heroku ( Or whatever ).

 

I want to use this app in my storefront by Injecting the script of the app in it. How can I do that ?  with the asset API ? Is it mandatory to have a validation and embedded that in a Shopify app ?

 

Sorry but the app creation is well explained in the documentation but only for the admin. It's a lack of documentation for a customer facing app feature !

0 Likes
Highlighted
New Member
1 0 0

Basically, you cannot directly use your react app in Shopify, however, you can utilize Shopify admin API on your backend or storefront API in your frontend.

0 Likes
Highlighted
New Member
2 0 0

You can, in fact, use React in your store. I am currently doing it, but it is very very dirty, haha. Basically...

I created a theme using the Shopify theme CLI. I created a directory for my React application to live. I set up with Parcel to output the bundle to `../assets/application.js` When I mount my React app I overwrite anything that is in the DOM.

https://buy.pedersonsfarms.com (WIP)

Note: You lose all SEO.

0 Likes