A Link List Section for the Flex Theme on Shopify

hey Scott Austin here from Jade Puma and for all of my stores I create a page called brand guidelines and it uses a custom section that I created called brand guidelines that allows me to put in you know what logos we're using, what the color palette looks like, topography information, and I also have information in the bottom of this one for flmb, where I have links to video tutorials and I also have links to store management tools, and this whole thing started off as one big section with lots of elements you can add to it and blocks that you can add for the different types of content and the problem I came across- let me just open this page up in theme customization inside of Shopify admin. the problem I came up with is a section currently is only allowed 50 blocks and here, if I open up the brand guidelines, you see I've got I don't know how many, that is, let's just say, 2025 different uh blocks added for colors and the video tutorial links and headers. and then I was also adding you know, other links for the story management tools section here and I hit the 50 limit. so I created a new section that just allows you to add the link list. um, that you know here's store management, where there's, you know, headers and then links, so that that section works like this: you can add it to a page and it allows you to Define what the header is going to be and, uh, you know as much information as you want underneath for an explanation. you can also set some colors and some spacing. and then the blocks. you have two options for blocks. you have a link header and a link, and they're pretty simple. the link header is this element here and all you get to do is put in what the text is for that. and then links are two elements, which is the title, which is this information, right here, and then the actual link that you know you want it to go to, and it shows the link, uh, as text, and it is hyperlinked, so it'll take you to whatever that element is. um, for the cut, for the consumer of this page, they can quickly link off to different things. so that's the section, pretty simple one. to add it to your store. all you have to do is create the new section using the section name that's shown on the tutorial, which is, if you're watching this on YouTube, there'll be a link in the YouTube video to go to the Jade Puma site where the code is located. if you're on the YouTube or if you're on the jpuma page already watching the video, then just look down below the video. you'll see the code block there. so create a section with that title name and then just copy the the code from that code element, paste it into that new section and you should be able to add that section to any of your pages in your store after that. all right, hopefully that helps. thanks for watching.

Shopify Theme Build: Navigation & Shopify Objects - Episode 5

hey everybody, sam webb here and i'm back with part five of my shopify theme build series. today i plan to do something a little bit different. as you can see, i've already built out a basic navigation using html and css. i'm still going to walk through shopify's native navigation functionality and how you can add that to your site. more importantly, though, i want to go a little deeper into toking about liquid objects and how you can use them for this feature and for other features in the future. to start off, let's look at shopify's liquid objects documentation. when you first land on the object documentation, what you'll see is a little bit that tells you about how shopify objects work and some of the kind of container objects that hold sub-objects. so in uh. an example of that is all project, all products. so the all products object uh holds a bunch of products. it holds 20 unique products, and basically you would in your, in your code you would write all products, and then you could put the, the handle of a product, and then what that returns is a product object, similar with artikles. you- you saw me do this with collections as well earlier in the series. on any page you can just write collections and then you can pass in a handle. this just shows you a bunch of different kind of global objects that are always available. one of these global objects is called link lists and this is what the navig. this is the feature that's being used by the navigation, and you can see an example. they show four link in linked lists- categories, dot links- and then they have some html here to show you how you can display that link. now again, when you land on this page, we're looking- if you look on the left here- we're looking at the objects documentation. we're not looking at all of these sub-objects, we're just looking at the primary objects documentation, which toks about all of the global objects that are across this that you can use on any page of the site. yeah, i just want to quickly hop in and clarify something when i'm toking about the objects there. there are no primary objects and sub-objects, right. everything that you see on that left side of the screen, all the different objects, those are just the objects, and then you have global objects that that their specific purpose is to allow you to access those other objects, right? so all pro, all products is not like an object that you would normally just use it by itself. you use it specifically to gain access to a product object. so i just wanted to clarify that really quickly. all right back to the video now. there are also more specialized objects and some of the in, and these objects can be accessed in multiple ways. but let's take collections or collection, for example. so you've got this collections object that has a bunch of collections and you can pull a specific collection with a handle, like we discussed earlier, and what that returns is a collection object, and so if we look over on the left side here, we'll see collection singular on the left. if we click that, this toks about the collection object and this is an object that has all of the information about a specific collection. this tells you every piece of information that you can get on an object. and if you look on the right side here, it's got its own navigation for this page, and it should. it's a quick view to see all what you can get, so you can get the description, you can get the id, you can get the image, you can get the sort by, you can get a title. there's all types of things you can get off of this and all of these things can be used when you're building your site and on the left side, i just want to scroll down and show a few more things. so, just as we scroll, you'll see there just tons of objects that are available for you to use, and i mentioned that there are multiple ways to get to these sub objects. so, depending on the object, you might have a global object for, like collections or like all products. right, you have this global object that allows you to access a sub object anywhere on the anywhere on the site. you've also got scenarios where specific pages allow for specific objects to just be used. so on a collection page, for instance, you have access to that specific collections object by default, so you don't have to use the collections object to be able to access this specific collection. you can just go straight to using this sub collection right here and the object for it. again, this is similar to what you've saw, what you've seen me do already. you saw me do it on the last video, uh, the collection template video, and you'll see in an upcoming video when i start working on the product page. if we keep scrolling down, you see we've got the paginate object which we used in the last video. uh, we also have the part object, which we also used in the last video, and here's all the documentation for that. so anytime you want to work on a feature, this is the place to go, so that you can kind of just scroll down and say you want to work on search, you'll see that there's the search object here, and so when you land on the search page, this object will be available to you, and it works somewhat similar to a collection, where you're able to kind of grab all the products and loop over them. now, going back to navigation, i mentioned that we have link lists, and a link list is is what it sounds like. it's a list of a bunch of links and that's this is the object that's used for the navigation. so if you were to go into your admin, if you clicked online store, and then this sub list will open and you have navigation here, you'll see that you can have a bunch of menus here. so i've there's two of them here, and these two are here by default. usually my main menu is a little different than what you'd see when first creating your store, but when you first create a store, you're going to have main menu and you'll have footer menu and if you want to add a new menu, you can just click this add menu button and start adding items and you can name it. we're not going to do that right now. we're going to go back here and we're going to look at main menu. so we've got a bit of information here, we've got the title, we've got the items and then on the right side here we have the handle. and this handle is going to be important because, similar to what you would do with with all products, where you pass in the handle to get a specific product, or with collections, where you pass in a handle to get a specific collection, you do the exact same thing with linked lists, where you'll use the, the global link lists object, and you'll pass in a handle which, in this case, we're going to pass in main menu and that's going to give us this, this specific linked list, or this specific list of links. and so this entire thing here, with all of its information, is what's known as a link list. each of these individual items is what's known as a link, and if i click edit on home, you'll see that it simply has a name and it has a link or a url that it can. that's going to go to. so, with all that information out of the way, let's use this on the front end of the site. now, before you write anything new, let's look at the code that i've already added. so we've got this header file within snippets, and within that or outside of that, i'd say, we've got sections which also has a header file and it just includes this snippet inside of it, and then we've got a wrapper called header. we've got a kind of a sub wrapper called header wrapper and that's to kind of give this a maximum width, and then we've got a link which is our logo and we've got the actual nav. so if we go back to the front end of the site, this whole white bar up here is that that header element. on the left we've got the link which links to the home page, and then on the right we've got some other links here that for now go nowhere. we can close that. i'll close up all this css for now. and now we've got the nav, and for the nav i have four lis just to give us that look. but these don't do anything yet. as we saw in the documentation, we have this object called lin.

More:turbotax maker will pay $141m in settlement over misleading ads

Shopify Navigation Tutorial - How to Create Links and Drop Down Menus

let's go ahead and click here on view your website. we do not see any of these pages. I do not see a Contact Us tab right here and I definitely do not see a frequently asked question tab here. even if I scroll down, it's not here. the reason these tabs are not here is because we haven't modified the navigation, and let me show you how it's done. let me go ahead and close this and let's go to navigation here. right now, in the main menu, there are only four tabs available that customers can click on. you have the home catalog blog and about us. let's go back here, just like we said: home catalog blog and about us, and with the footer section we have search and about us. if we go back to the website and scroll all the way down to the footer, you'll be able to see that we only have the search and about us, just like we saw on the admin page. so let's say we want to add the contact this page and the frequently asked questions page to the main menu so that I'll be able to see it here in the main menu. let's go back and click on edit link list and next you want to click on add another link. we're going to call it contact us- and from the drop-down menu here and choose page, because this is a page, it's not a collection, it's not a product, it's not a blog, it's a page. so I'm going to go ahead and click on page and I will choose the page which is contact us. so here it is in the drop down menu. I'll click on it and hit save and that's it. now, if we go to the website and refresh it, there it is contact us. if you click on it, it will take you to the contact page where you'll be able to fill out the form here. okay, so again, if you want to add any collection or page or anything else to the main menu, this is where you do it. now. let's say, you do not want to add another link, but what you want to do is add a subcategory. we have the catalog. we want the catalog to include two different collections: the men's collection and the women's collection. in order to do that, let's go ahead and go back to the Shopify admin and let's click on navigation. let's go back to the main navigation page and now, in order to add a link list, click here on add link list. the name of the link list will be the same as the tab the subcategories will belong to, so in this case it's called catalogue, so we are going to type in here catalog, ok, next you want to add the sub categories. in this partikular case we're going to add women, which will include the women's t-shirts, and the other subcategory will be men, where it will include men's t-shirts. so first we'll add men and click here on the drop down menu and we'll choose collection, because the subcategory we want to add is a collection- and then click here again and choose the collection- men- and that's it. men is now a subcategory. so let's go ahead and add another one, the women's category, and click here and choose collection, and I'll click on women and hit save. ok, so let's go back here to the website and refresh it. as you can see, right next to the catalog, you have an arrow if you hover over it. now we have this: two subcategories- men and women, and when your customers click on the men's collection, they will see the men's t-shirts, and if they click on the women's collection, they'll see the women's t-shirts. so let's go back. let me show you a couple of things here. first of all, if you want to delete a subcategory. this is where you do it here. and if you make any changes, don't forget to click Save. and finally, if you want to delete this whole linked list, just click here on delete linked list. ok, so let's go back to the main navigation page. as you can see, now catalog is considered a new linked list because we just added it and if you want, you can delete it from here. or if you want to edit or add any subcategories, this is where you do it. and if you want to add any other linked lists- meaning if you want to add subcategories to any oops, here again, you just click on add link list and follow the same thing we've done when we created the catalog. finally, let me show you the footer. as I explained, the footer is what you see at the end of your online store right now. it has search and about us. if you want to add any other links to it, you click here on edit link list and here you'll be able to add more links. let's say, we want to make it easier and we want the contact this link to be available also at the bottom of the page, so go ahead and click here on add another link. of course it's contact us and again we're going to choose the type of link. it's a page and we're going to choose the page contact us and just click here on save. if we go back to the website before refreshing it, you will see that we only have search and about this, and once we refresh it you can see that Contact Us has been added. ok, so let's go ahead and close this tab. remember, you always want your link name to be the same name as whatever it's linking to. so if you want to link to contact us, then the link name will be contact us. if you want to link to about us, then the link name has to be about us. you get the idea. the same thing applies in the main menu. so let's go ahead and click on save here and let's go back to the navigation. now you know how to add tabs to your main menu, to your footer, and add subcategories.

More:How To Make $100/Day On Shopify Using Influencers (Beginner Friendly)

How to add a new filter group to Collection sidebar in Shopify Theme

okay, now i will show you how to add a new photograph on your collection sidebar. go to the collections on the left side. we have we. we see the cyber here. we already have three examples: uh for photograph. uh, color department card type. here this is the photograph or video group settings for the color you can see. so i you know that vidcorp is a tool for you to filter the products on your website based on text, right? so a must-have step you need to do is adding tests to your products on your sure before admin. so the first step in the process is login to login to your straightforward mean, like this, and go into the products and store adding text to the appropriate products, like, for example: i will add a tag to this product with um silver. okay, click south and add another tag to this product. click gold and save it. okay, this is how to add tag to a single product. you have another option to attach to a vendor or product by using app name test flow here. so i will attach a link which will show you how to attach to a build a product under the clip, this clip. so now back to the process. so, after you add a test to appropriate products and you turn back to store settings and add a new photograph like this. okay, name it like materials, materials. okay, and this with test. you need to enter the tasks you already add to your products recently to this text box saver and under karma, to have more chat gold, for example. okay, it's running down. you see, to filter and you can track it on this. okay, you see. so now we will know how it works. i click on the option. it will show you the products with the tag feed saver: see. so this is how to add a new photograph on your collection sidebar.

Shopify Tutorial Creating Drop Down Menus and Smart Collection

hello, this is Kevin with Pinehurst websites, and today I'm going to show you how to connect a collection to a navigation menu. so first thing I'm going to do is I'm going to change a collection from a regular manual collection to a smart collection, just so that products automatikally go into that collection. and you can do that by sorting it through different ways, but I'm going to do it by vendor. so the first I'm going to do is I'm going to delete this collection here. actually, I'll just add another collection. I'm gonna call it the same thing and it's called lucky feathers, and this is automatikally gonna put the selected products- and I'm gonna do it by vendor. so this vendor is going to be lucky feathers and it's gonna automatikally put anything that's lucky feathers on vendor in the product into this collection. so I'm going to go ahead and save this. and now let's go ahead and go back to our collections and let's just get rid of this one- delete selected products collections. that is going to add the picture into this and say that: and I should bring the picture from there. okay, next thing I want to do is we want to go to the navigation menu and we just want to put this on the main menu. so we're gonna edit the linked list and add another link. then we're gonna go in the name of it and we're going to connect it to a collection. you can also connect it to products or pages, so it can go directly to an item. so once you select from the center column on the third column, you need to choose that collection and here it is lucky feathers and that's all there is to it. so you can go in and view this in your store and you'll see a drop-down on the main menu. so it's just good to store and here's thank-you, feathers. if we go in to back to here, we can also move this around and let's just say we want to be right on the front. so now it's going to be. now it's going to move from over here to over to the left. so now we have it right here and that's all there is to it. thanks for tuning in to pinehearst websites. now this is part two of working with navigation menus and smart collections on the Shopify website, and this is Kevin king from Pinehurst websites, and what we're going to do now is we've connected our main menu at the top of the screen, as we saw before, and we've connected the main menu right here by putting a new category. now I've made another sub link list and we want to connect those as well. so the way we're going to be able to connect those is we're going to have to use smart collections. so if we look at our links, what we did was we added another link list which was called we were doing lucky feather here, and this other link list is down at the bottom and you created the same way. right here it is, and when we're going to go in and edit it, we don't have it connected right now. we have to connect it. it's connected to charms, but it needs to be connected to lucky feather charms and this needs to have the exact same name as the list than the navigation menu and the collection, so that we can connect everything. so the first thing we have to do is, instead of, this can say charms, that can say anything you want, but the connection a collection is going to connect to is going to be lucky feather charms. so let's create that collection and make it a smart collection and it's going to have to have. it's going to have to be an item type, there's going to be charm and it's going to have to be the vendor. that's going to be lucky feather. so we're just gonna go in, let's go ahead and use this right here, and we're gonna go into collections and we're gonna add a collection and this is gonna be lucky feather chars, and I just copy: this has some content in it. you can add anything you want in your description and this will make your meta description. we want to automatikally fill this product category, so we're gonna do by item type and it has to be equal to charm and then also so it has to meet both of these conditions as opposed to any condition. so it's got to have a vendor, lucky feather, and we go save. now, if we go back to our navigation, we're just gonna go down to the lucky feather charms and we're gonna edit that linked list and we're gonna connect that to lucky feather charms. so it's only going to give you items that are lucky feather and you want to do that with each one of these. so you want to create a bracelets category called lucky, lucky feather bracelets, and then the same thing with lucky feather chain necklaces and lucky feather rings, and you put those two criteria, adding an item type and a vendor, and that's all there is to it and then you just save this and you are all set. so now, on the top, this is going to connect to only lucky feather charms, so there aren't any products in that yet. but once you add a charm for the item type and you add the vendor of lucky feather, it will fill in to this category. so thanks for tuning in to pioneers websites, and you can check out other tutorials at pine terse websites com, or you can find me on youtube at kevin king.

Shopify Part 7 Navigation

okay, in this video we're going to set up some navigation for our store. we're going to deal with the navigation bar and we're also going to deal with quick links with our footer links. so let's go ahead and get started with that. let's go into the backend and let's go on the left hand side and let's click on online store and let's click on navigation. now the first thing that we want to do is let's deal with the footer, so let's click on edit link list and I want to add another link and I'm going to call this one returns, and I'm going to hit this drop-down and select a page. and now we're going to select the page which is refunds, and then let's click on add another link and we want to put in our privacy policy. we want this to link to a page. now let's select the page for privacy policy. there it is. let's add another link and let's call this one terms of use. we want this to link to a page. we've already created all these pages, so now we're just putting them in the navigation- terms of use- and that looks pretty good. so let's hit save and let's go take a quick look at what we've done here. let's scroll to the bottom and we can now see that we have our return a page setup, our privacy policy in terms of use. so let's go and deal with our navigation bar. let's click on navigation and let's go to our main menu and just hit edit link list. now let's take a look. this is all fine. home is going to go to the front page catalog. I've got this one just set up to go to all collections, which is fine. and about us. I've selected that. it goes to a page and it's to the about Us page. let's add another one and let's put in contact us and we're going to link that to a page and let's select the page and it's contact us. now let's just click on save and let's go back and see the changes that we've made. here will refresh the page and there we go. we've now got our basic navigation. now i'm going to show you one more thing that we want to cover. let's go and take a look at an item. now for most of the products, you will see that there in the the accordion dropdowns here, you will see the size guide. now, if you don't want the size guide in here, you may want your size guide always displayed at the top. so let's go through and- and let's get this done- let's go into the back end and let's click on online store and let's go here to pages and let's add. a page will click here and we're going to call this one size guide. let's put our cursor in the box down here and let's select insert image and let's go to upload file. now in the members area you're going to find a link to a size guide. we're just going to select that and you download it to your computer and then navigate to where you have it stored here, select it and then click on open and we'll see that it's going to show up here in a second and then we'll just click on it. and now we want to make sure that we select the size. I always go with a nice big size. that way it's going to display better on the desktop. and then we'll just click on insert image and there it is. let's save this page. and now let's go to navigation and let's put this in the main menu. so let's edit the linked list, let's add another link and let's put in here size guide and let's select. we wanted to go to a page and let's select the page that we just created, called size guide. let's click on save and let's go and take a look. we will now have size guide in the navigation and there it is. if they click on this, it's going to pop up their size guide. okay, that pretty much covers how to set up your basic navigation. we've got our footer links in place. we've got our navigation links in place. we're looking good. in the next video we're going to tok about adjusting individual product, so we'll see in the next video.