#1 TikTok Ads Spy Tool

A Better Way to Make TikTok Ads Dropshipping & TikTok For Business

  • Find TikTok winning products & TikTok dropshipping ads.
  • Analyze TikTok advertisers
  • Get the Latest TikTok Shop Data.
Try It Free

shopify block types

Published on: January 28 2023 by pipiads

How To Add a Related Products Block to Your Product Page Without Apps - Shopify Dawn Theme

what's up, guys? today i've got a highly requested video ever since i actually showed this site in a previous video and, um, people notiked this other options feature. people have been asking me for a tutorial on how to build this feature, so today we're going to do that. this is that tutorial, and this feature is what i like to call a related products block. what do i mean by a block? well, it goes inside of the product information section. so that's everything to the right of your main product image. these are your blocks. we can click, add, block and, as you can see, i have a custom one with a lightning bolt called related products. okay, we can add that. and well, i've already added it to this page and, as you can see, i've changed the heading to other colors and we showcase the other colors of this bottle. it's really useful because we can drag it around and, of course, these products are connected using metal fields, which i'll also show you how to set up, to link products together using the product reference meta field, this time, actually. so there's actually a couple uses for this. as i see it, the most common one, i think, will actually be these other colors, and this is a very common situation when you've split your product into separate colors instead of using color variants and just one product. this is a valid strategy, right? so some stores, they want to have more products or, for seo reasons, they want to have a separate product page for each color, and that's fine. the most high profile site that i know of that does this is gymshark and, as you can see, they've got almost the same kind of thing- this related products block, which links to the other products on their site- the other colors, that is, but these are not actually color swatches. these are completely separate products. the second use that i see for this is when products are simply related. then you would not have the heading other colors. you would have like related products or, um, you know, complete the set, for example. so this is matcha tea, it's made in a bowl and you have to whisk it to make the drink. so we right, complete the set and we upsell these products to our customer. so i think this is going to be a really interesting video for you if you're learning shopify development, because i think this is a common task that you'll be asked to do if you want to start freelancing or something, and you'll be using the product reference meta field and also you'll be creating a custom block. but if you're also a store owner or you have no coding experience, you just want to implement this feature to your store. don't worry about it. it's going to be really easy to follow this video. you don't need any experience and you can copy and paste as much as you want from my code. you don't actually have to follow the video. as usual in my videos, you can grab all the code from my website. so go to edcodes and then click on tutorials and then find this tutorial. lastly, before we get started with the tutorial, i also want to let you know that i'm trying something a little bit new with this video. it's kind of an experiment. i've actually spent a little bit more time and more effort building a advanced version of this feature and i'll be selling that as a downloadable product. so this is going to be really easy to install. you simply copy and paste it into your store and it's got a few extra features, basically more design settings in the sidebar. we can change the heading, we can change the column width, we can change the way that the image fits. we can show a secondary product image when you hover over the image which you can actually see in action on this store, and my favorite feature of this is probably the tool tip. so when you hover over, you get to see the product title and you can customize the design of that tool tip as well, and you can also add some extra informational text below the product, like that, and you can change the design of that text as well. so, yeah, this is for sale. on my gum road profile at codescom the link will, of course, be in the description. it's 20 bucks. i think that's pretty affordable. like if you were to get an app for this feature, then that app would usually be like five dollars or ten dollars a month and you know, in a few months you would already have paid that much, whereas this is: buy it once and you have it for life. you also have unlimited downloads of this product for life. so if i update this product- which i will be doing- to add extra features to it, you can re-download that for free, okay? so i hope that didn't sound too much like a sales pitch. the thing is that i'm really trying to create a win-win for you guys and for me because, like right now, the shopify ecosystem is completely reliant on apps, right, and i think that there is definitely a space for these little code add-ons that you would add to your store. and they're lightweight, they seamlessly integrate into your store, into your theme editor, right, they don't slow down your store like apps. you don't have to pay for them monthly, you know? and, yeah, if you're using a theme like dawn and it just doesn't have a feature that you need, then i'm gonna try and build those features. you can request a feature from me. i might build that. you get that feature really affordably, literally like 10 or 20 times cheaper than if you were to hire a developer for custom development to build that. and i get to transition from freelancing to being able to sell my code as a digital product and help lots of people at the same time. so that's what i'm really hoping for. so, yeah, with all that said, let's get started with the tutorial for the basic version, and you will find the link to the pro version in the description. okay, so i'm going to be looking at my blog post here just to kind of keep me on track. so let's start with creating the meta field. if you don't know what meta fields are at all. if this is your first time seeing metafields, then it's basically extra fields that you have on the product page, for example, in the admin. so here we have the title field, here we have the description field- right, but we can now also add our own fields at the bottom. here, for example, i have this material field and it lets me select a material. these are fields that you can set up yourself, and so that's what we're going to be doing. for the related products also, we want a field that says related products and that lets us select from a list of products. so let's do that from any page on your shopify store. you're going to click on settings and then you're going to go to meta fields. we're setting up a product meta field, so you're going to go into products. these are the various meta fields that i've already created for other tutorials. you might have a blank page here, and that's perfectly okay, or you might have something relating to apps. either way, we're going to click add definition to create a meta field and we're going to call this related products, okay. next, the name, space and key. this is kind of like an id. this is something that you use in the code to get the value of this matter field. so if you're going to be copying and pasting my code, then you want to give it the same name as i've given it. so mine is product underscore- info dot. related underscore- products, and you can grab that from here as well. so in the description you don't have to put anything, but i recommend just putting a link to this youtube video, for example, just so that the next time you know, you know what this is for, you know what's going on. just call it related products and then put the link to this video or something like that, so that you remember how to use it. this you can ignore this, because this is like for app development, so just leave it blank. and finally, the most important part is you're going to select a content type and the content type is going to be product. and even if you're going to be using just one related product, you still want to select a list of products, because we want the ability to select a list of products. select more than one product in this related product.

Advanced Store Localization App for #shopify - Feature Overview

hello, this is a future overview of the advanced store localization app. today i'm going to be going over all of the features within our app, how to get them set up and answer any questions you might have. first step would be the theme configuration, but i covered that in a separate video. normally, this will be handled by our team, but if you're interested on how to set this up yourself, there will be a link in the description below. so if you're interested, look down there and you can see on how to get this set up. now the first thing i want to go over is the define region section. so having a test store here, this is where you'll define your different regions. you can create custom zones by clicking add a custom zone, or you can add a zone from a template. so if you want to add the entirety of eu, north america and so on, you can easily just click one of these and add them in. if you want to remove it or put them back into the zone one field, just click the x and you can make it go back. now, when you add a custom zone, the first one will be the first field will be used for naming, so you can name this anything that you will recognize because it'll be used throughout the rest of the app. so let's say you want to make a field for united states. you can put united states or usa, anything that you can recognize, and then we'll drag and drop united states here. zones aren't exclusive to one uh, to one country. you could put as many countries as you want. so if you want it to be usa and uk, you can put them both into one field if they're going to have the same rules set, and then you can make as many regions as you want. let's say we want to put canada in here. now we can set it up, so usa and uk will have a unique set of rules. canada will have a unique set of rules and then any country in zone 1 will be the catch-all, which means any country that isn't defined over here will follow the default set of rules which you'll find in later sections in our app. so after that, all you'll want to do is save and then these zones will be created for you. you can also blackout, block access to a region once you have them created by picking one. so let's say, if you don't want anyone from in the international zone from viewing your store. you can set that up here and you can redirect them anywhere you'd like. so if you'd like them redirected to googlecom, you can do that. or if you have a referring page, then you can set that up here. so a page that you created not available or you don't have to block any. so for now, we'll just leave it as is. i won't save the new zone, so i'm going to keep going with the zones we currently had created, which would be china, europe, canada and usa, as well as zone one. now, this is more advanced settings, but in operation mode, uh, you can set up how you want your store to run. so geolocation will always be set as the default. this is where, if anyone lands on your store, they'll automatikally be detected based on the ip. uh it'll. even if they try to go to to a different location, it'll force them back to to their correct region, so it'll only display countries for them. if you want them to be able to pick a, pick a domain, then you can geo locate. first. they can pick a different country if they'd like, uh where to view it from, or if you wanted just to be the based on domain or subdomains, you can click domain sub to be defined. but if you do that, you need to make sure you have domains on your store or else you might encounter some weird behavior. now you can include a region selector in your store, if you'd like, by coming down here. you just toggle this and you can set it up. you can set it up however you like. you can select as a drop down or an unordered list. on top of that, you can show countries. you can show the full country names and you'll have a little preview here that'll show you how it'll look. so full country names and then you don't have to show countries at all. if you don't want it can just be. you can just be the zones you created. but if you want to show it as countries, then it'll allow them to pick whichever ones are defined in your define region section. with the css selector you can select where in the site you like it visible. so if we go to our test store, this is where our dropdown currently is and this can change. if you look at the video i included in the description, you can see how to get the, the idea of where to put it, and then this is in the site nav. then we have it at the end of the element so you can see it'll be at the end of the sitemap. okay, for drop down rendering. this is just custom if you'd like to add some custom styling here. now with that we'll go into the filtering options. filtering is the top most. filtering by product is the top most level. so no matter what is defined- whether you do filtering by collections, locations, tags, it doesn't matter- product filtering will always take precedence. so let's say, for example, that in collections- let's say in the gifts collection- there is one product out of all of the products available in europe that you want available in canada as well, but you don't want to remove it from the collection by going to products. you can type in the product name here. let's say, for canada, just use air plants as an example, and then by also typing in usa- or i guess we would use europe as our example there- and then by saving and enabling the feature, that means that this product will only appear canada and europe in china international zone and usa it'll be hidden. okay, let's disable that for now. uh, actually, i'll show you how this will work. so, airplants, i'm currently located in canada and we can see here. it detects that i'm from canada. so i'm going to click on the product link here you can see i could view it. i can add to cart everything, normal now if i update it so i make it only available in europe, and let me try that again. open it up, it'll send you off. so normally it's a lot faster than that. i just put in the setting so it had to update quickly. so, like that, it'll send you directly off the page and then, if we wanted to to appear again for that, for that location, you just do that. so close, open and then i can add to cart again. so this will be the highest level setting. and another thing to mention is that it'll also be the same way in search. so if i search for, if i search for air plants, you'll see it'll be here. if i remove it, give it a second. no product will appear now because the product is still there, just hidden. this will still show as there being a result for it. um, there isn't too much we can do about that, but the other product will be hidden and they won't be able to land on this through anywhere in the store. so if it's, if it normally appears in a collection or a home page block or anywhere in recommended block, it'll be hidden from this point forward. okay, moving down to collections, this is the same thing. so, uh, if you have any collections- so for example, we have clothes here- this will only be enabled in the zones that you selected to. of course, any collections that aren't listed here won't have any rules. so if we want uh close or gifs to be available in only zone one, we'll save it like that, or we can do it however we'd like- canada, usa, let's say, if anyone from europe wants to go to this, we can redirect them to the collection page or redirect them to a different page or anything you'd like, so that, so that it won't just bounce them off to the home page, which is the default. if you would like to change that in the theme configuration section, if there's an unavailable product, you can type that in here and it'll bounce them to the correct location. and same thing with the collections. so, products and collections: you can both set where you want people to land. if they land on a product or collection that's unavailable for them, if you click the exclusivity option, this will essentially reverse the rules. this will make it so that let's say, for gifs, we want that to be the only collection that china will see. this collection will still be visible in zone 1- europe, canada, us and in china it w.

More:How Much Should You Spend On Facebook Ads | Step-By-Step Beginner Tutorial

How to create new Theme Sections and Blocks

hi everyone, Jung, here, let's pitch Appa Phi, and today you will learn everything about how to get started with Shopify sections and how you can use them to create new settings and new features for your front-end customizer. so you're about to learn one of the key concepts in Shopify should be a lot of fun. let's go all right. as a starting point for this video, I already went ahead and created two new page templates. the first one is called landing page one. the second one is called landing page two, and this is just a mock-up that gets auto-generated when you create a new page template. then I went ahead and added two pages- page 1 and page 2, and I applied these templates to the pages. so page one gets landing page 1, page 2 gets landing page 2 and we could also view these pages in the live customizer. right now they look super plain and they don't have any settings in the live customizer. next I will go back to my theme files and now I move through the sections folder and in here we can create a new section- and maybe we can call it icons with text create section, and this will generate some code for us as well. but you can remove everything except the schema tag, because right now we will focus on that and you don't have to worry about anything in here. this is just some data written in the JSON format, but we will get to that in a minute. for now we can just give it a meaningful name and we can give it a different name from the file name so that you can see where the file name met us and where this one will come into play. so for now we could do icons with text above or something and then save the new section, and for now we can leave the section as it is. but we will include it in our landing page templates. so below the page content I will do a curly bracket followed by percentage sign and then section, and now the file name matters. so icons - with - text and there's no need for the liquid extension, and then percentage sign, curly bracket, and I will just copy this, save the fire and edit to the second landing page template as well. after a quick page refresh on the front-end you would already see our new section icons with text above available in the customizer, but right now the settings are empty because we didn't add anything. but I hope you get the idea that the schema tag or, more precise, the JSON data within that schema tag is related to what is being displayed in the customizer. and now we have to tok about Jason a little bit more, okay. so first of all, Jason stands for JavaScript, object notation, and that means it's a structured way to write out objects, and in the real world you all know what an object is. but in the context of programming, an object, in the simplest form, is just a meaningful collection of data. and to introduce you to this concept, I prepared two examples, and the first one is the object student. so we would start with a pair of curly brackets to enclose at the object, and now we have to think of a set of data that would represent the student in a meaningful way, and most likely the student would have a name- it could be Johnny and he might be 18 years old, and his student ID might be one, two, three, four, five, and he would also have a collection, or an array, if you want, of different subjects, and a collection is always indicated through these square brackets, while the object is indicated through these curly brackets, and maybe he would partikipate in math, English and biology. so what we are left with is the object student notated in the jason formed. but let's do one more, and the second example i prepared is a little bit more related to Shopify and e-commerce. so we have the object product and we start with a pair of curly brackets again, and now the product might have a title, could be t-shirt, maybe a weight, 200 grams, but then a product would also have a few variants, so a collection of variants, but these variants might be objects themselves. so we could have one object for the red variant and it might have the color red and the price 10. then we would have one object for the blue variant, maybe color blue and price 11, and the color green and price 9. so you would see, now we have a collection of different variant objects, but everything else stays the same, like in the first. okay, so now we have to transfer everything that we've just learned to Shopify and, as you can see, we have a pair of curly brackets and in between we will have our new section object, and every section is represented by a name, icons with text above in this case, and a collection of different settings. but we haven't added any settings yet. so this is the next thing we will do, and every setting itself is described with at least three parameters. so I will create a new object, a setting object, and the setting is described through the type. for the first one, we could choose text, and then we will also need a label. this will appear in the customizer, so this one could be your headline for the section. and the third parameter is an ID, so that we can later uniquely identify this setting, and for now we could give it the ID heading. let's add another one. so I will add a comma, and then a new pair of curly brackets for the next setting object, and this one could be of type, let's say rich text, so that we can see a difference, and the label would be maybe your description, your description, and we could give it the ID description. okay, I think we can save this, and after another page refresh on the front end you will already see the magic happen, because inside our section we should see two new settings, one text field and one rich text field, and we could now enter some test values, maybe test and lorem ipsum, some nonsense text, but what you would see is that these values never appear on the page itself. so the question becomes how we can reference these values and that's what we're working on now. and therefore we jump back into our section fire and on top of the schema tag I can define some HTML markup. and for simplicity we could just add a heading level 3 and in between I want to render the headline so I will drop into liquid and reference the second object, section settings headache. so this is the section object. we access the settings and I want to access the setting with the ID heading. simple as that. and right below we could add a paragraph for the description. so now I I will need to render section dot settings dot description. let's save it and give it a try, and after the next page refresh we would see that our values do appear on the front end and we could even update the value life. but there's one thing I want you to note and that is that on our second landing page the value would be exactly the same as on the first one, and that is due to the reason that we implemented our section as a so-called aesthetik section and we included in both templates- and these statik sections can only have one global value and the counterpart would be a dynamic section. we will get within a second, but before I want to show you something else, because right now we only have two statik text fields. but what if the user wants to upload a few images, but I don't know how many? then I would need to make this extendable in some way and therefore I go back to editing our section fire, and now I will add some dynamic locks to our section and this will be a collection of blocks again, and a block is defined through a few properties, so it will have a type. we could give it, let's say image for now, and it would have a name. we could just name it image block for now, so you would see where this appears, and the block will have a few settings on its own. so a block will have a collection of settings. so you can see, this can get nested pretty quickly and, for the sake of simplicity, we will only add one single setting to this block. so new settings, object and the type will be image pickup, image underscore picker. then the label could just be your image and the ID would be image. let's say save it. and now we check the front-end to see what that does, and now you would see that we have a new com.

More:3 WAYS TO MAKE $100 AS A 16-17 YEAR OLD

Make Your Shopify Product Page Look PROFESSIONAL with Color Swatches, Tabs & Metafields!

in today's video we are going to transform your shopify product pages from this to this. no coding required, no app purchases- anyone can do this. before we get into the video, if you like videos about winning products, drop shipping, shopify themes, apps and tutorials, do us a favor and hit that subscribe button and turn notifications on. now let's get into the video. all right, so i'm using shopify's free theme sense and, by default, here's how the product page looks. it's not bad, but i feel like it's missing a lot of elements such as trust badges, a star rating and customer reviews. all right, first things first. we are going to create a few meta fields. if you look at vessi's website, these little things here are what we're going to be creating. it's a way to organize and store product information without putting it all in your product description box. so things like materials, care instructions, ingredients and etc. vesis has put their product description in these little tabs as well. i have mixed feelings on that, but for this tutorial, we are going to do the same. from your shopify dashboard, click settings, meta fields, products and click add definition. the first one we're going to create is materials, so type in materials, then click select content type and click text. shopify made an update on april 6 where you can now add medified lists. so previously, if you had a list of ingredients, for example, you would type them like this, but with the update you can now type your list like this: to activate that new feature, all you have to do is click this right here: except list of values, click save and we are going to create our next one. click add definition again, start typing care and then care guide should pop up here. click that, then click save. last one: click add definition type description. click select content type, select text, select multi-column text and save. if you're new to meta fields and want to see some more examples of what you can do with them, check out this video here. all right, now let's go to our product listing and if you scroll all the way down to the bottom of the page, you will see the new meta fields here. i'm going to go ahead and copy and paste what i currently have in the description box to both organize my information and save space. the last one here is materials and you can see the list feature in action. all you need to do is click add item to add more lines, or you can click the minus here to delete any you don't need. all right, let's save our work and then we're going to add it into our product page. you'll see here if i view my product. all the information i entered is nowhere to be seen. these tabs here are included by default- the sense theme, but as you can see, they are empty. so click customize on your theme. click on this drop-down menu here. click products- default product. as i mentioned, these tabs here are included with the sense theme already. but if you're using a different theme and don't have these under your product information, click add block and click collapsible row. since these are already here, we are just going to edit them. so click on ingredients. first we are going to change the heading to description and then you can click the drop down here to change your icon or you can just select none. if you don't want any icon, then under row content, we're going to click this right here: insert dynamic source, and we're going to select description and click insert. i'm going to do the same now for care instructions and materials. all right, return policy is just an extra. so i'm going to go ahead and delete this block, then save your work and here you can see that all of our information is now tucked away within these tabs. one last thing before we move on. you're going to notike a bit of a gap here. this is where our product description would be, but since we've moved it all into tabs, we can go ahead and remove that block while we are here. if there's any other blocks that you feel are unnecessary and are just taking up space, feel free to remove them. for example, this one at the top where it says ecom geeks. is that necessary? for me, no, so i'm going to go ahead and remove it, and same with the share button. you might decide to keep these blocks. it's totally up to you. but, as you can see, we've already condensed our information quite a bit and it's looking a lot more clean and organized, and it's also making more room for more essential pieces of information. this leads me to our next step, which is adding our star rating and our customer reviews. these both hold a lot of weight with potential buyers, so let's go ahead and add that in now. click add block star rating. i'm going to drag this up right underneath my product title, [Music]. i'm going to change my alignment to left and, if you want, you can play around with the size of the stars here. next, we are going to add in reviews, so click add, block. click reviews, and i'm going to leave this one at the bottom here. if you don't see reviews as an option to add, you'll need to add the product reviews app by shopify. the next thing we're going to do is add our trust badges. so save your work, if you haven't already, and then exit out of here. click apps, customize your store and search for ultimate trust badges. here's the one we want by conversion bear. it's 100 free, no trials or anything. you can just use it. click add app, install app and then you will be brought here. if you click select badges, you're going to see hundreds of payment providers to choose from and as you scroll down towards the bottom, you're going to start to see things like this, where you have money back, guarantee, authorized dealer, fast shipping, and as we scroll down even more, they have things like cruelty free, not tested on animals, vegan and more. i'm going to select my badges in a minute, but really quickly, i want to show you that you can change the appearance of these badges, which i highly recommend doing, so that they all have the same appearance. you can select monochrome or have a card outline, whatever you like. you can also change your alignment and the size for both desktop and mobile, and then up here, you can choose to erase the text or change it, and you can also change the alignment as well as the font, if you want. here's what i did for my badges. i chose free shipping, money back guarantee, 24: 7 customer support and secure checkout. i removed the title that was here, and here are my badge settings. i forgot to mention this before, but you can choose an animation for your badges when they load. i set mine as none, but it's another feature you can explore and play with if you want. once you're happy, make sure to save your work and then let's head back to customizing our store so that we can add this in. to add it in: click, add, block, select the trust badge widget and then i'm going to drag mine up right below the add to cart buttons. we are going to change one last thing, which is my favorite upgrade, and that is to change our color variants from text to nice circular color swatches. for this one we are going to need another app. this one is called global color swatch [Music]. when you get here. you can select how you want the variations to display for size. i'm going to leave it as button, but you could choose drop down or any of the other ones shown here. the important part here, though, is that for your color variation, you should select color or custom image swatch. when you're happy, click next steps. here is where we can choose the template we want for our product pages. you can click through these and select whichever one you like best. this next page has a lot of options for you to go through. i personally didn't adjust anything here, but it's there if you want to. our final step is to select which theme we want to install this on. once you've selected your theme, click install. now it's going to ask you to preview your product page to see if the swatch worked. you will see that it doesn't, but that's okay. we just have to configure one more thing. so go ahead and click. i see the swatches under color. click config, and then you're

Shopify Tutorial: Part 1: What is a Shopify Block and How to use it in a Custom Section

[Applause]. [Music]. [Applause]. hey everyone, brian from call me brain- here and in this video I'm going to show you how to use blocks and create an example of how to use it with a simple text input and combine it with the color and range input options to demonstrate how a merchant can easily update the font color and the font size. now, before we begin, a good friend of mine who owns a successful Shopify store that sells jewelry online mentioned to me that she typically just uses the Shopify built in WYSIWYG editor to input her content. WYSIWYG stands for what you see is what you get. thanks for the feedback, and please be sure to check out our website at CJ rocker com now. this editor is a great tool and fairly easy to use, but the main disadvantage is that it creates a lot of excess code in the background, which may slow down the loading of your page, and one of the main advantages of using a custom page editor is that it gives a better visual representation of what your page will look like. the very same way the home page works, where you can just drag and drop your content and reorder it in any way you wish. now, if you're a store owner or a developer, which method do you prefer? please let me know in the comments down below onto the tutorial. what is a block? to put it simply, a block is Shopify's version of a building block, where each one has its own unique content or data, such as text, images or video, that can be displayed and rearranged in any order inside your Shopify admin panel. click on online store on the left hand side, then click on the actions drop-down menu on the right hand side and click on edit code, and this will bring up your code editor. now the first thing we're gonna do is click on add in the template. then you click on the drop down menu and select page. we're going to call this many blocks. now, this is going to be our page template that we will be using later. next step: scroll down and click on sections and add a new section, and we're gonna call this blog - [Music]. now, this is going to create a blank schema for us to work with and since we'll be using blocks for this tutorial, we're gonna remove these two lines and I'm gonna start typing the code. now I'll have all this on my website and for this tutorial, I'm going to type everything out and explain everything as I go along. the first thing we're going to do, great- is creative blocks, and we're going to create an array. so whenever you create an array, it goes in between square brackets, close those inside our blocks- [Music], do an open curly bracket and close it off, and we are going to set our input type, type and the name of the type is text. next, we will give it a name and we're pointing [Music] texts as well: [Music] and every input settings. so settings is an array as well. so we will contain multiple types of inputs and for this example, we will using text. once again, we have open and close square brackets and our first input type will be in between curly brackets as well, and every input type has four things: type, which is text [Music]. then it has ID. this ID is unique to this specific input type. whatever data that the merchant inputs here is specific to this input. so we're gonna call this one custom dash text. next, we have defaults, so default is display by default whenever the merchant adds any input. so we'll just say default text, still, I'm sure- and the final thing will be the label. now, the label is what is displayed on the admin panel and we'll just call this one text field. okay, now, once that's done, we'll save and the next step would be to output the input type that we just created. so since we're using blocks and blocks is an array, we're gonna have to use a for loop to loop through all the blocks that we're gonna create. so I'll show you how to do the for loop. it's open curly braket, percentage before and colorblock, so this is individual block within the array of blocks. so I'd be in missus section, blocks, as you see here, and then to close it off, we do percentage and close curly bracket. now to close the loop, we have to do the same thing and I open curly bracket, percentage sign and type an end for that. you know we're gonna display our input. to do that, we're gonna put everything right now inside a paragraph tag and then here now to display text that comes from a schema. it's double curly brackets, do to open and to close, and live in here and call it block, which is our variable name here, blocked dot settings, so Vivi settings here and the unique ID, which is custom dash text. once that is done, we'll click Save. next we go to our page template that we created and below where it says div class equals RTE. we're gonna hit enter one time and we do a single curly bracket percentage and since it is a section, keyword, section and quotes, you name the block, close the curly bracket and we get save. now let's see what we created. next step would be to right-click on pages on the left hand side and click open in a new tab, and we're gonna create a new page here. so I'll click on add page on the top right hand corner and for this we're just going to call that block tutorial, and on the template on the right hand side there's a drop down menu and we're gonna find the page we created which is blocks, so page blocks, and then we click Save. final step is to lick on our online store once again. then we're gonna click on customize, so this will be the visual editor. this is what the homepage looks like. so we're gonna find on the page we created there's a drop down menu here. click that and underneath pages we see walk tutorial, which is in the page we just created, and on the left hand side, this is the admin panel. so we have our block template, which is the section we just created. click on that and, as you can see here, it says add text. once I click Add text, it automatikally populates pons and website itself you know as our default text and we can just change it here. so this text, so this is one block within the array of blocks. so if we go back to our section here, it will loop through every, every block that we create. so so far we've only created one. so if you go back to the site, if we add another text block- [Applause], [Music] creates two. so now we have two and we can actually drag and reorder it if we want. and that is the first step in creating a text block: [Music] [Applause].

How To Add Custom Fields To Products On Shopify

hey guys, christian, here and today, we're going to go over a fairly new update where you can add custom fields to your products, and, of course, i'm going to show you some examples at the end. let's get started. custom fields, or meta fields, enable you to customize the functionality and appearance of your shopify store by letting you save specialized information that isn't usually captured by the shopify admin. you can use metafields for internal tracking or to display specialized information on your online store in a variety of ways. for example, a candle seller might want to display a burn time for candles on their product pages, while a grocery store may want to display a product expiration date for canned goods. in our example, we're actually going to add model information, recitan information, in a collapsible menu to the product page, so you can actually see that dynamic data on a per product basis, which you can do before. all right, and then, for those of you who don't know exactly what i'm toking about, i'm going to show you here in our totally 90s kit website. so i'm going to click on the little eyeball here, i'm going to open up and find one of our products. i'm gonna go to the fresh prince of bel air and click on the yellow shirt and when we tok about custom fields, if you think about all these right here. so the fresh prince design d, this is tiknically a field. this is the title of that product, right? uh? this is another field. this will be the pricing and so forth. so each of these things right here are tiknically fields. now, what you couldn't do before was add custom ones, and that's what we're going to show you how to do today. there's two ways to access the actual meta fields. i keep saying custom fields, but custom fields and meta fields are the same thing. but if we go here to settings and you'll see that now we have a meta fields option, it's going to be pretty fairly new. so, as you can see, some of the options here are still coming soon. so there will be some videos in the future that we'll be toking about meta fields and how to use them for collections, customers and orders. but for now we have products and variants as the only options that we can add extra midi fields. so we're gonna go to products and then in here we can add a new definition and then in here we can do- let's see product um sizing in the description. you can add a description, if you like. uh, this would be for, again, people who are inputting this information- you, they might need an extra description for it. so let's put. and then you have the option to select the content type. um, you have a lot of different things in here, as color, date and time file, json files, measurements, number rating, reference text- true or false- and urls. depending on what you pick based on these content type, it's going to be the exact content. so if you pick url, for example, you will have to type in a full url for that custom field to actually work. so in this, in this instance, we're just going to do product sizing, so it's going to be general text, so we're going to click on text for that. then in here you can do single line or you can do a multi-line, etc. and then validation, you can actually create rules so you can have a minimum length, a maximal length or, with the regular expression, there's certain keywords that need to be included within that partikular thing. i'm just going to save this just for now, just so we can kind of see what we're working with here. now, typically, when you go to your products- and let's go to the one that we were at, which is the- this one, the yellow shirt, just as i showed you those fields on the live website. the fields over here you'll see the, the title description, these are all different fields- the actual picture or media, the variants are all different fields. and then here towards the bottom, once we start adding custom fields or meta fields, you'll start seeing them populate right here. so, product sizing: we have it in here and we can add information. you see, the description will show right here at the bottom. it's a single line. click on save on that and now that we've saved that for that partikular product, now we're gonna go back to our online store and we're gonna click customize. but before we keep going on, i want to say welcome to everyone new. my name is christian pinon, one of the co-founders here at the branding. we've been helping frustrated store owners since 2015 become impactful. still owners tutorials, tactiks and strategies, and one of the ways you can support our channel is by hitting that subscribe button and turn it on notification. now that we're back here in the editor, we're gonna click on the product page, i'm gonna go to the default page and then i'm gonna expand on this. oh, alert, custom alert, customer caution, caution, um, actually, we're gonna take a little break here. we're gonna go. we have to rewind and go back. uh, this is a good, good learning opportunity here for us. in order to fully use the new meta fields, you have to use a online store 2.0 theme. these are newly created themes for this partikular feature set and for additional features that's coming in the future. so if your store is not a 2.0 store, you will need to upgrade to a better, more updated theme, which we will be making a video on this pretty soon, toking a little bit more in depth about that. but since this theme right here is tiknically not, uh, supported with the new os 2.0, we're going to click on exit real quick and i'm going to show you where you can find these new themes. now, some of the old themes. they have updated their themes to have the new 2.0 stuff, but you have to actually fully click the button and update it and you will see a message right here at the very top where it will say: hey, this theme has a new version. please update. please do, because it will include a lot of new features that you currently don't have and they will keep adding more in the future. now, um, i'm going to see explore free themes. when i click on that- and yeah, in here i believe that, yeah, the only one right now is the recording of this video. the only free theme is the dawn theme. so you see, it has a badge that says os 2.0. but there are a few other ones, so i'm going to click on both paid and free and have check mark the online store 2.0. you will see that some of the older ones, um, like fret, expand, streamline, uh, i remember avenues, one of the old ones, impulse- for these impulses i know a lot of our clients- motion is another one. so all these older ones, they have upgraded them to the 2.0 and, as you can see, the pricing has gone up a little bit on these, um, this one's 310, this is 300, 280, but it's because they opened up the floodgates to truly have a custom experience when it comes to to your themes. so for this partikular website that we're doing here, we're gonna just do dawn and i think i have it uploaded already here. see, yeah, dawn is right here. so what we're gonna do is we're actually gonna customize this one. that way we can kind of see what we're working with when it comes to these new meta fields, all right. so, yeah, in here we're going to go and do the same process: go to products and default product and then in here you can see the difference: um, the product information is actually broken down into each separate field, right? so potentially, if you wanted to hide the- i don't know the title of it, you can literally just hide the title by clicking a button, whereas before is probably a little bit more complicated and you have to do a little bit of custom code and custom work to it. now in order to add the precision information that we added, we're going to click on add block and then for this partikular theme, the don theme, it gives you a few options on what you can do. as far as the content, typically you may find that you just have the option for text, but you do have some other ones in here. i want to do the collapsible tab, because that's just additional information that doesn't need to be necessarily displayed right away. um, and once we click on- if you can see right here it's already been added- we can click on col.