shopify node js app for front end

[sachinjogcahnd]

i want to create app in node and react to change my cart page design? is there any way?

[newtonx]

Hello, 

yes, there are ways what exactly you want to do?. Do you want to develop an app for admin (embedded app?) or you want to modify the front end?

[sachinjogcahnd]

---

@newtonx wrote:

Hello, 

yes, there are ways what exactly you want to do?. Do you want to develop an app for admin (embedded app?) or you want to modify the front end?

---

hey thanks for replaying i want to modify front end cart page design.. would you like to explain how should i start with node js app

[newtonx]

Create the node js project locally with react and build to out the static HTML file. Once you get the file you can go to the Online Store > Themes > Edit Code and under Sections, you will find "cart-template.liquid" paste your rendered HTML in required div tag!. 

Recommended: To create new Snippet and paste your whole HTML (make sure you remove HTML/head/body tags) then call your snippet in "cart-template.liquid" like this

{% include 'mynew-cart' %}

For the CSS there 3 ways you can use <style> tag and paste there or upload your CSS to CDN server and add the <link href=''> tag in theme. liquid with this tag

{% if template == 'cart' %}
<link rel="stylesheet" href="">
{% endif %}

and use the same for style tag if you don't want to upload the CSS to CDN

{% if template == 'cart' %}
<style>
</style>
{% endif %}

and 3rd is on Edit Code page scroll down you will find Assets section where you can create new asset something like this "mycartstyle.css.liquid" and paste your whole CSS there and after that go to theme.liquid and in the header section, you can call your newly asset like this

{{ 'mycartstyle.css' | asset_url | stylesheet_tag }}

Or like this, if you want to apply your CSS only on the cart page

{% if template == 'cart' %}
{{ 'mycartstyle.css' | asset_url | stylesheet_tag }}
{% endif %}

I hope this helps you. Please do not hesitate to ask any question.

[sachinjogcahnd]

---

@newtonx wrote:

Create the node js project locally with react and build to out the static HTML file. Once you get the file you can go to the Online Store > Themes > Edit Code and under Sections, you will find "cart-template.liquid" paste your rendered HTML in required div tag!. 

Recommended: To create new Snippet and paste your whole HTML (make sure you remove HTML/head/body tags) then call your snippet in "cart-template.liquid" like this

{% include 'mynew-cart' %}

For the CSS there 3 ways you can use <style> tag and paste there or upload your CSS to CDN server and add the <link href=''> tag in theme. liquid with this tag

{% if template == 'cart' %}
<link rel="stylesheet" href="">
{% endif %}

and use the same for style tag if you don't want to upload the CSS to CDN

{% if template == 'cart' %}
<style>
</style>
{% endif %}

and 3rd is on Edit Code page scroll down you will find Assets section where you can create new asset something like this "mycartstyle.css.liquid" and paste your whole CSS there and after that go to theme.liquid and in the header section, you can call your newly asset like this

{{ 'mycartstyle.css' | asset_url | stylesheet_tag }}

Or like this, if you want to apply your CSS only on the cart page

{% if template == 'cart' %}
{{ 'mycartstyle.css' | asset_url | stylesheet_tag }}
{% endif %}

I hope this helps you. Please do not hesitate to ask any question.

---

hey thanks for response again. could you explain me how do i start cart page design from local node js app? how i access the cart page on my local app? the process you explain is from theme back end but i want to change the design from local node app  

[newtonx]

Hello again,

To my knowledge you cant access the cart page to your local nodejs app. But there is a way you use this with iframe on cart page and use ngrok for tunnel. This will give you ability to do the development locally and see the changes live on cart page.

Other way you can do without using iframe is inject your js file in theme.liquid and use the ngrok tunnel for your js development to see the changes live and in your js file you have to write the code which will inject your html into cart page.

Other then that i can't think of other way at this time.. its late night here.... if still didn't get it I can help via remote session or maybe skype with screenshare.

[sachinjogcahnd]

---

@newtonx wrote:
Hello again,

To my knowledge you cant access the cart page to your local nodejs app. But there is a way you use this with iframe on cart page and use ngrok for tunnel. This will give you ability to do the development locally and see the changes live on cart page.

Other way you can do without using iframe is inject your js file in theme.liquid and use the ngrok tunnel for your js development to see the changes live and in your js file you have to write the code which will inject your html into cart page.

Other then that i can't think of other way at this time.. its late night here.... if still didn't get it I can help via remote session or maybe skype with screenshare.

---

hey i would like to thanks to connecting with me. i want to create app to shopify in node js similar like this plugin 

https://wordpress.org/plugins/woo-update-variations-in-cart/  

it would be honor to me if you like to explain step step with node js app

[newtonx · Accepted solution]

Hello,

Follow these steps

1. Setup the Nodejs project locally

2. Design the cart page

3. You still need to edit the theme code in order to add the script/style tags

4. Generate the static HTML file from your node project using Webpack

5. use the Shopify Ajax API to update/add/remove the cart items (https://shopify.dev/docs/ajax-api/reference/cart)

6. Once you fulfiled all the above step message me again and I'll tell you next steps.

Remember that you eventually need to modify some code in the themes section in order to use your own design. If you are still not getting it I can build this plugin for you and of-course it will not be free 🙂

If you really want to learn. Follow the above steps and the steps I have mentioned in my previous posts and you will get what you need once you start working on it you will get a better understanding and your options.

[sachinjogcahnd]

---

@newtonx wrote:

Hello,

Follow these steps

1. Setup the Nodejs project locally

2. Design the cart page

3. You still need to edit the theme code in order to add the script/style tags

4. Generate the static HTML file from your node project using Webpack

5. use the Shopify Ajax API to update/add/remove the cart items (https://shopify.dev/docs/ajax-api/reference/cart)

6. Once you fulfiled all the above step message me again and I'll tell you next steps.

Remember that you eventually need to modify some code in the themes section in order to use your own design. If you are still not getting it I can build this plugin for you and of-course it will not be free 🙂

If you really want to learn. Follow the above steps and the steps I have mentioned in my previous posts and you will get what you need once you start working on it you will get a better understanding and your options.

---

thanks to solve my query. further part i`ll done to myself

[newtonx]

No issues at all. One thing I completely forget there 1 more way you can do the stuff without making any changes in the backend theme file is using App Proxy.

But for this, you have created your Shopify App here are the links for you to learn

For Application Proxy

https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio...

For creating the Shopify app in Nodejs.

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-express 

Regards,