How to build a Shopify store with a custom UI using Figma + Anima
Tags: webdev, devops, tutorial, tailwindcss
Published: 2022-08-25 09:21:26

---
title: How to build a Shopify store with a custom UI using Figma + Anima
published: true
date: 2022-08-02 17:56:29 UTC
tags: webdev, devops, tutorial, tailwindcss
canonical_url: https://www.animaapp.com/blog/design-to-code/build-a-react-app-fast-with-figma-anima-shopify/
---
![How to build a Shopify store with a custom UI using Figma + Anima](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pckesjudk3fj3cqd0ld.png)

We built a live eCommerce app in Figma using Anima's React Component Library. Then we turned it into a Shopify template and deployed it on Netlify using Anima's generated code. Here's how.

**Before starting**

1. [Sign up](https://projects.animaapp.com/signup) to Anima 
2. Install the [Anima plugin for Figma](https://www.figma.com/community/plugin/857346721138427857/Anima---Export-Figma-to-HTML%2C-React-%26-Vue-code)
3. Install [Node.js](https://nodejs.org/en/)

## Part one: Make your design interactive

We've added a ton of interactive open source React components to our Figma plugin. You can use them to create your own design file or duplicate our sample file to get started.

### Step 1: Explore the Component Library

1. Open the **Anima plugin** for Figma.
2. Select **Component Library**.

### Step 2: Insert a MUI component

1. Select **MUI** from the Component Library menu.
2. **Choose** the component you want to use and **customize** it for your application.
3. Click **insert** to add the component to your canvas, then incorporate it into your design.

## Part two: Go from Figma to React using Anima

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

### Step 1: Sync to Anima

1. **Open the plugin** in Figma
2. Click **Preview** , then **Sync**

### Step 2: Export React code

1. Open your project in the **Anima web app** and select **Export code**
2. Change Selected Framework to **React**
3. **Export code** for the entire project

### Step 3: Run locally

1. Unzip the downloaded code
2. Open **terminal** in the Anima code folder
3. Run `npm install`
4. Run `npm start`
5. Open `http://localhost:1234`

## Part three: Create a Shopify project with Hydrogen

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

1. Use [this guide](https://shopify.dev/custom-storefronts/hydrogen/templates#hello-world-template) to create another project with the basic Shopify features
2. Follow [this guide](https://github.com/netlify/hydrogen-platform#installation) to prepare your Shopify template for deployment to Netlify

## Part four: Combine Both Projects

Now we have two projects, one generated by Anima and the other one generated by Shopifys Hydrogen library. From now on, the Shopify Hydrogen project will be the primary project where all of the files and folders will be merged.

1. **package.json** : Add dependencies from Animas project into Shopifys and run `npm install`.
2. **jsconfig.json** : Change property _jsx_ from react to react-jsx.
3. **src** :
  1. **assets** : Create new _assets_ folder inside the _src_ folder and move the Anima projects _img_ and _fonts_ folders into it.
  2. **index.css:** Move the Anima projects globals.css and styleguide.css code into the Shopify projects index.css.
  3. **components** : Move the _components_ folder from Animas project into Shopifys project, and change all Link components to use `@shopify/hydrogen` instead of `react-router-dom`. 

![1_shopify-snippet-1.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724351258/CiNfwj4Kz.jpeg)

If the component has an image, replace the image source with a variable declared at the top of the file on an import statement (if path is specified by a prop then remove that prop and set the path based on the variable at the constants folder):

![2_shopify-snippet-2.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724453846/c9AK8JOPG.jpeg)

```
4. **routes** : Create new files for each page in the routes folder using [this guide](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) (the index.server.js should be used as the Home Page)
5. **constants** : If Animas project has generated multiple variables for the props of each page in the _App.jsx_ file, then create a _constants_ folder in the _src_ folder and add all these variables to its index.client.jsx file. Add **export** before each one, and if any jsx code has been generated inside any of these variables, then remove it.                                                                                                                                                                                                  

```

For example, if you have something like this:

![3_shopify-snippet-2.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724519042/a-zRP4Upa.jpeg)

It should be changed to this:

![4_shopify-snippet-4-1.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724528286/3w07wyZip.jpeg)

## Part five: Connect with Shopify API

1. Create a [Shopify Partner Account](https://www.shopify.com/partners/blog?logout=true&signup_intent=vap).
2. Create a Development Store by following [this guide](https://shopify.dev/apps/tools/development-stores). 
3. Add some products to this new store (it must have at least one variant). 
4. Generate a storefront access token by following [this guide](https://help.shopify.com/en/manual/apps/custom-apps?shpxid=64d125b7-CB6D-4025-A3D9-B7B4896E67C5#install-the-app-and-get-the-api-access-tokens). 
5. Add your storefront token and your store domain to _hydrogen.config.js._
6. Create a query by following [this guide](https://shopify.dev/api/examples/storefront-api), or use this code example to get product data:

![5_shopify-snippet-5.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724630670/39kzINxUl.jpeg)

Now in the HomePage you can use the products array for rendering each product card with the actual data from the Shopify store.

## Part six: Add a cart and checkout

1. Create CartProvider.client.jsx inside the _components_ folder with the following code inside:

![6_shopify-snippet-16.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724837378/BkyTGpmhx.jpeg)

1. Create CartUIProvider.client.jsx inside the _components_ folder with the following code inside:

![7_shopify-snippet-7.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724870301/7Du3CXbyr.jpeg)

1. Add Context to App.server.jsx:

![8_shopify-snippet-8.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724924340/4tjOpIhJf.jpeg)

1. Create AddToCartButton.client.jsx file inside the _components_ folder with the following code:

![9_shopify-snippet-10.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724952505/yq3Z9ZXpw.jpeg)

1. Wrap every product component with _ProductOptionsProvider_ from `@shopify/hydrogen/client`, pass the corresponding product to it, and use the created AddToCartButton:

![10_shopify-snippet-11.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660724986060/IZsvMhg-p.jpeg)

1. On the Cart Page we import the `useCart` hook from @shopify/hydrogen/client and render each selected product from the lines property (for more info check out [this tutorial](https://shopify.dev/api/hydrogen/hooks/cart/usecart)) then we display the total cost of the cart and add the checkoutUrl to the pay button:

![11_shopify-snippet-12.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660725030511/3KjOIqbCK.jpeg)

## Part seven: Add Tailwind CSS and Make it Responsive

### We'll be using the Tailwind CSS framework to make each page responsive.

1. Install tailwind css and its peer dependencies, and generate the tailwind.config.js and postcss.config.js files: 
```
$ npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer  
$ npx tailwindcss init -p

```
2. Add the paths to the template files in your tailwind.config.js file:

![12_shopify-snippet-13.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660725125237/VSA7k0nOT.jpeg)

1. Add the paths to the template files in your tailwind.config.js file:

![13_shopify-snippet-14.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660725142204/Mkq-gz_O7.jpeg)

1. Make each router page display the corresponding component depending on the screen size. For example:

![14_shopify-snippet-15.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660725175338/W5csUTbq6.jpeg)

## Part eight: Build & Publish to Netlify

[Netlify](https://www.netlify.com/) is a great cloud platform to host React apps. Follow their deployment guide to connect your repo and automatically deploy your app.

Heres [how to deploy to Netlify](https://support.animaapp.com/en/articles/6249334-how-to-deploy-to-netlify).

## See for yourself

- Check out the Figma file [here](https://www.figma.com/file/3OElA5HSMpPvgcax7rcr85/Anima---Shopify-Template?node-id=1%3A5045),
- Inspect the code [here](https://github.com/DiazIgnacio/hydrogen-app),
- Explore the live app [here](https://sweet-snickerdoodle-0d5fa2.netlify.app/).

* * *

The post [How to build a Shopify store with a custom UI using Figma + Anima](https://www.animaapp.com/blog/design-to-code/build-a-react-app-fast-with-figma-anima-shopify/), written by Ignacio Daz, appeared first on [Anima Blog](https://www.animaapp.com/blog).