okay so the next thing in webflow that,we are going to,learn is how to use the cms,so our cms is short for content,management system,and so it's basically just a database of,information that's stored kind of behind,the scenes,that will kind of auto fill that,that content that you're putting in the,database you can auto,fill it in somewhere using html,that sounds a lot more confusing than it,actually is,so i'm going to show you really quickly,how we can start,building out our cms so the first thing,you're going to do is,open the cms tab so you'll see it looks,like three different,disks stacked on top of each other,that's kind of a general symbol for,database,so we're going to open that and yours,will probably be empty,so all you have to do is click this,create new collection button,at the top and then it's going to show,you this,full screen of stuff that looks a little,bit confusing at first,so what we're going to do here is,basically,just create a collection and in the case,of both clients for your assignment,whether it's,um it's basically either for each client,it's going to be a listing,item so if you think about our listings,for,our glampground if we look here we have,all this information,on all three listings and they're all,kind of the same,information they're gonna all be unique,depending on you know if it's listing,one listing to listing three,but they're all gonna have a section for,price for name,for type description and so on,so rather than us having to create,a listing and you know design it the,like design the whole thing and then,duplicate it two more times and then,you know copy paste listing two's,description and,you know all that if down the road i,have,say like 300 listings and i want to make,an,edit to one of these pages or i want to,maybe add something additional,if i you know maybe in five years we,have a new kind of,i don't know a topic that has to do with,the technology of your home or something,like that i'm not going to want to have,to go through,into 300 different listings,and update each of those listings for,you know what kind of technology is,running the home,or whatever so this is why we're going,to use our cms,so it's going to be an easy way to just,store our content,and then it's going to kind of auto put,this content where we tell it to go,using html so let's,go back to our new collection so i'm,going to call this,my glamping listings,okay so all it's going to ask for at the,very beginning,so i can start by using a template and,they do have a listings tab here that we,could use um,but let's just not use it just for now,just to show you kind of how it's going,through,um kind of by building it by hand,so we have to give it a collection name,so that's basically just what it's going,to show,here in this left-hand column,the collection url so that's really you,can see it here,um it's it's really just giving it this,this slug here okay,um now down here we have our collection,fields and so this is where we're going,to sta
Let's move on to the first section of Collection Page & Product Sort
Create dynamic portfolio pages using the Webflow CMS — Build a custom portfolio in Webflow, Day 7
Create dynamic portfolio pages using the Webflow CMS — Build a custom portfolio in Webflow, Day 7
This is the most advanced lesson so far.,Because up until now, we’ve built out our
homepage (a single, static page that has dynamic,projects that show up in the section...that
has projects).,And we’ll come back to it later, but we
want to build our second page, and there’s a secret.,We’re not just designing one page.,We’re designing one page...which will serve
as the design for all client pages to be,automatically created.,Unlike the homepage, this page is not built
from static elements.,In fact, we’ll use a lot of the same linking
we used in the Collection list (in our projects,list on the homepage) and we’ll build out
this design once.,But the result will be unique pages that are
automatically generated for every project.,(We’ll do this in the CMS.),And we’ll start with the hero section, then
we’ll do project details, then the larger,project description — we’ll use CSS grid
to build a multi-image layout, we’ll add,links to our other projects, and finally,
we’ll add–, Hang on., Are you going to– Sent!, Not gonna read that., Say it…, Dear McGuire., Keep reading., “I’ve been thinking a lot about
the last few lessons.,It’s critical, though, that you follow the
design I made in Figma.,If you don’t, we’re going to have problems.,Big problems.,Problems you can’t even...”,Do you know how much this reads like a threat?, Am I threatening?, Not at all., I’m a little threatening., No., Red pen., Don’t do it.,Finally, we’ll place in our symbols (our
navigation and our footer).,But let’s start with the hero section.,This is not the correct hero Section, because
we’re still on the homepage.,But, to get to the right hero Section we have
to make it, and we’re going to make it on,our collection page.,Here’s how that works.,If we go to the CMS over here, we can see
our collection we created earlier, projects,,and of course we have our four collection
items, each of the projects in Megan’s portfolio.,So, if we go out of this, let’s go out of
CMS Collections, and go into our pages panel.,We can see under CMS Collection pages, a projects
template has automatically been created.,That happened because we created projects.,So if we open that, it’s entirely blank.,But there’s something else going on.,If we go up here we see this little dropdown
called item, and this is each of our collection,items, but right now it’s blank.,But just as we used the Collection list earlier,
to list each of our client projects, a page,has automatically been created based on each
of our client projects., and we can link to,those pages.,Here’s how to do it.,We’ll stay on investment app for right now,
and let’s design it as if we’re only designing,one static page.,We’re going to pull that data from the collection.,So, let’s add a Section, we’ve done this
before, let’s add our class, it’s called,Section, there we go.,Let’s add our Container, so we’re getting
pretty good at doing this, of course we have,our class, Container, and of course we’re
going to add two elements inside of that.,Let’s ad
After seeing the first section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next second section about Collection Page & Product Sort
Collection Page SEO | Follow These Steps To Rank!
Collection Page SEO | Follow These Steps To Rank!
hey guys chris morano here and if you,are interested in learning about how to,rank your collections page to drive,thousands of people to your shopify,store well stay tuned because you're in,the right place i'm breaking down a,couple different collections pages that,i've found that rank really well in how,to optimize your collections pages in,order to capture a significant amount of,organic traffic for your categories stay,tuned,hey guys my name is chris murano i'm the,founder of bluewater marketing the,agency that specializes in shopify and,e-commerce growth as well as an,e-commerce store under myself and coach,consultant so i've got a lot of,experience in looking at a number of,shopify stores to establish how to rank,collection pages to drive more top of,the funnel purchase intent traffic to,your website so if you're interested in,learning more stay tuned because we're,going to get into it right now all right,so we're not going to get into what a,collection page is because you're here,chances are you already have a shopify,store that you're looking to optimize so,the first step is to optimize your,actual collection pages for the serp,meaning your title your meta description,all of your images should have alt text,associated with whichever the page title,or collection title you have deemed,important so all of these three facets,title meta description and alt text,should all be in line or in sync with,the overall category name,but before you even do that if you want,to do some research prior to you can do,some searches,and so what i'm going to search is the,word couch now as you'll see number four,result is ikea now ikea has ranked,number four for couch and according to,my tools,drives an estimated 190 000 people per,month to their collection page which is,astonishing so what you'll see here is,now they have the subcategories broken,apart of all the different couches and,sofas that they sell so for your,business,figure out what those categories are and,put them into google figure out how many,people are searching for these per month,is it a very broad term that is super,competitive or have you been able to,niche down,your categories to be specific to your,products so understanding what that main,keyword is is going to be extremely,important in getting your collection,page to potentially rank and i don't,want to over promise because every,business is different every keyword is,different every industry is different,but these are going to be the main,things that you want to focus on now,remember when it comes to the keywords,you want to really have one keyword per,page meaning like the focus keyword or,your main target keyword should be only,on one page so if you're doing red couch,as a collection page well then your,product cannot be named red couch it,could be red leather couch red sectional,leather couch,could be a variety of red couch but you,do not want to use the same keyword for,both your collection page and a product,page big no go if you guy
After seeing the second section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next third section about Collection Page & Product Sort
How to increase collection image height on the collection page Shopify #ShopifyTutorial
How to increase collection image height on the collection page Shopify #ShopifyTutorial
hi guys good morning everyone uh,good afternoon with the name wherever,you are on the planet right now,so i discovered something i'm working on,i'm going to show you guys,how to increase the image visibility,like let's just someone browse your,website i'm actually doing this for a,client,of mine so let's say somebody browse,your website,and they can see the small images,because some people can't really see far,and some people can see fire so it's,better to zoom in the,image whereby you know let me just i'll,just zoom there saying i'll use google,chrome to zoom the same,about let's say 150 at least the image,should be able to pop,up up to the stage in order for you to,do that,i found a very good shortcut guys to do,this,so log on to your shopify store once you,log on to your shopify store click on,online store,once you click on online install click,on,the drop down arrow actions click on,edit code once you click on edit code i,will show you guys,is pretty easy you guys don't believe it,i close that out so you guys don't make,mistakes,so the first thing you need to do is,click on,go to section click on,collection liquid once you click on it,it pops up leave it open,then the next one will be collection,template,click on it it opens if you observe on,we start with collection,dot liquid so the first collection that,liquid if you notice,on the upper it says case section,okay guys i don't know if you guys can,see it when it says case section dot,settings dot grid,when when it is two percent the image,should increase,by 5 30. so what i actually discovered,is that you can actually change it you,remove this to number two,all right guys remove number two change,it to four if you have four product,on your layout if you have four product,but if you have two product just leave,it like that,if you have full product on your layout,this is the best way to do it,change that to four and change the four,to two,then leave it you can increase this then,leave it click on save,then do the same thing over here on,collection dash template dot liquid you,have to do that,also so you click change that two to,four,then change the four to two,all right then click on save guys,and let me zoom out you can see,this is 100 right now this is how small,the image is,so if i refresh we should get a bigger,image,you see that it's zooming a little bit,closer,so so pretty easy guys i'm telling you,guys,it's pretty easy if you have any,questions,you know email me contact me i'll,definitely respond i'll try my best,knowledge to assist you guys,like subscribe
After seeing the third section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next fourth section about Collection Page & Product Sort
hello and welcome to the out of the,sandbox video guide to the turbo Shopify,theme collection page and product page,today I'm going to talk to you about the,built-in theme settings associated with,the collection page which is what you,see here and with the product page which,is what you see here so if you are,looking for any assistance in,configuring your homepage for your turbo,theme there's already a video about that,too go check out that video first I'd,like to walk through what we already,have on the Shopify platform what we're,already working with Before we jump in,and take a look at the specific settings,so here we already have products on the,Shopify platform if you are looking for,any assistance on adding products to the,Shopify platform check out the Shopify,documentation as they can walk you,through how you can add a title a,description the product type vendor,collection tags all of these aspects to,your product we will be using all of,this data when it comes to the product,page but it's all configured right here,on the Shopify platform itself so if you,needed any assistance in how to operate,this interface check out the Shopify,documentation now I am going to jump in,a little bit later on and show you how,you can use the HTML editor to use some,built in components of the theme to,enhance the layout of your product,description and so we'll jump into that,a little bit later on but I just wanted,to show you that we already have a whole,slew of products on the platform with,various attributes those products have,also been categorized into a number of,collections so these collections are,collections that we'll be using,throughout the shop some of them were,used for features on the home page but,here you see a conventional collection,that has products in it it has a,description and it has a collection,image so we already have these things on,the platform alright let's jump over to,the actual customized theme settings and,see what settings we have available with,the turbo theme so here we are on the,themes panel and I'll use this,customized theme button to jump in here,we have the settings along the right and,we have the preview on the left we're,going to jump in to see the product page,settings first and I guess if we're,going to look at the product page,settings we should probably jump into a,product page so I have some products,already set up here in my navigation set,up let's take a look at the strap,product alright so here we have a fully,featured product let's go down through,the settings and that will sort of,highlight what each of these sections,are on the product page so starting in,the top left corner we have the,breadcrumb links so this is sort of a,path that was used to navigate to the,product so you can navigate backwards,through that path if you'd like to,access the collection through which the,product was accessed,so that whole feature can be enabled and,disabled these next few settings show,tags show type and show collections
After seeing the fourth section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next fifth section about Collection Page & Product Sort
How To Create A Collection Page | GemPages Tutorial
How To Create A Collection Page | GemPages Tutorial
Hi, I’m Lisa from GemPages. Today, I’m going
to show you How to Create a Collection Page. ,GemPages has lots of ready-made
templates for collection pages. But, ,you can always create your own
version to apply to different ,collections. Let’s learn how to create
a collection page template from scratch! ,First things first, you need
to set up your collection. ,From your Shopify Admin, go to Products,
then Collection. Click on Create Collection. ,Input a title and description for the collection. ,In the Collection type section, choose
"Manual". Hit “Save” when you finish. ,In the Products section, you can browse
and add products to your collection. ,In the Collection image section,
upload your collection image. Skip ,this step if you want to use the default
template banner for this collection. ,Hit “Save” as you finish. ,Next, head to the GemPages dashboard ,From here, click the "Create New Page"
button, then choose Collection Page. ,Or, on the sidebar, hover over the Collection
Pages button, then click the plus icon. ,Or, click the Collection Pages button, then,
from here, click "Create New Template". ,The collection page template will appear.
Name the template as you wish. ,As you can see, there are five elements:
Collection Banner, Collection Title, ,Collection Tool Bar, Product List, and Paginator. ,Let’s start with the collection banner. Click
here to replace the banner image. This is the ,default image for all the collections
which don’t have the Collection Image. ,The Collection Title is the same as your
previous settings in the Shopify Admin. ,Now, let’s take a look at
the Product List element. ,First, at the Collection section, click on
“Pick a Collection” to preview all elements. ,At the Dynamic section, make sure
you have this option turned on. ,This will allow your Collection Page to
display the right data following the URL. ,Next, you can choose the number
of products per row and per page. ,You can use our Global Styles feature to
design the whole template easier and faster. ,Check out our Global Styles video to
learn more about this wonderful feature! ,Now Save, Publish, and Preview it.
This is the template we’ve just ,created. Looks good, right? But it’s not
live yet. If you go to the collection page, ,you will see the old template is still working. ,No worries! Now, go back to GemPages
and head to the Collection Pages list. ,Hover over the template you’ve just created. You
can assign some collections to this template, ,or you can make it the default template.
We already included a link in the description ,below about how to assign collections to
a template. Make sure you check it out! ,Now, I’ll set this template as default by clicking
on this meatballs menu and choose Make Default. ,Your collection page template is now live!
And that’s it!,If you like this video, give it a thumbs up, ,hit subscribe and press the
notification bell to stay tuned.,Feel free to share your thoughts in the
comme
After seeing the fifth section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next sixth section about Collection Page & Product Sort
How To Change The Number Of Products In The Collection Page - 2022 Free Shopify Tutorial
How To Change The Number Of Products In The Collection Page - 2022 Free Shopify Tutorial
you want to go from a collection page,that looks like this,to a collection page that looks like,this bonjour shopify world my name is,andrew from ecom,experts dot io and the green hoodie,means we're doing some shopify code,okay so in last week's video we talked,about how to make a,master collection page with just the,collection page you wanted in your code,this week we're going to see if,we can add more products to your,collection page because maybe your,collection page is limited to,like six products and you love those,long collection pages with tons of,products on it so you want to increase,that from six,to well 50 because shopify limits it at,50. so i'm gonna show you two,options option number one is hopefully,you can just do this in a customizer no,code required super basic,option number two we're gonna go into,the code and change just,one little line of code super simple,let's jump,straight into the demo store right here,okay so welcome to our trusted demo,store let's see how it currently,looks um we click on catalog,here are all our oh,that's our collection page but there's,only,eight products shown and it's,distributed over,six pages the nightmare i'm never gonna,make any sales like this,but we're about to change that right now,the easiest way to change that is,actually go into online store,you click on customize this,is the no code solution and does not,work for every theme so it's very,possible that this will not work for you,for that we'll have option two,once you're in the customizer choose,your collection page,right here click on collection pages,and maybe if you're lucky you will have,the option here to show,more products per page you see here it's,telling me hey do you want,more products per row but it's also,telling me hey,do you want more rows so i can,definitely do that i can max this out,i can save it and then i should have,way more products on my collection page,let's go check it out if that worked,we go see our online store catalog,and indeed there is way more products,now,but is that the limit of 50 i feel i can,add even more product but maybe you want,to add even more products than your team,customizer allows you to,or alternatively your team customizer,doesn't allow,you to do what i just showed you not to,worry the green hoodie and,andrew is here for the rescue we're,gonna do some code,and it's not really code we're just,changing one thing in a line of code but,anyway,all right so we're going to go into,online store,themes and first and foremost and you,have to do this every time,even if it looks simple do this every,time,you go into the code we're going to,create a duplicate,of the existing theme that way we have a,backup in case we screw something,up it's not going to affect our live,version and we can still have a backup,we wait a bit and once that is done we,can go into the duplicate version,click actions and we can click edit,code welcome to the backend of your,shopify store so here we're going to go,to,templates and w
After seeing the sixth section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next seventh section about Collection Page & Product Sort
Show product variants as separate products on collection page
Show product variants as separate products on collection page
hello this is collins and on this video,i'll be showing you how you can,show your product variants as separate,products on the collections page so as,you can see on the collections page here,i have this product it has like a lot of,variant support only the single product,is showing so i want to be able to,display all of the available variants so,if i click through to the product page,you can see the other,variants green,orange blue,so on the on the collection spread i,want you to display all of this as,individual products if you go to this,website milodox website you can see they,use this very well to display all of,their variants on the collections page,so these are the same products but they,are all,different variants so they are able to,display it on the collection speech as a,product so do this is very easy and,quick so from your shopify,admin you know it's always recommended,to duplicate your theme and have a,duplicate of the main themes i've,already duplicated this down same here,so i'm going to install it on this,duplicate theme to test it out first,before i then add it to the main theme,so i need to go to the apps then go to,recommended apps like,app store,so when you get to the app store you,need to just search for collections,filter,there are a lot of apps that can do this,for you but this is the one i've used,and does it the job very well so that's,why i'm using it on this video there are,a lot of other tools that you can use,that's even a lesser price,they all do the same thing,we use these two it has a lot of other,features too it has a smart search smart,merchandising and filtering as well as,well as strain your variants as products,so there's a lot of other tools you can,use right i'm just using this for this,video we just need to add this app to,the store and also leave a comment for,me on this comment section down below if,you want me to make a video on how to do,this with code without an app,all right thank you so much,so i'm going to install the app,so this is the process of installing the,app on your store it's going to first of,all index all of the products in your,store as you can see it is trying to,index all of the products in your store,so you just follow this process it's,quite straightforward so you just need,to just click through it might take a,little longer to index your store this,will depend on the amount of products,you have if you have like a very large,inventory might take longer to index the,whole product,as you can see it is done yes i'm going,to click through,some processes i just need to explain,what they do so the first setup is just,to select the theme that you want to,install this one so if your stock is,currently live like you have a live,store like you have traffic on i won't,recommend adding this to the main theme,so you should select a duplicate theme,so this is a demo store i can choose,this dawn theme but if your your store,is live you need to go back to your,themes,and,online store,go to your theme
After seeing the seventh section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next eighth section about Collection Page & Product Sort
Must-know Tips to Build Shopify Collection Page for Retail Store in 2022
Must-know Tips to Build Shopify Collection Page for Retail Store in 2022
collection pages especially the,collection pages for retail stores is an,essential part to help your site stand,out among competitors and win your,customers it can effectively show what,you're selling and quickly convert a,visitor into a buyer even a loyal,shopper,so taking care of your collection page,is really helpful in getting more,traffic and also sales and conversions,that's why this video will come down to,unpack the best practices to win your,retail stores collection page on shopify,let's get started now,hello everyone it's phoebe from ecom,learning with pagefly channel and,welcome to our whole new series of,starting an online business niche in the,last video we discussed a very important,part of your online store landing pages,you can click here to discover if you,missed that,your collection page like any other is,important for google to perceive your,site as valuable and ranking it for,organic search terms,especially retail stores needed to be on,top of search results so that customers,can easily access as many products as,possible,with the right content and seo practices,your shopify collection page can bring,in organic traffic that converts into,sales,so what recipes makes a good collection,page for retail selling,above all the basics are always,important,let me walk you through the page layout,or format first then we can look at the,product details later on like how to,make the products attractive to all,visitors and anything more consider if,you want to use a grid view or a list,view first,because retail sellings means you're,offering a huge number of products,therefore choosing how to list out,products impressively is an issue that,needs to be noticed use a list view for,spec driven product verticals unless a,grid view can provide enough list item,information,and a great view for visually different,ones switching between the two as needed,in the list view there's more room to,include category specific product,attributes reducing the need for the,user to pogo stick between the product,list and product pages when trying to,determine which products are of,relevance and which aren't,list views on mobile devices allow more,room for specs which allows easier,scanning,by using a grid view you are able to,make the product thumbnails large enough,so that the customers are able to,accurately evaluate the product's,aesthetics directly from the product,list,leading to exceptionally few product,page detours secondly i suggest not,using pagination and endless scrolling,on both desktop and mobile sites,with calorie-based product lists you can,consider using load more in conjunction,with lazy loading and for search results,use load more,lot more proved to be the loading,strategy that worked best across desktop,and mobile devices for both,category-based product lists and search,results,a lot more option allows customers to,determine whether or not they need to,see more products as well as to display,all products on one page,making it easier to comp
After seeing the eighth section, I believe you have a general understanding of Collection Page & Product Sort
Continue the next ninth section about Collection Page & Product Sort
Hiding a Long Collection Description with Read More Button | Shopify Collection Page
Hiding a Long Collection Description with Read More Button | Shopify Collection Page
welcome back to Ecom ranks in this video,I will guide you how are you able to add,read more button to your collection,description or if you have any product,description that is too long,um it's annoying for the customers to,scroll down the whole page and then see,the products so the the main thing is,that we have to add this read more,button on a collection page or on the,Shopify product page okay so the first,step we have to do is uh we have to do,some code okay so let's get started,okay so here are here are Two Steps step,one and step two I have created a,detailed document so that you can just,and copy and paste it within your theme,code so first of all you have to copy,this,uh I have copied it and then you have to,uh Open the theme as code okay so for,this uh let me show you how you are able,to add to open your theme code,okay from here you have to click on,themes and then from here you have to,click on edit code once you click on,edit code uh the all the coding files,will get opened okay so the first step,you have to do is you have to open theme,dot liquid file and then you have to,scroll down and you have to paste this,code just above this body tag okay so,for now let me close this tab and let me,copy it I am copying it I have copied it,move back to my theme code that I have,opened before uh it's a theme dot liquid,file I have to scroll down and just,above the body tag I have to paste it I,have already pasted it okay so after,pasting it just above the body tag you,have to hit the save button so first,step uh got completed the second step is,you have to find this tag collection dot,description with this curly brackets,okay so you have to find this within,your theme code it's mainly uh contained,within the main collection dot liquid or,collection template dot liquid or,collection Banner dot liquid okay in my,case it's uh listed on collection Banner,dot liquid in your case might be it,would be in a collection template dot,liquid or main collection and Dot liquid,okay so in this section you have to find,this collection description it's listed,in uh line number 78 I have to delete it,and then I have to copy this thing,okay I have to copy it and then paste it,over here okay from here you are also,able to change the read more text,okay like I want I just want to add this,plus icon so when my customer clicks on,plus icon it would show further,description so right now I would like to,use read more button because it's a more,user friendly okay and from here you are,able to adjust the words how many words,do you want to show uh like if I hit,zero words I want to show and hit the,save button and then test our,button okay so let me reload this page,okay so there is no text,um correctors or characters visible,before this read more button when I,click on this read more button all the,collection down description will get,shown on your collection page okay so,let me go back and adjust it to some 10,characters just before read more button,and hit save once it
Congratulation! You bave finally finished reading Collection Page & Product Sort and believe you bave enougb understending Collection Page & Product Sort
Come on and read the rest of the article!
I am a shopify merchant, I am opening several shopify
stores. I use ppspy to find Shopify stores and track competitor stores. PPSPY really helped me a lot, I also
subscribe to PPSPY's service, I hope more people can like
PPSPY! — Ecomvy