BACK

how to edit product page template shopify

Shopify Product Page Customization 2023 | Using Shopify Online Store 2.0 & Shopify Metafields since

Rihab Seb - eCommerce Coach

Updated on Mar 06,2023

Shopify Product Page Customization 2023 | Using Shopify Online Store 2.0 & Shopify Metafields

The above is a brief introduction to how to edit product page template shopify

Let's move on to the first section of how to edit product page template shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

Shopify Product Page Customization 2023 | Using Shopify Online Store 2.0 & Shopify Metafields

since i started using shopify i always,struggled with how limited i was when it,comes to optimizing or modifying the,product pages well the good news is,after shopify online store 2.0 now,things are way better now we can,optimize our product pages and make them,look perfect without the need to hire,any web developer or any professional hi,there i am rehab and on this youtube,channel i share with you videos related,to e-commerce entrepreneurship and more,and as i told you before in this video,i'm going to show you step by step how,you can create your product pitch,but before starting with our topic i,want to invite you to sign up to the,free workshop i'm currently offering in,this workshop i show you step by step,how you can create a sustainable strong,e-commerce business i show you the exact,framework that you should be applying to,your business in order to be able to,attract convert and most importantly,retain your customers so if you are,interested in creating a strong,sustainable ecommerce business go down,to the description and sign up to this,free workshop it's 100 free so you don't,need to pay anything,whenever i want to create product pages,for any store the first thing i start,with is to do a market research i need,to understand my potential customers i,need to understand what they are,searching for and what kind of,information they are interested about,before buying the product a customer,must know everything about the product,so we must provide all the needed,information inside of our product pages,and in order to know how our potential,customers think and what they care about,i always go to my competitors stores and,do my market research i also go to,amazon and see the reviews and read them,because inside of the reviews i will be,able to understand my potential,customers more and i will know what kind,of questions they have in mind what kind,of information they are interested about,and what kind of guides or maybe details,they need before making the decision,whether to buy the product or not so i,started with this i went to amazon i,read the reviews then i went to my,competitors stores and i saw what they,are doing in there and i collected,information about what are the things,that i will be including inside of my,product page,this store for example sells wigs and,hair extension bundles and accessories,and stuff like that so i needed to,include inside of the product page,everything my customers care about,starting from the dimensions of the wigs,the length for example the density also,the cab dimensions also a guide about,how to wash the wig and how to take care,of it in addition to a list of,frequently asked questions so i did my,best to include all the needed details,inside of my product page because i want,my potential customer to be able to find,everything they are searching for inside,of this page so they don't have any,hesitation and they don't feel like they,still need more information before,making the decision to buy my product,in addition to that while checking the,competitors i have found that multiple,ones of them offer free returns and free,shipping so we decided that these are,things that we need to offer in order to,be able to compete with other stores so,we created a list of all our unique,selling propositions and i created an,illustration where i have included all,our unique selling propositions it's,true that all of these information are,there within our product descriptions,and within our shipping conditions and,stuff like that but creating a visual,illustration of our unique selling,propositions make it way easier for our,potential customers to understand and to,absorb the information,i created this illustration using canva,and i made sure to brand it as per our,brand colors and our brand font,after deciding what content you are,going to include inside of our product,page we hired people from upwork and,fiverr in order to create the,infographics and maybe write a text and,stuff like that and when we had,everything in place i created the first,product page template and now i'm going,to show you how i did that i'm using the,symmetry theme as an example so the,options of this team might be different,than other themes,but for example i can choose between,including the description directly near,of the photos or i can include it below,the buy box i have decided to include,the description below the buy box but i,have added a small description inside of,the box and in order to include this,small description i have used a meta,field because this description is going,to be unique by product also in order to,include the specification of the product,i have used shopify meta fields in order,to have a unique specification tab per,product,so here i am inside of my shopify,dashboard and from here i'm going to,online store themes and i'm going to,click on customize,i will show you how to create a product,page template but i will show you first,the product page template i have created,so from here you go to products and in,here you can see all the templates,i've changed already the default product,page template because this is the one we,are going to use to almost all of our,products,so this is how my product page looks,like first i have the product photos,from here then i have the buy box in,here i have the product title the price,the,variance because i have different,variants then i have the buttons i have,the unique selling propositions in here,then i have the steps some of these tabs,are common between all of my product,pages and some of them are dynamic this,means that they are unique per product,so for example the product description,is a meta field this means this tab is,unique per product,when it comes to shipping and delivery,this tab is common between all of my,products when i scroll in here when i,scroll down i have the description this,is the product description itself,moving down i have also this section,where i have added my unique selling,propositions,down i have the,the section about the cap sizes then i,have the section about how to choose the,correct length then i have more details,about the cap then i have,care guide also another care guide and,finally i have the frequently asked,question section,okay,if you want to create a page like this,one,this is actually very simple so as you,can see in here i have this first,section which is the product page,section okay in here i can see the,characteristics of this product page i,can for example change the media size i,can change the position of the,photos the thumbnails from here i can,enable stick on scroll or not so for,example i can change the position of,these photos to be in here but i prefer,them to be beside main page okay so,these options will differ depending on,the theme you are using under this,section you will have all the blocks,that they are a part of the product page,so all of these are elements that exist,in here okay starting plumber title the,prize the vendor and so on,most of these elements at the beginning,are here by default because we need the,title the price the variant picker and,stuff like that,but starting from here after the buttons,these are elements that i have add,myself so first i have the image and i,have created this image on kamva as i,told you and i have included this image,in here so simply in order to edit it i,have clicked on add block and i have,added add an image like this and i,simply select my image and use it in,here,now let me remove this,concerning the tabs i did almost the,same thing so i went in here clicked on,add block and this time instead of,adding an image i added a collapsible,tab like this,okay if i include the content in here,directly from the editor this means that,the content of this tab will be common,between all the product pages that use,the default product as a template okay,so for example for the shipping let me,show you for the shipping the content is,in here because this is a static tab,common between all of my product pages,now concerning for example the,specifications or the description this,is different i have used a meta field so,let me show you how you can create,these tabs in order to create a static,tab you just need to add a tab add the,content in here maybe a link to a page,and this is it however if you want to,create a tab that is dynamic this means,using meta fields you click on add block,and this time you click on tab but,instead of writing the content in here,you remove everything from here,and instead of writing the text in here,you need to link to a meta field i'm,gonna save from here go back to create,my meta field to show you how to use it,so you go back in here,you go to settings,and from settings you go to meta fields,and you need to create,the these meta fields so for example in,here i have the first meta field,this is the specifications the other one,is the product description so let's say,i want to make,a even the title of the tab,dynamic so i click in here,i name my meta feed let's say title,from here i choose the content it's,gonna be text and since it is a title,it's gonna be a single line text and i'm,going to click on save,okay these two meta fields are also text,but they are,multi-line text because it's a paragraph,so i'm going back to a random product,from here to products,when i entered the product editor in,here you can see that i have,new fields at the bottom of the product,page,of things that i can modify so this is,the meta field i have just created,it's the title i can in here for example,put the title of the tab let's say,it's going to be for example,specifications,or all specifications so we can defer it,here we have the specifications and the,product descriptions and those are also,meta fields that i have created,previously and i clicked in here and,entered the information as you can see,in here i have the product specification,and in here i have a small description,of the product i'm gonna click on save i,will be back to my theme editor to show,you how i can link to these elements so,going back in here let this is my tab,and in here instead of writing the,heading i'm gonna choose a meta field,and this time i'm going to choose the,title,and i'll click on insert,and i'm going to in here to click on,insert dynamic source and i'm going to,add the specifications,so as you can see now i have a tab,with that title all specifications and,under it i have the product,specifications okay now i can go to each,of my products and i can change the,title and change the content so this is,a tab that is unique per product let me,remove it i have used meta fields to,create both of these tabs the,specifications and the product,descriptions so when you click for,example on product description from here,you can see that the heading is not,dynamic but the content is dynamic i,have linked to a meta field in here same,for specifications when i click on,specifications in here you can see that,the heading is not dynamic but the,content is dynamic i'm linking to a meta,field so,i repeat the the shipping and the,exchange rate are static tabs where the,specifications and the descriptions are,dynamic tabs,here i have the description this is the,main description the one i have included,inside of my product editor so it is,unique per product here i have my unique,selling propositions and as i told you,before i have created this image on,camva and i simply uploaded the image to,my shopify store and used it in here so,this is an image with text overlay,section i'm gonna recreate it so you,know how i did it you go in here you,click on add section and this time you,click on image with overlay i'm gonna,move it up so you can see it directly,below the one below the right the right,one so it's in here this is the new,section i'm going to select my photo,which is this one,now i need to remove the tint and the,text so i'm going to erase everything,and i'm going to remove the tint and,make it with no background,i will also remove the text from here so,as you can see i have now recreated the,same section that's how i have created,it i'm going to remove it after the,unique selling propositions i have,created the second section and for this,i have used text columns with images if,you are using that donti for example,they have a section very similar to this,one where you divide the screen in,columns so for example in my case i only,needed two columns so i included the,first image and the second image below,it i have included this section to show,my potential customers how to measure,the,hair length so as you can see in here i,have a table and i have a,instructions in here to make sure that,they know exactly what they are,purchasing,after that i have,these infor graphics about the,the cap in order to give my potential,customers more informations and also for,this section i have used the text,columns section with images for this,section for example i have used the,section called image with text also i,guess it is available in the dawn theme,it's very simple you just edit you,replace the photo and you replace the,text,scrolling down this is another section,about how to take care of the wig also,in here i have added a section about,tips to take care of wigs and more tips,in here and finally i have included a,frequently asked question section this,theme actually comes with a section for,the frequently asked question uh,questions so when you click here on add,section you can add a,frequently asked question section i'm,not sure this comes with all the themes,but if it didn't you can simply create,add a rich text and create questions,with bullet points,so,so as you can see you can add as much,sections as you wish to a product page,and maybe in the future i will be adding,a section to show photos of my customers,wearing the wigs and maybe showing them,in order to add social proof after,creating the product page template for,wigs i needed to create a new product,page template for my other products,since not all the information that i,have included inside of my wig product,page are relevant to other products so i,created a new template based on my,previous templates and i simply removed,the sections that they are not relevant,and then after that i went to my product,and i assigned the right template for,each one of them,after creating this first product page,template i needed to create a second one,so from here i went down i clicked on,products,and from here instead of starting with a,default product i click on create,templates,and i can create a new template,okay after creating all of your,templates you just need to go back to,your product and assign the right,template for each of your products so,you go back,in here without saving for sure,and you go to products,let's say this is my product,what you do is you scroll down in here,and under online store you choose the,product page template and this is it so,if you are selling different products,you need to create different product,page templates for each of your product,types as i have done in here i have the,default product for all of my wigs and i,have created a template for my bundles,because my potential customers need,different information for the bundles,than for the wix,since this is a new store so until now,we don't have reviews yet but also at,some point i will be adding a block in,here for the reviews for the ratings and,also down below for the reviews so don't,forget to add reviews inside of your,product pages they are extremely,important for your social proof and for,convincing people to buy from you,because i know that many of you will be,using the addon theme for their stores,since it is a free theme provided by,shopify i wanted to go to a down theme,store and show you the different,sections that you can add inside of your,product page in order to create,something similar to what i have created,for my client,so here i am inside of my down theme and,i'm changing my default product page,when i click here on add section i can,see the different section types that i,can add so maybe i can use image banner,this is one option if i want to add a,very big image or maybe you can use for,example,image with text if you want to create,something similar for example to this,one in here to this section in here,or i can use the multi-column section in,order to add multiple images one after,the other so let me click in here to,find this section and as you can see,when i click on each of these columns i,can change the content so i can select,an image and i can change the text or i,can even remove it okay so this is also,a good section that you can use in order,to create,something similar to for example to this,section in here thank you for watching,this video and for staying up until the,end i truly appreciate that before,leaving i want to invite you one last,time to sign up to the free workshop i'm,currently offering remember in this,workshop i show you step by step how you,can create a sustainable strong,ecommerce business you will find the,link below in the description this,workshop is 100 free so you don't need,to pay any dollar that's it for this,video thank you for watching and before,leaving don't forget to smash the like,button to subscribe to my channel and to,hit the notification bell because in,this way you will get notified each time,i publish a new video see you next week,bye bye,you

Congratulation! You bave finally finished reading how to edit product page template shopify and believe you bave enougb understending how to edit product page template shopify

Come on and read the rest of the article!

Browse More Content