Up next in 10
How To Create Shopify Product Page In Pagefly
8K views
May 9, 2024
Creating a Shopify product page in Pagefly allows you to design unique, highly customizable pages that enhance your customers' shopping experience. In this video, you'll learn how to use Pagefly, a popular page builder app for Shopify, to create an attractive and effective product page. The tutorial will cover key steps, including selecting a layout, adding and customizing elements like images, product descriptions, and call-to-action buttons, as well as integrating customer reviews and related products. You'll also discover best practices for optimizing your product pages for conversions and mobile responsiveness. This guide is perfect for Shopify store owners seeking a flexible solution to design stunning product pages with Pagefly.
View Video Transcript
0:00
How to create a Shopify product page in Pagefly
0:05
Hey guys, welcome back to the YouTube channel. Today I will be showing you how you can create your Shopify product page in Pagefly
0:15
So let's get into it. Now, a lot of you might ask, why should I create my product page in Pagefly instead of using the native Shopify product page
0:25
Well, there are quite a few different reasons why you might want to do that
0:29
First off is simply because Shopify stores can all look very similar
0:34
The product page layout is not very customizable. It is customizable to some extent
0:40
But to really elevate the appearance and really make it a very customized experience for your customers
0:47
you want to be able to create your product page in a different format
0:51
So if you want to elevate your page a little, using Page Fly can really help with that
0:56
Now, to get started with PageFly, page fly all you have to do is head on over to your Shopify store click on settings on the
1:05
bottom left once you click on settings click on apps and sales channels from here you're going to
1:12
click on Shopify app store and over here you just want to search for page fly now once you
1:18
search for page fly this is the first application i have already installed it i have a detailed
1:24
version on how to get started with page fly so do check that
1:28
out if you don't know the basics of setting up page fly and whatnot but then all you have to do
1:34
is install it and once you install it you have to create your account via your email it's a pretty
1:38
standardized process now once you've done that you will get into the page fly dashboard now on the free
1:45
version of page fly so if you go on to the free version of page fly you can only publish one page but if
1:52
you pay as you go starting at 24 a month you can create 10 pages which is usually
1:58
more than enough for most people but we're just going to be creating our product page
2:03
which is you can approach this in two ways you can create like a page for your product
2:09
collections or create you know a direct product page so i going to first delete our pre page and we going to create a new one so now once I have you know removed all the pages I pretty sure you guys are going to be on the same step
2:23
You're going to just be on your dashboard. You're going to click on pages from over here and just click on product pages
2:30
Once you click on product pages, now why do you need to click on product pages and not just pages is because you want to link your product over here
2:38
So then you're going to click on create from a template on the right side of your screen
2:44
Once you click on create from a template, this will show you all of the product page templates that you have
2:50
They have templates ranging from all different types of categories and niches
2:56
So they have this jewelry template, this protein powder template, this homemade product, this skin product
3:03
there's food items, pumpkin pie, skincare items. Now, you guys can see some of these, these are like product pages, but if you want to know one of those pages where it lists all of your products, you're going to go into collections pages
3:18
Because those are the ones that display all of your entire collections, but we're going to be focusing on one product page
3:25
Now, on my e-commerce store, I just have this product over here. So I'm going to be looking for a template that is suitable for this kind of LED projector light bulb
3:33
and I'm just going to go into the product pages over here
3:38
So there are quite a few like so. I think this one looks pretty nice
3:43
but I'm just going to, you know, browse all of them a little. I think I am going to go with this one
3:51
This one looks pretty nice. And I'm just going to maybe this one
3:56
Yeah, I think I'm going to go with this one. So I'm going to click on preview. And once you click on preview
4:01
you're just going to click on select this. template now once you select the template it will show you guys the template now
4:08
over here this is like a drag-and-drop kind of editor you have your source
4:14
items when you have to add items you're gonna add them from the left side you
4:17
can add elements and then to customize that content you're gonna click on the
4:21
right side so you guys can see this is product details and you have to select a
4:25
product for your to display on your product page so from here we going to click on add element and you can click on add Shopify element and then you want to go on ahead and add your specific element Now you can just search for it and you can you know add and drag and drop that product detail
4:45
But once you've dragged and drop this specific like cluster, you're going to click on it and you can click on select product from the right side of your screen
4:53
It's going to be a custom product and I'm just going to click on select product. I only have one
4:58
I'm just going to add that. and this will now be added. You can add variants as well
5:02
I don't have any variants. And I'm just going to take this section and you can, you know, delete it as well
5:08
because there's no comparable price that I've added. But after that, I have, you know, wireless headphones
5:14
I'm going to change this text. And I'm going to add nightlife projector
5:19
Now, after that, you can choose certain elements that should not be visible on, you know
5:23
maybe phone. So maybe you don't want variant options available directly on mobile versions
5:28
because it can confuse your customers or not fit in the mobile devices, but I like to keep it as it is
5:34
Now I want to change the background theme color simply because it doesn't match with my styling
5:40
So for that, you can just click on styling on the top right. Once you click on styling, you have overall content
5:46
So you have like the color options and you can select whatever color you want
5:52
I'm going to go with like a deeper purple. Then you have spacing and typography
5:57
You can edit the text of the entire section via this styling method
6:03
And I'm not going to change the text. I'm just going to be changing the background
6:07
There is this background image and I'm going to clear it out. And then I can click on select image
6:13
And I can add my own image. I can upload it from my computer. But instead, I'm just going to give it like a deep purple background like this
6:22
And then once I have added that, I'm going to go ahead and
6:26
take a look at our display settings everything is fine opacity is fine but i think i'm going to go ahead
6:34
in my typography and then i'm going to scroll down i have more settings
6:39
and i have these accent colors for the text which i want to change
6:43
so i can click on global styling over here and i have my font family so in my font family i can just click on colors and i can customize the colors however i want i going to open this up and make it like a nice little maybe i want them all to be white
7:01
so i can just apply white like this click on publish and i will just publish that and it will
7:07
apply it to the relevant items now just below that i have my second section and now i can delete
7:12
you know the elements from here i'm going to delete the entire section but now i can add my product
7:18
feature so you can just click and edit that is very simple and intuitive if you want to add
7:23
anything else about your product you can just click on add element on the left side of your screen
7:29
and just drag and drop the specific item let's say you have a tic-tok or instagram video that
7:34
displays your usability of your item so what you want to do to insert that is click on add element
7:41
and then you can click on instagram feed facebook like and share facebook feed whatever you might want to
7:47
add or you can just add your HTML liquid and copy the HTML link of the video or TikTok and
7:54
paste it over here. Once you've completed your setting you know the styling of your product page
7:59
you're going to click on save on the top right and you're going to name it and you're going to save this
8:04
page. Once you've saved it you're going to go back into page fly so once it has been saved just go
8:11
into page fly now I'm going to go into page fly and I'm going to go into my pages
8:17
And I'm just going to click on these three dots on the right side. Click on publish
8:22
And just like that, our page has been published. And this is what our page is currently looking like
8:29
So it's a nice and good product page. You can obviously customize the content further and add your own links as well
8:36
So I hope you guys found this video helpful. But before you end this video, make sure you add the relevant page into your product menu
8:44
So you want to go into your online stores. click on navigation and in your main navigation panel you want to click on main menu add menu item
8:53
and copy and paste a product link into that so it shows up in your actual menu otherwise your
8:59
page won't be in the menu section of your Shopify store so make sure to leave a like and
9:05
subscribe to our YouTube channel and I will catch you guys in the next video
#Green & Eco-Friendly Shopping
#Luxury Goods
#Toys