Up next in 10
How To Create Different Layouts For Product Pages On Shopify
1K views
May 7, 2024
In "How to Create Different Layouts for Product Pages on Shopify," learn how to customize your Shopify store's product pages to stand out and meet your brand's unique needs. This video offers step-by-step instructions for creating diverse product page layouts, from simple variations to more complex, feature-rich designs. Discover how to use Shopify's theme editor, sections, and liquid code to personalize product pages with custom banners, product descriptions, images, and more. Perfect for Shopify store owners and e-commerce designers aiming to enhance user experience, improve product presentation, and increase sales.
View Video Transcript
0:00
How to create different layouts for product pages on Shopify. Hey guys, welcome back to the
0:06
YouTube channel. Today we'll be taking a look at how you can create multiple different layouts
0:13
for your Shopify product pages. So just as an example, let's explain what I mean. Now taking
0:20
a look at this store over here, it's created using Shopify and this is what their new arrivals page
0:27
looks like. They have you know whatever is their new invention or whatever is the new item, it's a
0:33
large header, then I can scroll down and browse all of their new arrivals. Now not only do they
0:40
have new arrivals, they might have even added you know all of their items over here. Now after that
0:45
if I go into the women's section and search for tree breezes, now this is not you know a similar
0:52
section. So this is a different kind of setup on the page. Now if I search for everyday sneakers
0:58
you guys can see this page is like a direct page, it doesn't have that kind of header
1:03
So depending on the kind of page that you are trying to market to, you will want to have you
1:10
know a different product layout. In the socks section, maybe you're not having a lot of
1:15
things to say about socks, so you don't want a you know super detailed header and all that
1:20
And for maybe other sections or other categories of product, you might have more details. So I will
1:27
be showing you guys how you can create this kind of product page, which is kind of like the default
1:33
and how you can create something more like their new arrivals section, where they are you know
1:38
focusing on a header and more of a like a warm image on their Shopify product page. So let's get
1:45
into it. Now if I go on to Shopify over here, you don't have to add any kind of application for this
1:52
and you're going to just add a couple of different products. I'm just adding a few products
1:56
just so my examples are a little more clear and I've just added a simple product over here
2:04
like so. So I have these two basic products just as an example. Now if I click on online store over
2:10
here, this will go to themes, then you can click on customize and now you will be able to go on to
2:17
your home page and then click on products. Now you can click on create template over here and you can
2:24
name your new page or your new content and this can be based on specific product, so you can create
2:31
pages for specific product or a specific you know item. Now this is one way to go about it, so you
2:38
can add this, then you can exit it, then if you go on to your pages, you will be able to go on to our
2:46
website. We have our catalog section but you know that new page won't be created but to add a new
2:53
page, you can simply click on add page over here like so, click on save and once you go ahead and
3:01
click a new page, create a new page, you can choose the template of that as well but we're going to
3:07
leave it at default. Now we're going to go back into our store, click on customize. Now what you want
3:13
to do is you want to go into your product pages or collection pages, that is totally up to you
3:18
Let's say I want to customize my collection first, so I have my default collection and this is my
3:25
home page for that. Now the default collection is only going to display my blouse because that's
3:30
what I've added as my default item, so what I'm going to do is I'm going to click on my header
3:36
or below my header where it has my announcement, so collection banner and I will change that into
3:45
show collection image and you can add your own image for that as well. You have your theme
3:51
settings, you can add a description as well and you can choose to hide any banner if you want to
3:56
direct product, if you don't want to you know add anything of that sort and after your collection
4:02
banner you have your product grid. Now on your product grid you can enable certain products that
4:07
you want to add but before I do that to customize the look even more, let's say I go ahead and I'm
4:15
going to hide my banner and I'm going to click on add section and I can click on image banner
4:21
Now I'm going to move this image banner up so this shows up above like my product and I can
4:27
just click on this, click on select image and I can upload my own file, so I'm just going to take a
4:34
image off of here, I'm just taking this as a sample image and I can just upload it over here, click on
4:42
done and select the image as well. Now I'm going to click on done, now once I've added my new banner
4:49
I can edit the text overlay, so you have the overlay opacity and you have you know like your
4:56
first image or second image. Now uh you guys can see uh you have your mobile layout custom CSS, if
5:02
you go out of your image banner you have the this section over here which describes what it should
5:07
have. I don't want any buttons so I can just click on this, click on remove block and I can remove that
5:15
then I'm going to rename this and I have like my little header then I can click on give custom you
5:21
know this description section and now I've added you know this amazing little section over here for
5:29
my page. Now once I've completed my editing I will click on save just so my progress is saved as I go
5:37
Now this is just one little page over here, this is my default collection page. I can go into
5:43
collections, click on create template, I can name the template and base it on any collection I want
5:49
Obviously I haven't added any but to add more collections uh you just go ahead exit and you can
5:56
go into your product page on Shopify and you can click on any of your products and you can see on
6:02
the right side of your screen you have your collections so you can create a new one and you
6:08
can choose what kind of items should be added. I will manually add products and the products one by
6:13
one and we are just going to click on save over here and now I will just search for my products
6:20
the ones that I want to add over here and I'm just going to add my winter sweater because that's like
6:26
a sale item and now I have this collection page created. Now once I have this created I can go
6:32
back into my online store and I can click on customize, I can go into my collections page
6:40
click on create template and name it sale page and I can link it to my specific collection
6:48
and then I can create you know a new page for that new backgrounds and new layouts. Now this is one
6:55
easy way to do it if you want to do this with product so if I go into my product page and I
7:00
want it to be added to new arrivals and you want to change the layout of this I recommend using
7:07
meta fields. I do explain meta fields a lot more in my how to add your size chart on your product
7:13
page video so do check that out as well but you can easily just go into your product page, click
7:20
on add section just below the product, click on text or you can add a collapsible row. Once you
7:27
add your collapsible row you can just click on the row and you can click on over here to insert
7:33
dynamic content and you can add any kind of meta fields and to add meta fields just go into your
7:38
Shopify dashboard, click on setting on the bottom left, scroll down and click on custom data and
7:45
then you can click on wherever you want to insert meta fields and those meta fields will be added
7:51
and you can import the resource data into your pages. So I hope you guys found this video helpful
7:57
and you are now able to get started with building your own customized layouts for your Shopify store
8:03
make sure to leave a like and subscribe to our YouTube channel and I will catch you guys in the next video
#Consumer Resources
#Custom & Personalized Items
#E-Commerce Services
#Gifts & Special Event Items
#Skins
# Themes & Wallpapers