what is shopify polaris

hi i'm liz and i'm on the developer,relations team at shopify in this series,we're covering the basics of shopify app,development and the tools available to,help you build them in the previous,video we used the shopify cli to clone a,base node.js shopify app set it up in,the partner dashboard and create,products on our development store in,this video we're going to introduce,polaris shopify's design system and add,a new component to our shopify app,polaris is shopify's design system it's,made up of a combination of react and,css components that can be used to build,user interfaces that are familiar to,shopify merchants,it also has accompanying guides to help,you understand the how and the why when,it comes to building user interfaces for,shopify shopify apps can be embedded,inside the shop by admin or operate,outside as a standalone web app when,you're building an embedded app we,encourage you to use polaris to create a,seamless merchant experience you'll find,the documentation at polaris.shopify.com,you'll find components to help structure,your pages and layouts build forms and,provide user feedback,each component has example code,showcasing different ways the component,can be used,now let's get into the code in this,series we'll be building an app that,allows merchants to change the price of,products this exact app probably,wouldn't be that useful to merchants but,it should demonstrate the tools,available to developers we'll use the,polaris react components opposed to the,css components we recommend the react,components and they're what we use at,shopify open up the code that was cloned,by the cli in the previous video the,shopify cli app is an xjs app with a,custom server in the server folder,you'll find the server.js file that has,most of the backend logic right now,the routing end authorization flow,but in this video we're going to be,focusing on the front end,with next.js each page is a react,component that is exported from the,pages folder the base project already,has polaris installed but otherwise you,could install it with your package,manager,open up the app.js file,we can see at the top we've imported,polaris css into our project already you,should also see translations and the app,provider component imported,the app provider component is a required,component that enables sharing global,settings,this component must wrap your entire app,for polaris components to work correctly,now we can add a new component to our,project open the index.js file you,should see a page and a heading,component we're going to keep the page,component this is a structural component,used to build the outer wrapper of the,page,we're going to add a layout component,the layout component has three,configurations one column two column or,annotated we're gonna add a default one,column layout component inside the page,component,next we're gonna add an empty state,component empty state components are,used when another component has no data,to show maybe a list that will show,orders or customers you can provide the,merchant with context on what this space,will be used for once there is data and,instructions on how to get started we,can copy the code from the polaris,documentation this example also uses a,card component but i'm just going to,grab the empty state i'm going to remove,the secondary action button we don't,need it for this page,and update the primary action button,this button will open a resource picker,allowing us to choose products,and update the text descriptions now if,we preview the app we can see our newly,added empty state component there now,you should know that polaris and,shopify's design system there are a,collection of components and guidance on,how you should use them in the next,video we'll be covering approach a tool,used to build embedded shopify apps for,links to the code that was used in this,video check out the video description,for more information on building shopify,apps make sure to subscribe to this,channel and check out the documentation,on shopify.dev join the shopify device,discord server to meet fellow developers,and ask questions

Congratulation! You bave finally finished reading what is shopify polaris and believe you bave enougb understending what is shopify polaris

Come on and read the rest of the article!