How To Build A Catalog Manager for a Shopify Store
Tags: shopify, lowcode, dashboard
Published: 2021-12-03 09:03:53

---
title: How To Build A Catalog Manager for a Shopify Store
published: true
description: 
tags: shopify, lowcode, dashboard
cover_image: https://cdn.hashnode.com/res/hashnode/image/unsplash/c9FQyqIECds/upload/v1638521833530/drkw3UiQc.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress
---

n this article, we will be building a Shopify Dashboard that fits into your custom workflow. But before that, let’s set some context. Lots of store owners choose Shopify as their go-to online store. It’s a mature product with excellent features like the store admin panel and full API access. 

That said, it’s not without its flaws.

Integrating with no-native Shopify services can be a real pain, and it’s almost impossible to build custom workflows with the Shopify admin panel. We’ve also published another post on how to make a [Shopify admin panel.](https://www.appsmith.com/blog/building-a-shopify-admin-panel-a-step-by-step-guide)

In this article, I’ll be showing you how to overcome all of these hurdles so you can build a dashboard app for your Shopify store that fits into your workflow. We’re going to do this by covering the following concepts:
* How to integrate with Shopify APIs on Appsmith
* How to set a custom theme for your Shopify dashboard
* How to use dynamic parameters in API calls
* How to use the Google Sheets integration

[Feel free to peek into the app we’ll be building.](https://app.appsmith.com/applications/6170c03e515e45415cc7ec15/pages/6170c03e515e45415cc7ec19)

Sounds good? Let’s begin!

## How to integrate with Shopify APIs on Appsmith
Lots of services provide secure access to resources via APIs. This makes it possible to design complex workflow and unlock new capabilities. Shopify is not exempt from this rule as we’ll be extensively making use of their APIs.

To get started, enable [`Private apps`](https://help.shopify.com/en/manual/apps/private-apps) in your Shopify dashboard. Create a new app and configure the permission level. You’ll be presented with the following details to interact with the API securely:
Your store endpoint i.e `https://your_store_name.myshopify.com/admin/api/2021-10/`
A username
And also a password i.e `shppa_cc*******`

With these details, we can begin building the dashboard. [So signup for Appsmith if you’re yet to do so,](https://app.appsmith.com/user/signup) and create a new app.

In the new app, click on `Datasource` > `Create New`  > `Authenticated API`. Be sure to set `Authentication Type` to `Basic` and then fill the form. Here’s a quick snapshot of mine:

![creating a Shopify datasource](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634819968/blogs/Screenshot_2021-10-21_at_1.39.23_PM_bpvhrd.png)

Using the Shopify data source, let’s create a new API to get all products from the store. Call this `get_products` and it should be a request to the `products.json` route. 

![writing a query to get all products](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634820292/blogs/Screenshot_2021-10-21_at_1.44.44_PM_wzmcsp.png)
Now we have data coming into the app. Let’s go build some styled UI components to display this.

## How to set a custom theme for your Shopify dashboard
There are many widgets to choose from on Appsmith; the best part is that you can customize and style the look and feel of many. Let me show you how to do this.

From the widgets tab, drag a container widget into the canvas. In the opened configuration menu (called property pane), give it a `Border Radius` of 5 and set some `Box Shadow`. You should have a cool looking card container:

![styling the container widget](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634821352/blogs/Screenshot_2021-10-21_at_2.02.26_PM_qewyia.png)

Now you can bring in a list widget into the container and bind the data from the `get_products` query like this:

![binding data to the list widget](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634821729/blogs/Screenshot_2021-10-21_at_2.08.42_PM_g0eqiz.png)

And similarly, you can display the product image and name by accessing the data from `{{currentItem}}`. Here’s an example:

![displaying list item data](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634821889/blogs/Screenshot_2021-10-21_at_2.11.22_PM_lpjrwe.png)

Cool! That’s how easy it is to style components by using the `Styles` section in the property pane.

## How to use dynamic parameters in API calls
So far, our app can read data and display it in the UI. Now let’s add a flow that allows us to write data. To do this, let’s build a product update feature.

Using the concepts illustrated in the previous sections, build an update form UI that looks like this:

![update from UI](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634822734/blogs/Screenshot_2021-10-21_at_2.25.27_PM_xdpsej.png)

And should be configured such that all input widgets are named and have default values based on the product selected from the `product_list` widget i.e the tile input widget is named `up_title` and has a `Default Text` of `{{product_list.selectedItem.title}}`:

![customizing the title input](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634822886/blogs/Screenshot_2021-10-21_at_2.28.00_PM_tbc0aw.png)

Cool. Do the same for all the other input widgets in the form.

Now, using the Shopify data source configured earlier, create a new update query that takes input from the form widgets as parameters. Here’s an example:

```json
{
    "product": {
   	 "title": {{up_title.text}},
   	 "body_html": {{up_body_html.text}},
   	 "product_type": {{up_product_type.selectedOptionValue}},
   	 "status": {{up_status.selectedOptionValue}}
    }
}
```

![creating an update query](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634823036/blogs/Screenshot_2021-10-21_at_2.30.30_PM_fykwbd.png)

You’ll also notice that the ID of the product to be updated is populated from the product selected on the `product_list` widget and used in the endpoint URL.

Awesome! To finish this up, go back to the form submit button and configure it to run the update query. We should also add a `get_products` query so that all data in the app is refreshed i.e:

```js
{{update_product.run(() => get_products.run())}}
```

![linking the update query to the submit button](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634823475/blogs/Screenshot_2021-10-21_at_2.37.49_PM_vv0sct.png)

And that’s how easy it is to pass dynamic parameters to API calls!

Lastly, let’s talk about how to integrate with Google Sheets.

## How to integrate with Google Sheets
This section will be quite advanced, so stick with me! We will build a bulk import functionality from Google sheet, a feature not natively supported by the Shopify API.

To get started, create a new page and under `Datasource` > `Create New`, click on `Google Sheets`. Authorize the datasource and create a new API that we’ll call `get_products_from_sheets`. 

You can use [this sample sheet as a reference](https://docs.google.com/spreadsheets/d/1wI7Ahqj2mSaBRh2E9X_Q5Ua5-CecfoxWdU9J-LOpe6U/edit?usp=sharing) for the `Spreadsheet URL` config. Here’s a sample configuration:

![get products from sheets config](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634824535/blogs/Screenshot_2021-10-21_at_2.55.28_PM_qad4kr.png)

Now, you can build UI widgets to display the data returned as we did for the product list. In this sample, I used a table widget:

![displaying sheet data](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634824609/blogs/Screenshot_2021-10-21_at_2.56.43_PM_qtry03.png)

When the `Sync` button is clicked, we loop through the items and create each product by making a couple of API calls. Also, notice here that we have parameters passed to the API calls as the third arguments:
```js
{{
	(() => {
  	get_products_from_sheets.data.forEach((i) => {
    	new_product.run(
      	(res, i) => {
        	new_image.run(
          	() => {},
          	() => {},
          	{ ...i, id: res.product.id }
        	);

        	new_price.run(
          	() => {},
          	() => {},
          	{ ...i, id: res.product.variants[0].id }
        	);

        	new_track_inventory.run(
          	(res, i) =>
            	new_inventory.run(
              	(res, i) => showAlert('Added: '+i.Title, 'success'),
              	() => {},
              	i
            	),
          	() => {},
          	{ ...i, id: res.product.variants[0].inventory_item_id }
        	);
       	 
      	},
      	() => {},
      	i
    	);
  	});
	})();
}}
```

And here’s a snapshot of each of the queries call:

![new product](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634824959/blogs/Screenshot_2021-10-21_at_3.02.32_PM_da2wto.png)
![new image](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634825022/blogs/Screenshot_2021-10-21_at_3.03.36_PM_up6rpb.png)
![new price](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634825059/blogs/Screenshot_2021-10-21_at_3.04.14_PM_gkplgd.png)
![new track inventory](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634825105/blogs/Screenshot_2021-10-21_at_3.04.58_PM_xuhsyf.png)
![new inventory](https://res.cloudinary.com/confidenceappsmith/image/upload/v1634825185/blogs/Screenshot_2021-10-21_at_3.06.20_PM_pcptmu.png)

You can learn more about these resources/endpoints in the [official Shopify docs](https://shopify.dev/api).

## What’s next?
![you did it](https://i.giphy.com/media/3otPoS81loriI9sO8o/giphy.webp)

Congratulations, you did it!

So far, we’ve implemented the core functionalities such as viewing, updating, and bulk import of products. But you can expand on this and add additional services i.e., payment with Stripe.

The floor is all yours! We’d love to see what you add next. By the way, [give us a star any time you visit github](https://github.com/appsmithorg/appsmith).