hi,in this video i'm going to show you how,you can use the live perk options,shopify app to create customized,shopping experiences on your store using,the app you can create unlimited product,options and show them on your product,pages so customers can customize the,products to their needs and also see a,live preview directly on your store,you can find the link to the app in this,description below and you can also,search for live product options in the,shopify app store you will find it,the app has a 14 day free trial and also,if you under development store you can,also use it for free until you launch,your store,after you installed the app you will see,a setup screen,and here you can select the team that,you want that to install the app to,you can click on a enable the app and,the theme editor should open,the app should be enabled automatically,by shopify we can see on the top right,here and the toggle is enabled the app,is enabled so what we do now is only,save the app,and save the theme,and when we go back into the app we can,see the app already checked that you,used to be enabled it so we can click on,next,and there's an introduction video and we,can go,i recommend to watch this video to get,started and afterwards you can just,click here to set up your first product,one more thing when we are here in the,theme editor we can see here where the,options would appear on your theme,and normally the app will auto will,search for the add to cart button and,show the options right above from them,from the bottom,and it's also possible on the new,shopify teams to create a block here and,we can use a block from for our app,and so we can control the location,so right now it's below here and i want,to show it on top of the quantity,selector so i can actually drag it and,move it to where i want it,and now it's supposed to show here and,then i'm going to save it,so this part is only shown in the theme,editor and the options will be appearing,here when this this product is viewed on,the store,so so far we haven't set up any options,so we're going to,create our first product here,and we call it,necklace demo,we make sure that's enabled and we can,select the product,i've created the product previously,and now we can see we don't have any,options so far there's only variants so,this product has three variants it's,different colors or different materials,and let's say,and we can actually save this config and,we can open it again,and now we can also there's a button,here view product we can build a product,on our store,this is the product and we see there's,different variants,and let's say we want to let customers,add their engraving here,for this we will need an option so the,customer can add the engraving,so let's see here we can add new options,and there are many types of options,for this the text option would be,perfect and we can name it name,and here's a label,and you can see a preview here right,away,and in the advanced tab there you can,make a lot of new options additional you,can say,enter name,or enter engraving,you can have a placeholder you can also,help text,help,and also info,great so let's save this when we save,here we can also click a right click and,it will save and keep and stay on this,product on this configuration and we can,refresh here,and we should see the engraving here the,engraving options,hello so now it's,it's only so for the inputs here we,don't see it yet so if you want to show,this text here on the product we can go,a little bit down and we can enable the,live preview,where we are here we see the product,here and we see here there are layers,so the first layer is the product itself,we can also use this icon to show or,hide the layer so in most cases we,always want to show the product but we,can also there's also a case where we,don't want to show the product and just,so a custom view in this case we're,going to keep the product and first,thing we're going to do we're going to,select show variant image so this is,important then when we,change the variant here that we actually,show the right variant on the preview,and so that's it for now and now let's,let's see how we can do a text and to,show the text here,for this we're going to create a new,layer and we're going to select the,layer of type text,name it layer,layer,gray thing,and now we can connect it to an option,here and so far we only have the name,option and when we go here and select,the name,it is connected and let's just try it,out,and let's enter here,name,and now we see the preview is showing,the name,so now it's using the full space here on,the preview but now we only want to show,it at the specific location for this we,can go in here and we can go on advanced,and here are many options we can use,manual locations,but the easiest one is to keep,everything on automatic and just create,a different area the area is now set to,full so use everything but we can also,create it as a box,and now we will see here a blue box,appears and we can just drag,drag this box to fit,where we want to put the name,let's say you want to put it like this,and this sound looks good,a little bit to the left,and what i now see here is the text is,left aligned so it makes sense here to,use a center alignment,and,yeah the rest is set to automatic also,the scale is set to automatic with the,font it will automatically scale the,font when it's too big,so let's test this one out let's just,name one two three four,and see it still fits,and five six hex,now it's it's always fitting,so,if you want to have a limited number of,inputs you can of characters you can,also configure this there's a lot of,options here you can say min length max,length but for this example we're just,going to leave it as is,and we can now,save it and view our product again,now we should see,when we enter here,my name for instance michael i can see,the name here on the product,now this looks good so far but we can,also make it,way more realistic there are a lot of,options here,let's check on the text,we can try to make it look more like an,engraving and this will be,we can change the color a bit we could,also use a color option,and,to connect it here on this name but,normally engraving is not colorizable we,just select the color here and which,make it a little bit more gray than,black,so this maybe this is too gray,but for for engravings it's always a,good idea to,to make to add some,shadow,or shade,and we can select the color here,and just make it,one one,just make it a little bit,more looking like an engraving,maybe we can have a lighter lighter,shade,yeah this looks better,so now it looks like it's engraved,now what i also like to do with,engravings we can also do a,transformation on the text and just make,sure that the text is always in,uppercase,so this looks maybe we have to enter,another,now this looks way better,now what i also like to do is offer,different fonts for this we can,create a new option and select font,and,call it font,you can select different font families,and it's also possible in the settings,if you have to upload new fonts but,we're going to use the default fonts,here and when we are on the text layer,we have to connect it to the font option,so we can select it here and now we can,we should be able to select a more,strange font and it should appear here,yeah let's check this out,this seems to work well,so what also i like to do is i want to,charge extra for when somebody chain,selects an engraving for this i'm going,to add a checkbox,and put it as engraving,let's put now put a label and we can add,a value here and say,call it yes and we can to put a price,here and say it's five bucks,and maybe we still have a label,and we can then put it,at the first,and now this is just a checkbox,it will add that when we see we it will,add,five dollars here but what we also can,do is only show the name inputs when the,engraving is selected so for this we can,go to the conditions,and add a condition and select engraving,equals,yes,and let's do the same for the font,so let's test it out,the font is not working yet,maybe i did not save it,engraving equals yes,now this looks good,and,even here on the the preview we should,also add,ah here added already the condition so,this is perfect now let's save it,and view the product again,so far we cannot see anything we say yes,you want to engraving and we see it's,five blocks more expensive here,and we can say,michael,and it shows up this is a better font,and we can also toggle this now and see,it's showing on and off,and let's add this to cart,when i go see here,when i go to the cart,it should also update the preview,with the oh it does not yet update the,preview that's a feature that we have to,enable when we are here we can say save,preview image with the order,and now it saves the preview with the,order and,there's another feature that i've,already enabled on the settings here,it's to show an edit button here so it,is now super helpful we can click here,and edit,and we see our values are put in again,and i say this now,let's say michael one and i add to cart,again,and now it should even ask me oh there's,another option,so now we can see that the image here is,updated,and we see the total is updated,and we can go to checkout,now to check out this is very specific,to shopify shopify does not allow to,increase the prices on the product,itself so the app will have,will add another add-on here so it's,listed separately this is the case with,all apps apps have to use separate,products to add price add-ons,now when we,create an order you can see here there's,all the information that we put in and,when we are on our store i create an,order beforehand we can see here,you can see all the inputs listed here,the name and engraving and the font,selected,and you can also download the preview,from here,you will see it right here and you can,also set it up to to make a high,resolution image so you can also use it,directly if you use it for printing,purposes,so yeah,that's our first example we can also,extend it we could we could make,we could add an upload so the customer,can select his image,on the on the product if you use an,upload option here,call it upload,called image,and then we could show it let's say we,want to show it here,say,upload,connect it to the option,also create a box,let's show it very small,somewhere here so let's see if this,works,quick test,yeah we can see the image here,great so i encourage you to check out,the app and download it and if you have,any questions you can always reach out,there is support,button right here and the team will help,you out to get started with the app
Congratulation! You bave finally finished reading shopify free options to show product coming soon and believe you bave enougb understending shopify free options to show product coming soon
Come on and read the rest of the article!