what is shopify catalog button

hello everyone it's great to have you,here today we are going to be having,another live demo and i'm so glad that,you are going to make it so i'm going to,share my screen so that you can see some,of the slides we have prepared and then,with that we can kick things off,so let me go ahead to share my screen,okay,so i think you should be able to see my,screen,all right so in today's demo we are,going to be building,a shopify catalog manager with google,sheets so we'll be integrating largely,with the shopify api and we'll also show,you how to use the,google sheets integration that is,available in appsmith so it's so great,to have you here i'm glad that we are,all able to join in today is october 21,and we are having our live demo again,today,so in case you are not familiar with,appsmith or if this is the first time,you are learning about appsmith,absolutely is a simple framework for you,to build uis quickly using a drag and,drop interface as you've seen shortly,we're going to be having a demo so that,we walk you through the process of,building applications on appsmith,specifically focusing on using the,shopify api and you'd see how quickly,you can get your apps up and running,using appsmith you can quickly build,apps in absolute using these three,simple steps uh the first is you connect,to a database or an api so say you have,a mongodb database setup or postgres,database or you have an api like a,google sheet or shopify api that we,would be using today you can easily,connect to these apis and then start,building your,application the second step is to,bind data coming from the apis into,widgets so you build the ui using the,drag and drop interface you will have um,a number of pre-built widgets that you,can choose from we have the table widget,we have the list widget we have the,image reader and so much more so you can,bring in data from your database that,was gotten from step one and binds that,into widgets that can be displayed in,the application and lastly you can go on,to,publish and share your application so,that everyone is able to see this,okay i just got a message that the,screen sharing is not working so let's,see if this would fix it,okay i think um,that would do,all right thank you for letting me know,okay so going back to the first slide,today's demo is going to be about,building a shopify catalog manager with,google sheets and it's nice to have you,here if you're not familiar with,appsmith i already went through the,three simple steps you can take to build,applications on app submits the first is,to connect to your data source which can,be database you already have set up so,say something like mongodb or it could,also be an api as we'll be doing for,today's demo we're going to be using the,shopify api the second step is to,connect data coming from the database or,the api into ui widgets we have a list,of prebuilt ui widgets and i'm going to,show you how to do that in today's demo,and lastly after building the,application to your satisfaction you can,go ahead to publish the application and,share it and you can also invite team,members to come in to also work with you,to build the application collaboratively,so what are we going to build today,we're going to be building the shopify,catalog manager and i also use the,opportunity to show you how to use the,google sheets integration we have inside,of app submit,so this is the application we are going,to be building today um let us do a,quick tour of the application so i have,this opened up right here,and this is the application that we,would be building today so it's a,shopify catalog manager and that would,mean it allows us to manage products,that we have in our shopify store so i,have a shopify store set up here which,is what you can see right here we have,the shopify store here and this,dashboard we have built would be used to,manage products that um we have,for the store so we can,click on the products to see more,information about that product and here,we have all the details about that,product we can go into a deep the,details of that product by clicking the,submit button making the change clicking,on the submit button and we can also,delete a product and interestingly we,can add new products by using,the dashboard we have here one cool,feature that this application has is the,ability to,bulk import products into the shopify,store so this is something that you,can't do,natively with the shopify api but,because we have the power of appsmith,and google sheets and the shopify api,brought together um in one place in the,absolute platform we are able to perform,our functions or features that are not,natively supported so here i have a,google sheet that has some product data,and we can see that we have that same,information showing up here on the,application so i can click on the sync,button and this would upload all the,products specified here on the google,sheets into my shopify app and would see,that in the um store right here when i,reload so i'm just going to reload this,and you can see that we have man's pants,we also have um the women's pants,although that's not active so that's why,we can't see it it's marked as being in,the draft so we can sit until we go back,to make that active,so this is largely what we would be,building today,so as we're going to build this what,will you learn so what can you expect to,learn,from following us as long as we're going,to build this application together the,first is that you would learn how to,work with third party apis and that,includes creating authenticated apis,that um have various authorization,strategy and you also learn how to,send up dynamic data into apis as,parameters so that when the apis are,called with the parameters you send up,you get responses based on the,parameters that they are called it the,second thing you also learn how to do,by following along is you would see how,to customize and style your applications,so we have a really nice looking,application here with some um card,looking containers and really nice,buttons so i'll be showing you how to do,all of that in this demo and lastly,we'll see how to use the google sheets,integration as we go along to build this,application so with that um we can get,started,i'm just going to head back to the,screen i have ready for building the,application so right here i have this,data application on appsmith and what we,have right here is some bare bone,widgets we have a container widget here,with the text that says shopify catalog,manager and here we have a divider,widget and taking a look at the data,sources section we have um,a couple of apis that i'll be coming,back to explain why we have them here,and also builds more as we go along um,in the demo today,so the first thing i want us to do here,is to,um connect to the shopify api so to do,that we need to go into data sources,create new and here where it says,authenticator api i'm just going to,click on that so let's call this shopify,api,and there we have a name for it so for,the url i'll need to supply my store,um url this would be the um endpoints to,my store api because taking a look at,this url we have my app name and then we,have the api version that we are working,with we also need to set some,information for authentication so for,the authentication type this is going to,be basic off and i'm going to set my,username right there,and also want to set my password,right there and i can click on the save,button and here we have an authenticated,api that talks to the shopify endpoint,so the first thing i want to do is to,create a new api using this shopify,authenticated data source in order to,fetch products from my store so to do,that i'm going to click on the new api,button right here,and we can give this endpoint a name so,let's call this get products,all right and it's going to be a get,request,using the shopify data source we just,configured and this is going to be,hitting the product,dot json,resource so let's test this by clicking,on the run button,so i think this should be products.json,and here we have um,information about the products coming in,um as the response so now we are getting,all products from the store we can now,go into build widgets that will allow us,display uh the products we have coming,in right here so the first,thing we need to do is to head back to,the canvas,and let's drop in a container widget so,i'm just going to bring in a container,with it,so let's expand this,all right this looks good,now we have a container with jet on the,canvas uh i want to quickly do some,styling of the container widget so i'm,going to set a border radius of 5 pixels,and also give this some box shadow and,going back you see that we have a nice,shadow around the container making it,look like a card so that's the kind of,look we are going for in this,application and now i can go on to bring,in this widget to display the data,coming in from the get product squared,so let's bring this to,jet so i'm going to drop this right,there,and we can expand this,and here we have the list widget so for,the,unlisted i'd like to update the name of,this list reject to product,list,and for the items which is the data we,want to be displayed in the list widget,we can easily grab that from the get,products dot data query,you can see that we have another,um key that we need to uncheck in in,order to see the products and that's the,product so i can do data.products,and here we have an array of all the,products that are coming from the store,so we can go in to customize the items,in the list in order to display those,products so the first thing i want to do,here is to,display the product title so let's,expand this and for this text widget we,can see,current item dot title,and here we have the project title,the product title we can also display um,the status of the product so let's do,that using second text widget we have,here so this is going to be,current item status,and here we have um both the,product title and products data stream,now lastly we can reuse the image that,we have here to display the,um product image so let's expand this,and let's go in to say,current item dot image dot src,and then we have the product image,showing up so um,just by bringing in widgets and,connecting to a data source the shopify,data source we are able to build an,application that,gets data from the shopify api and,displays it on the canvas and we can um,page through to check to see if,everything looks good um and we can see,that everything works nicely,um before moving away from this widget,we can bring in a text widget here to,serve as a title for the list so let's,call this,so i'm going to call this,product,list,and we can go in to start this a bit by,increasing the font size and then we,have created a list and lastly i would,want to drop a,button that will allow us to create new,products so we'll come back to this to,finish that up,right now we have the flow for,displaying products so the next thing i,want to do is we want to be able to,view a product and edit it so for that i,would need a button so let's just bring,the button right here,and place it in the list item so let's,call this button view,and what i want to do here is to start,this button up a bit so for the button,variant i'm just going to set this to,tetrary i want this to be rounded and i,wanted to have some box shadow and going,back to the canvas you can see that we,have nice looking view buttons showing,up here that does not um drag your,attention but they are visible whenever,you want to make use of them so clicking,on the view button will allow us to see,more information about the product and,we are going to build a form that lets,us to see,that data and also to update that data,so to do that we would need to bring in,a form widget so i'm just going to bring,a form widget here,so let's form,so i'm going to bring the form right,here,and expand it to take up this entire,space i think that looks okay again so,i'm just going to reduce this a bit okay,that looks nice and i'm going to bring,the buttons to the bottom so that we,have enough room to,uh,move other widgets into the um form that,would need,for the updates and viewflow so for the,form itself i want to start this a bit,so i'm similarly going to set the border,radius of 5 pixels and give it some box,shadow and going back you can see that,we have some nice box shadow around,the form widget,all right,so now let's start displaying um,information about the selected product,from the list so right here we have um,this jacket selected uh the first thing,i want to do here is to,show the id of the product that we are,editing so we can use the text suggest,we have here i'm just going to reuse,this,put a hash sign and,to access the id of the item selected on,the list uh remember that we updated the,name of this list the product list so,what we need to do here is just to,access that list and view the item that,has been selected so this is going to be,product list dot selected item,dot id,and then we have the id showing up so,let's um,edit this a bit so that looks nice i'm,just going to expand this and that's the,id of the,product selected so going to select on,this t-shirt we have right here you can,see that that id has been updated and,this will apply to every other widget,that will be bringing within this form,so the next widget we need is a text,widget,and we want to use this to,build,an impute for the title so let's call,this title,and we can go in to bring a text,input uh to bring in an empty widget to,uh display this so let's bring in impute,so we have the mp2 jets right here,and i'm going to expand this,for the widget name so i'm going to,update this from the default input one,to update products title,and for the default text we want that to,be coming from the item selected on the,product list so let's do product list,dot selected item dot title uh because,i'll need this a couple of times so i'm,just going to copy this,um binding so this would be selected,item.title,and then we have the title of the,products selected here also trained up,right there we need another input widget,and this is,uh no we would need another input but,not an input reject so we would need a,rich text editor,so let's bring in a rich text editor,right here,and we can expand this,uh let's simply bring any text to jets,to serve as the label,all right so we have the texture that's,here i think that's too close so i'm,going to bring this a bit down so that,we have some space between,the entries so this is going to be for,the body,so let's call that body and,we want the rich text editor,uh to display the body html of the,product selected so let's just call this,update products body html,and for the default text,we can get that from the selected item,on the list and this is going to be body,html as a guest and here we can see the,description of the products in html form,displayed properly within the rich text,editor,the next you want to do is to display um,the product type and this is going to be,drop down but i'll need a text widget in,order to display this properly so i'm,just going to bring in the text widget,let us call this product,type,and we can,bring in,a select widgets here,to display products type so let's expand,this,for the widget name we're going to,update this to updates product,product,type,all right,and similarly for the default option,this is going to be coming from um the,product type of the item selected on,this so this is going to be product list,dot selected item dot,product type,and we need to supply some options,because right here what we have uh we,have only the default options showing,here so we need to select i'm putting,some custom options for the options i,have here we have an option for,mains clothing we have another option,for women's clothing we have one more,for children's gluten and these are all,the options we have here so i'm taking a,look at this t-shirt we have here we can,see that the product type of this,t-shirt falls under the women women's,gluten category so we can go in to,use that and similarly we want to,display the status so we would need a,text widget i'm just going to bring this,right here,and let's call this,status so this will let us know if the,product is kind of like published so,that it shows up on the um storefront or,if it is in a draft state so let's bring,in a select widget to similarly display,this,so i'm going to put this right here,and expand this,all right so for the widget itself let's,call this,update status,and for the default option this is going,to be product list dot status,and we also need to put in some options,we only have two options um in this case,and we have the active option and we,also have the draft option and those are,the two options we have available for,this state,all right,uh lastly we need to bring two impute,widgets for updating the price and the,quantity of the products so i'm just,going to bring the text widgets here,so let's call this price,and we can bring in an input widget to,display,the current price,of the item selected,so for the input project we're going to,update the name of the widget to update,product price,and for the default text this is going,to come in from the product list dot,selected,item dot variants which is an array we,want to get just the first item here,and we have that price,and then we can see the price showing up,uh since price is in numbers we can set,the input type to be of type number so,that would ensure that only um valid,numbers can be entered into the compute,and similarly let's do the same for,um,the quantity so this is going to be,quantity,and we can,bring in a text widget and input will,just rather to display the value so,let's bring this here,so i'm going to call this,update product quantity,okay,set this to number and for the default,text this is going to be coming from,variance dot inventory,quantity,and then we have that,number showing up so taking a look at,the form we have right here we have,beauty form that allow that allows us to,view more information about the product,selected so we're going to select this,backpack for example you can see that we,have everything here updated to display,the data of the item selected from the,list so right now this form only allows,us to view data but we can't update data,so let's um build in functionalities,that would allow us to update data shown,in the form,all right,so,the first thing i want to do here is to,update the button here the one called,reset to actually perform a delete when,it is clicked on so before going in to,customize the button let's create a,query that allows us to perform a delete,action so let's go back to data sources,we have our shopify api data source i'm,just going to create a new api and let's,call this,delete,product,and this is going to be a delete request,to forward slash products,forward slash the product id and for the,product id we can grab that from the,product list so this is going to be,product list dot selected item dot id,and,lastly we need to add dot json,and that would hit the delete endpoint,so we can go back to hook this up to the,button here so for the button we want to,update the text or the label to say,delete,and we can similarly style this so let's,give this a color of red,we can give this a button variant of,secondary make this rounded give it some,box shadow and i think that looks nice,then when it is clicked on what we want,to do is to go to execute the delete,query we just um configured so we want,this to call the delete product query,and when that is successful we want to,call the,get product query so that we have um the,data in the application um refreshed to,reflect um the item that has been,removed so i'm just going to go to,delete one of these items so we have one,of these here so i'm clicking on view,and this is for women's pants for so i'm,just going to delete this,and you can see that that has been,removed from the list so we have the,delete button working um flawlessly the,next i want to do is to configure a flow,that lets us to update a product and for,this we need to build multiple apis so,we would need to have about three apis,in order to update a product and this is,because uh the shopify api has resources,distributed i think that's the kind of,architecture they wanted to go for so it,makes it easy to reuse those resources,in other place without needing to update,every everything else so the first,resource we need to hit is the one that,lets us update the title body and the,are the title body product type and,status so let's go back to the shopify,api,let's create a new endpoint,and this is going to be hitting the,product routes,the product id.json so this is going to,be products for slash product id.json so,let's call this update,product,and this is going to be a put request,so let's say this is a put request,to,this endpoint which is products then the,product id similar to what we did for,the delete flow dot json and since this,is a put request we need to send up some,payload so we have the payload here,all right this looks good so we're,setting up the title and for the value,of the title we are picking that from,the form inputs so remember we have a,title input called,update product which is up or up,title so that is the input right here,and we are reading the text value from,that widget and taking a look at the,evaluated value you can see that we have,the correct um value being picked up by,the form,same thing goes for the body html the,product type and also the status we are,all picking these values from the,widgets within the form,all right this looks good we also want,to make um another endpoint to update,the price so we cannot use the previous,api endpoints of the price we have to,call it different api so this was what i,was trying to explain earlier and for,this,we can update the name of these,endpoints to be update,price,so this is going to be a put request,and it's going to be hitting a different,resource so it's hitting the variance,resource and we need to pass the variant,id and then fold and that and then that,will be followed by dot json so we have,variance,uh variant id dot json,and for the body we can pass up the,price for,the product we want to go beat it so,this is going to be the price and this,is being picked up from the price input,you can see that in the evaluated value,window we have that's currently showing,lastly we want to update the quantity,and for that we need a different api to,do that so let's configure the last api,we would be needing for the update flow,so let's call this,uh let's call this update inventory,so let's go back to call this update,inventory,and this is going to be post request,so this is a post request let's set this,to post and it's going to be a post,request to forward slash inventory,levels forward slash,adjust.json and we would need to send up,some payload so let's do that,for the payload,i i'm going to explain this in a bit so,the first um key we have here is for the,location id and that's for the store i,want this updates to meet to so this is,a static value and it's not going to,change this is just for my store,um id then the next thing i want to send,up is the inventory id and we can pick,that from the product selected from the,list widget so that's product list not,selected,item dot variant inventory item id and,lastly we want to,send an update for the quantity so the,way the shopify api works is that you,can only add to what you currently have,so if you have um five items and you,call this api passing five it's not,going to set your total number of,quantity to be five instead it will add,five which is incoming to the five,already existing and you have 10 so it,works by making additions so if you want,to make a reduction in the number of,quantities that are valuable in the,store you have to add a negative number,and that would make the reduction so,this,code sniper we have here figures out if,we want to make an addition or reduction,such that if the user enters um five,items into the input we have on the form,and we have uh 10 items in the store,this code right here is just going to,return um in negative five and that that,will perform the subtraction that would,be required to reduce uh the items in,the store to five so that's what the,snippet does it figures out if we are,performing an addition or subtraction,all right so that was a lot,of apis we had to do we had to configure,about three of them to make this work so,let's go to the update button or the,submit button here to connect all of,these apis um to this button so we can,call this update,and let's start this a bit as well,so i'm just going to make this rounded,and i'm going to add some box shadow to,it and then we have a nice looking,button when this is clicked on i'm just,going to enable the javascript mode when,this is clicked on we want to go and,call all of those apis in steps so we,want to call the update product api,first and when that's successful we want,to call the update price api and when,that's successful we want to go on to,call the update inventory api and then,we would be,uh done that would be all that would um,that's all we'll need to do so let's,call the updates products query,so this will be our big product dot run,and then when this is successful we want,to go to call the,update price,so this is going to update price dot run,when that is successful we want to go in,to call,the,update inventory,dot run,and largely that's all we need to do but,um it's going to,be nice for us to have the most updated,data in the app so we need to perform a,refresh and for that we will need to,call the get products,query,so this is going to be getproduct.run,and that's all we need to do but the,problem is the shopify api is a bit slow,so if we make all of these updates and,then try to perform a refresh the data,we are going to be getting back from the,api is going to be the old or previous,data so we need to perform multiple,refresh to make sure that we have the,most updated data coming in so i'm just,going to do another refresh after this,is successful so this is again going to,be get products dot run,and we will need to do this one more,time just to be sure so this will be,again get products dot run,and then we should have everything set,so now we have the um jackets right here,let's try to update the quantity from 10,to five so i'm going to click on the,update button and this should call the,update product query the price the,inventory query and perform theory,refresh as we can see,and there we have uh the updates made,and be sure be rest assured that we have,this quantity updated like i mentioned,earlier the shopify api is a bit slow so,on reloading this application you should,see that we have the correct,um data showing up,so i'm just going to select,this jacket one more time and you can,see that in the quantity um inputs we,have five train up so that's because uh,the shopify api is a bit slow all right,so we have almost everything ready for,the first part of the application the,last thing we need to do here is to,configure the submit button here so,let's update this to add,and we are similarly going to style this,a bit so i need to set the button,variant to secondary,make this rounded and give it some box,shadow and that looks nice and when this,is clicked on what we want to do is to,open up a model that allows users to add,a new product so let's go to open a,model and i already have a model,configured for this and that's the new,product model so clicking on this,clicking and clicking on the button is,going to open the new product model and,we can go into filling details for the,new product we want to add it's very,similar to what we did for the update,flow here in fact you can see that the,form is exactly the same aside of the,image field we have right here and for,uh the queries we need to run um,we are running all the queries marked as,new here so we are running the new,inventory query we're running a new,image query we're running a new product,query the new price query and the new,track inventory query just to be able to,save a new product so this is what i was,talking about earlier saying that,shopify has resources spread across,different parts of the,api endpoints so,that's it for the update flow,uh the last thing i want to do here is,to create the bulking portfolio so right,now we're done with the home page taking,a look at the pages we have the homepage,which has been completely built we are,able to update um product data and also,to add new products now we want to,create a flow that would allow us to,bulk import products from google sheets,so i mentioned earlier i have these,google sheets data prepared with two,products so we want to configure the,photo let us import all of these at once,uh using appsmith and we can easily do,that by,integrating with the google sheets api,so let's go to do that we have the data,sources section so i'm just going to,click on that click on create new and,here we have google sheets so i'm going,to select that let's call this g sheets,all right and for the scope um we may,not need to write anything to the sheets,but i'm just going to leave this as read,and write and let's go ahead to,authorize this,integration so select my account,give it the necessary permission,and then we have,the google sheets integration,authorized so i can use this to create a,new api to fetch the sheets we have in,uh the,spreadsheet we have right here so i'm,just going to,go back to click on new api,and we can call these get products,from,sheets,that's a really long name but i think,that's very descriptive so for the,method we want to fetch data from the,google sheets uh for the spreadsheet url,i'm just going to copy this,and now we can go back to paste this,right here and the default sheet is,sheet1 which is the sheet i have right,here so we have sheet1 right here and i,can click on the run button to see if,this works and it does we have the,sheets data coming back from,the google sheets integration now that,we have this data coming back we can go,to display this data and similarly i,would need to drop a container widget so,that we can style this up a bit,so let's bring in a container widget,all right this looks good,i would need to set a border radius of 5,pixels,and make it,give it some box shadow and here we have,a nice,container here with some box shadow,next thing i want to do is to display,information coming from the google,sheets query so i'll need a table widget,for this i'm just going to drop this,right here,and expand this so that it takes up the,entire space,so let's expand this,all right,uh there we have the table and to,actually display the data i would need,to connect the data coming from the,get products from,sheets query so this is get product from,sheets dot data and here we have all of,the data showing up but you notice that,we have an image column,that has urls to the images shown on,google sheets we can actually display,that image inside of the table so let's,go to edit the image column here so,clicking on the gear icon,uh i can set the column type to,image,yeah that's image and here we can see a,preview of,the image coming from google sheets and,this looks nice so let's bring in,a,text widget,here,we can call these,products,from g sheets,all right so let's start this a bit,okay that looks good and lastly we want,to be able to sync this data with the,spotify shopify api i also want to,perform a manual,refresh such that if um an update is,made to this sheet we want to click on a,button that would um draw in updated,data from from that sheet and display it,in the application so let's bring in two,buttons to,both do the manual refresh and to do the,um syncing of the data to shopify so,let's bring in a button here,and i need to reduce this a bit we would,need one more button,so i'm going to reduce this a bit,all right and bring this right here,so for the first button this is going to,be our refresh button so let's call this,refresh,and,we want to also style this a bit so i'm,going to set this to secondary,make this rounded i give it some box,shadow and then we have the refresh,button but when it is clicked on what i,just want to do is to call the get,sheets get products from sheets query,again so let's go to,execute a query and we have the get,product from sheets query,and i think that that looks good so,clicking on the refresh button is just,going to check if there are any changes,in the google sheets and then display,that data in the table then second,button we have here is the sync button,and this is the button that would allow,us to,take all of this data we have coming in,from google sheets and store them in,shopify so we have the submit button,right here uh we already have a couple,of queries pre-written to make this work,so we have similar queries as you saw in,the homepage we have a query to,create,a new product equity to create a new,inventory a query to create a new price,inquiry to create a new image and in,query to track that product that has,been created so what we are going to be,doing in the submit button here which,are going to shortly rename to sync is,that when it is clicked on we are going,to call all of these queries um for each,of the items coming from google sheets,so that we go to add them one by one all,right so let's do that so for the submit,button so let's call this sync,all right,and let's start this a bit similarly so,i'm going to set the border radius and,make it to have some box shadow then,when this is clicked on we want to go,into javascript mode and i have this uh,massive code that does the logic i just,explained earlier so what this is doing,is that it is looping through all the,products got in from the get product,from google sheets data and it is,calling all of these queries we just,talked about here so it's calling the um,get the new product query and when,that's successful it goes to call the,new image query then it calls the new,price query then it calls the track,inventory query then it goes in and,calls the new inventory query and after,that successful we see a message saying,that uh that particular item has been,added to,the shopify store so let's give this a,try we have two items here right now so,i'm just going to click on the sync,button to see if that works,and it's going to call all of those,queries to add the items and you can see,that we have uh the two items,um specified here added into the store,and we can go back to the home page to,see that they've both been added,i think we already have previous,duplicates so it might be a little bit,difficult uh we have the women's span,screen up here and we have other,variants lineup right here and that,shows that um that query works fine,so let's go into,um mark all of these as active because,right now we have them in the draft so,i'm just going to click on update,all right so similarly i'm going to also,mark this as active,uh do we have anything that is not,active okay this is not active so let's,also make this active,all right that looks good so heading,back to the store so let's head back to,my store we load this we should see that,we have a couple of products now added,to the store yeah so we have all of,these products added to the store and,users can go into and get any one of,these that is appealing to them so we've,been able to build um,the application to manage products and,also to perform bulk imports on app,submits by connecting with the shopify,api and also integrating with google,sheets and i think this was pretty easy,because we did this in about uh 30,minutes,um time so that was that was really fast,so heading back,to this studio i'm going to stop sharing,my screen,all right okay i think i should share my,screen,right so we have,we've completed doing the demo and it's,time for some,question and answer i've been looking at,the chat right now to see if,you have any questions so that we can,take these questions that you may have,okay so we have a question here so i'm,just going to,um take that so someone is acting on the,chat if um there's a way to,drag to reorder elements shown on the,table widget,by drag and drop if i understand you you,mean um is there a way to reorder the um,way the product is shown up right here,uh by drag and drop no but you can build,filters in order to change the way you,want this product to to be displayed so,if you,you can use that widget to build filters,or you can use the built-in filters um,in the table widget so you can choose to,sort this by quantity by clicking on the,quantity for example and you see that we,have um the lower quantity showing up,before the higher quantity and that's um,is one way you can do this right now but,by doing it using drag and drop and,right now you can't you can't do this,okay you're also asking is there a way,to increase the size of the js editor um,right now,no so we have a fixed,property size for the js editor,here which is really small but we are,working on a new js objects feature,taking a look at my screen you should be,able to see this uh this is just objects,so i can go into,a new js object and write some very long,code and we have the opportunity to do,that in a very convenient um space so,this gives all the space you need and,this is going to be released pretty soon,so i think this would address the issue,of,writing js within the small property bin,do we have any other questions coming in,okay,so i'm just going to hold down a bit,for,any other questions you may have,all right so that seems like um that's,all the questions we have for today so,thank you so much for coming um to,today's demo it was nice having you,around and i'm,i'm going to see you in the next demo we,will be having so thank you so much for,coming today,you

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

Come on and read the rest of the article!