在我的 React 应用程序中实现一个功能，用户可以将我的产品添加到他们的 Shopify 商店

Question

I have a website built with React and Gatsby and NodeJs in backend. For state management I'm using Redux. In this website I sell products and I'm trying to implement a new feature where each product will have a secondary button which says 'Add to Shopify', near the buy button. I can access the product's data easily but the problem is creating a function which uses that data to add the selected product to their Shopify store. It's kinda like dropshipping.

One solution that it popped-up in my head was opening a pop-up or redirecting the user to their Shopify store where they can get authenticated (get the store name and accessToken) and make a post request to that store with my product's data.

Is this possible to do and if yes, how can I tackle this problem?

If this is not the right way, can you help with another solution?

Answer 1

Yes, you have figured out the right approach.

To do so, you need to create a public Shopify App . You can make the app listed or unlisted as you choose.

Once a user clicks Add to Shopify , initiate the OAuth flow to get Access Token. Once you have the Access Token, create Shopify product using REST API via Node.js Module for Shopify .

To build redirect URL, so that Client can install your app directly, use something like

https://{clien-shop-name}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={...}

App Install using URL

Sample code in your Node.js app would look something like

const Shopify = require("shopify-api-node");
router.post("/your-end-point", async (req, res) => {
  try {
    const shopify = new Shopify({
      shopName: "your-shop-name",
      accessToken: "your-oauth-token",
    });
    const product = await shopify.product.create(req.body);
    res.status(200).send(product);
  } catch (ex) {
    console.log(ex);
  }
});

Answer 2

Do you want to know where to find the #1 winning products in the world? Register here and you will get to know all the winning products