Embed react app into shopify theme

Highlighted
New Member
3 0 3

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.

2 Likes
Highlighted
New Member
1 0 1

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

1 Like
Highlighted
New Member
3 0 3

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.

1 Like
Highlighted
Shopify Partner
6 0 2

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.

2 Likes
Highlighted
New Member
5 0 0

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

0 Likes
Tourist
7 0 1

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

0 Likes
Highlighted
New Member
5 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 ... ) ?

 

 

 

 

 

 

0 Likes