Embed react app into shopify theme

Johnn129
Visitor
3 0 10

I am trying to create a shopify store to sell custom t-shirts . I am hoping to use an existing theme from the shopify theme store so i don’t have to code up a home page, FAQ page, cart page, etc. I will however need one custom page that is not in a theme. I have developed this page as a React app. This page allows users to design what they want on the t-shirt.

 

1)What is the best approach to integrate my react app into an existing storefront theme? Essentially I want to embed this app inside a product page of the theme. Is a script tag or App proxy the correct approach?

 

2)How can I have a user add their completed t-shirt design to the cart from with my react app? I want to eventually link back to the theme's cart page.

 

3)The completed t-shirt design will be jpg/png. How can I add this image to the order so that I can later retrieve it from the Admin panel or shopify API (for printing after checkout is completed)?

 

Thanks in advance.

Replies 16 (16)

Peep
Shopify Partner
1 0 4

Hello John

 

I've been responsible for developing couple of React-only storefronts.

 

Shopify offers a toolkit called Slate for developing themes and on top of that there is a theme called slate-react-starter that you cand find from here: https://github.com/liron-navon/slate-react-starter

 

I've been developing the themes on React only and using AJAX to make the cart changes etc, however with that method you can seamlessly run the Liquid templating and initialize React on templates where necessary.

 

Hope it was help for you

Peep

Johnn129
Visitor
3 0 10

Hi Peep. I am just trying to embed a react app inside a page of the storefront. I want to use an existing theme, so it will not be a React-only storefront. I mainly want to know the proper way to load a react app inside an existing theme. Thanks.

Pacific_Hustle
Shopify Partner
34 0 10

BUMP

 

It doesn't look like this question has been answered. Does anybody have a solution, I'm also in the same boat. 

 

I already have a Shopify theme that I customized for myself, but there are a couple of pages that need to be able to work together and I wanted to make them using React. 

 

Is it possible to have the current theme that I have but also incorporate React into several pages that would work together? I know that you can use some <script> tag to link in the React library, but then that means I'd have to do that for each of the pages that I need to be React-based.

 

But I also noticed this question is in the API/SDK section of the forum. My need is specifically theme development.

Jbardon
Tourist
9 0 0

Up, I also don't find this information. Help could be appreciated. 🙂

fremfi
Tourist
10 0 2

I'm in the same boat too, hopefully someone from shopify can address this question

Jbardon
Tourist
9 0 0

It's awesome, the documentation explain really well how to create the app for the admin but not really for the frontend app ! 

 

Seems like the majority of the apps around Shopify store injecting a script from a remote server (CDN, whatever). I send you an exemple from Smile IO script tag integration below.

 

{% assign smile_channel_key = shop.metafields['smile'].channel_key %}
{% if customer %}
  {% assign smile_api_secret = shop.metafields['smile'].api_secret %}
  {% assign smile_customer_accepts_marketing = customer.accepts_marketing %}
  {% assign smile_customer_email = customer.email %}
  {% assign smile_customer_first_name = customer.first_name %}
  {% assign smile_customer_id = customer.id %}
  {% assign smile_customer_last_name = customer.last_name %}
  {% assign smile_customer_orders_count = customer.orders_count %}
  {% assign smile_customer_tags = customer.tags | join: "," %}
  {% assign smile_customer_total_spent = customer.total_spent %}
  {% assign smile_digest = smile_channel_key
    | append: smile_customer_accepts_marketing
    | append: smile_customer_email
    | append: smile_customer_first_name
    | append: smile_customer_id
    | append: smile_customer_last_name
    | append: smile_customer_orders_count
    | append: smile_customer_tags
    | append: smile_customer_total_spent
    | hmac_sha256: smile_api_secret %}
{% endif %}

<div class="smile-shopify-init"
  data-channel-key="{{ smile_channel_key }}"
{% if customer %}
  data-customer-accepts-marketing="{{ smile_customer_accepts_marketing | escape }}"
  data-customer-email="{{ smile_customer_email | escape }}"
  data-customer-first-name="{{ smile_customer_first_name | escape }}"
  data-customer-id="{{ smile_customer_id | escape }}"
  data-customer-last-name="{{ smile_customer_last_name | escape }}"
  data-customer-orders-count="{{ smile_customer_orders_count | escape }}"
  data-customer-tags="{{ smile_customer_tags | escape }}"
  data-customer-total-spent="{{ smile_customer_total_spent | escape }}"
  data-digest="{{ smile_digest }}"
{% endif %}
></div>

On page load, if you pay attention to the network, an incoming request come from: https://js.smile.io/v1/smile.js

 

 

This is how I think that work:

 

  A/ Smile.IO upload their script code on their CDN. 

  B/ In this script the div "smile-shopify-init" (wich is a widget showing on click) is triggered.

  C/ The script attach all the event with the data attribute needed for showing the infos to the customer.

 

So a potential solution to test should be:

Create the react app -> Build the app -> Put the react script previously build on a CDN -> Loading the script on your Shopify store -> Inserting the div at the place you want to show your app.

 

For the first part maybe you can do that Johnn, and using the Shopify API from your React app (for the integration of the buy button etc ... ) ?

 

 

 

 

 

 

jbgrunewald
Shopify Partner
21 1 6

There are a few different ways you can accomplish this by building a react component and publishing a UMD build of the component to NPM.

The https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#universal-module-definition-... page will walk you through a basic project setup that has prebuilt scripts to do what you want to accomplish. Once you've built and published the component, it's a simple matter of adding some scripts to the page you want to add these to. If you are using the complete defaults you'll want to add the CDN imports for react also, because it won't get bundled with your component. However, you can bundle it with your component if that's easier for you to do.

 

https://reactjs.org/docs/add-react-to-a-website.html#tip-minify-javascript-for-production, that gives your the scripts to add to pull react in separate from your component.

 

If the steps necessary aren't clear I might make a video tutorial of how to do this. You can also use the admin api scriptTag resource to do this on every page the script is loaded on. This is a technique I use for building react components and loading them onto Shopify stores. 

fremfi
Tourist
10 0 2

Yes, please do a video tutorial

jsimoes
Shopify Partner
3 0 0

I'm in the same boat. I want to use Shopify for ecomm and sell a digital product. The digital product has an interactive UX (built in React) that can only be enabled once the product is purchased.

I'm thinking I may abandon the Shopify store site and just list my product for sale on my React app and tie in the payment-processing/e-commerce with the StoreFront API.

Thoughts on that?

Pacific_Hustle
Shopify Partner
34 0 10

Wow, I'm surprised people are still commenting on this thread.

Honestly, it sounds like you're best bet is developing your React app and tying in the payment-processing/e-commerce with the StoreFront API. By doing this obviously you lose the store builder options that comes with using a full Shopify website. But with what we're trying to achieve, this seems like the only option jsimoes. I hope it helps, honestly wasn't the answer I was hoping for either.

jbgrunewald
Shopify Partner
21 1 6

@jsimoes 

I'd need much more context to say for certain, but it sounds like Shopify isn't really the solution you need. If you have the skills to build a basic app for selling your product you just need a payment processor. I'd recommend Stripe, they have both HTML5 and React components that you can mostly drop into your app and add the payment processing without much effort. Mostly just creating an account and doing a little work to wire things up. 

Is there a reason why Shopify is a good choice for selling your product? Shopify seems better suited to stores with many products/variants in general.

sunilyadav84
Tourist
3 0 1

I have done such type requirement by this tutorial

jbgrunewald
Shopify Partner
21 1 6

@sunilyadav84 That approach works well if you are building your own custom theme from scratch and control the entire ecosystem. My approach is better if you have a theme from another source (i.e. bought or a default Shopify theme), and you want to add a widget or plugin or your own. Both approaches are fine, but how you might set it up are different. I'm working on finding the time to do a tutorial of my approach which is the latter approach. I don't build themes (right now), I write apps. A common feature for a Shopify app is to add a modal or a component of some kind to a page. If you want to do that without asking consumers to edit their template code, you need to use an approach similar to what I'm talking about.

As far as following the tutorial and things working or not working, that's not something I can address here. I'm happy to consult and help you build a theme. The alternative is you'll need to learn the hard way and figure out where things are going wrong. The challenge with these tutorials is they are often stale, and if you aren't an experienced developer it can be a challenge to close the gaps where things have changed. These project setups with webpack, npm, react, babel, etc... can be very time consuming to setup. The more custom your setup, the more difficult it can be. As a developer, these are the things I usually try to avoid customizing. I like create react app, nwb, and other tools because they abstract away the overhead of configuring all of these things. I don't want to be a webpack expert, I want to write some apps. Sometimes there's a really compelling case for deviating from their standard setups, but you're going to invest a lot of time when that happens or create your own boilerplate setup to save time in the future.

faroutchris
Shopify Partner
4 1 2

Adding a React component to a page is quite simple. You don't need to rewrite the theme or make one from scratch to include a react component/component tree somewhere in your existing application.

The steps would be something like this:

1. Make a build, usually something like

 

npm run build

 

2. Copy over the finished bundle from the build folder into your themes javascript folder. Or upload it to a server.

3. Add the <script src="path/to/file"> tag to your html.

4. Create a html tag to mount your react app. Somewhere in your react code you've probably already added something like this:

 

ReactDOM.render(
  <MyRootComponent />,
  document.getElementById('root')
);

 

 So, that means you need to have a "<div id="root"></div>" somewhere in the liquid template.

luiquao
Tourist
4 0 2

Bump!

I'm using Cart's API in my custom react component to add items to cart by sending POST request to /cart/add.js. Is there any way to update the UI such as CartCount and display that "Just added to your cart" notification?

I could just query that using document.getElementById("CartCount") but it feels like a hack. There is a method for that in theme.js (using basic Deput) but i am not sure how to call that function.