Shopify Page Builder Tutorial | Full Beginners Guide 2026
Skills:
UI Design90%
Key Takeaways
Builds custom Shopify pages using the native theme editor and drag-and-drop section blocks
Full Transcript
How to use Shopify page builder. Hey everyone and welcome back to my YouTube channel. In this video I'll discuss the Shopify page builder, how to create a page, and also how to use it accordingly, how to make it unique and not just a general page. So, to get started to create a page you simply just want to log into your Shopify admin, go to online store, and click on pages. This is going to be where you find all the different pages that you have, and also you can feel free to add a new page. Now, in here you can just feel free to give it a title. So, you can just do test page, which I'm just going to do in this case. And you can feel free to add unique content to this page by just adding it in here. So, whatever you type in here is going to be added into it. As well as you can add some media like images if you want to. You can just go ahead and do that, click on done, and you can just continue typing afterwards. It's up to you. But I'm just going to delete this and just leave it as a default page. Now, notice on the right side it's going to say default page template, and I'm just going to talk about that in a little bit and click on save. So, make it visible and click on save. So, now to actually adjust the page builder, which to get to you simply just want to click on online store and click on edit theme. This is going to be the builder for us and we can really just go to any page, whether it's going to be a product page, home page, a default page, whatever it may be. So, if we click on the top here, right at the top it should say home page, and this is going to basically be the navigation bar for you as an editor. So, you can just click on pages, and this is just going to show you the different templates available. So, default page and contact page. Now, even with products, if you click here on the top and go to products, you're just going to be able to find the default product page. So, what this means is if you adjust any default page, for example, this one, if you adjust anything in here, it's going to apply to every single page that you have. So, how do we actually create a unique page? In order to do so, you are just going to basically use templates. So, to create templates, you can just go to the product section, for example, if you want to create a unique product page, click on create template, and just give it a name. But, I'm not really going to create a product page in this video. I'm just going to go for a default page. So, just go back, pages, and click on create template. I'm just going to give it the name test template. And I'm just going to make it based off of the default product page and click on create template. So, now whatever changes that we do in here is only going to be applied to this template and not every other page as well. Okay? So, now let's just discuss what we can do with the builder itself. So, first we're just going to find the header section, which is obviously just going to contain the the logo that we have, the different menus that we adjust, and so on. And as you can see, you can just click on any section here, it's just going to give you the options for it on the left panel. Now, if you can't really click on on any section like so, in that case, you have the inspector off on the top right [snorts] corner, so just make sure that it is toggled on, and now you can just click on anything. So, let's just go in and focus on the template or the body of the page. So, we can fully hide this if you want to, or just the page and the contents in it, and we can start by adding some sections. So, I'm just going to click on add section, and I'm just going to go for a hero banner with a button, a very simple uh image here with um to be at the top basically. So, you can choose whether it's going to be an image or a video and you can simply select an image from here. So, to make it very simple for you to understand the builder and how it works, every single section is going to have its own set of settings. So, for example, the hero section, if you click on it by itself, so on the left panel here, if you click on it, you're going to find a lot of settings. For example, the media, whether you want it to be different for mobile or not, uh the section link, if you want it to be clickable and has a specific link, layout options, the height. I'm actually going to go ahead and make it smaller. So, I'm just going to turn it to medium. Also, like appearance-wise, the color scheme and so on. So, this is the uh main part, but then you also have the text and buttons on top of it and it should be nested right down uh below the actual section. So, we have text one which says new arrivals. You can feel free to readjust this to say whatever you want. And you can just play around with how it looks like and same goes for the other text and the button. You can feel free to start adding your own touches to it basically. So, you can just go ahead and start by adding another section here. For example, you can add a column section, so it has three different parts right next to each other or you can you know, you can browse and see whichever one that you actually like. There's a lot to go for. For example, image with text to highlight a specific product. You can just go for this. Just apply it and again, click on it to get the full settings and you're just going to be able to adjust every single thing about it. For example, if you change the scheme, the entire thing is going to change as you can see and you're just going to find all the different settings. And again, to adjust the the things within, they're going to be nested underneath the main section. So, image with text, right below, we should be able to find the image, click on it and select. I'm just going to use this one. Click on done. And you can again just feel free to customize how it looks like, the aspect ratio, and so on. I'm not really going to discuss every single thing in these settings because each section is going to be different. But now you know exactly how it works the builder, and we are just going to be able to add as many sections as we like. We can hide or delete anything that we don't like. We can just click on any single item and adjust it. It's very very simple. So now because we have created a specific template, it's not going to be applied to any page just yet. It's just going to be a template that we have created, and it's just going to be empty. So in order to apply this to a specific page, what we want to do is just exit and go back to our Shopify store, go to pages. In case you created a product page template, you just want to go to products and do the same steps. But for pages, just go to pages, select the page that you want to apply the template to, go to templates, and select it. So, test template, and click on save. And now finally, if you actually view the page, it's just going to have all the different changes that we added to it, and it's going to be completely unique. Nothing else is going to change other than this specific page. So yeah, hopefully this was a clear video for you to understand the page builder for Shopify. It is very very straightforward. There is not much to it that is hidden. I also forgot to mention that it does actually have the theme settings option. So if you just go back to edit theme to the builder, so we know now we have the header sections, which works the same way. The footer also works the same way, but we also have the theme settings here on the top, where you can just play around with the colors. So if you're, you know, wondering how to change schemes, you can just do it from the colors, logo, typography. For example, the fonts that you want for body, heading, accent, everything is going to be in here as well. So, there's nothing that is confusing. It's very straightforward. Just click on anything that you want and adjust it. So, with that being said, hopefully you found this video to be informative and helpful. And for more information, subscribe to me YouTube channel and thank you for watching.
Original Description
Shopify Page Builder Tutorial | Build Custom Pages in Shopify
✅ Get 3-Day FREE Shopify Trial + the next 3 months for just $1/month HERE ➜ https://bit.ly/3ILR5l3
🔥 My Best Tools & Exclusive Deals HERE ➜ https://tutorialstack.io/tools
In this Shopify page builder tutorial, you'll learn how to design custom pages using the native theme editor and drag-and-drop section blocks. This guide covers Shopify section setup, page template assignment, custom layout building with image, text, and product blocks, and using popular page builder apps like PageFly and Shogun. You'll also see how to create landing pages for ad campaigns, build a custom homepage, and reuse saved sections across multiple pages. Follow this Shopify custom page walkthrough to design high-converting landing pages, build a flexible page layout system, and stop relying on generic theme templates.
👉 Watch next: How to Add Custom Liquid Section in Shopify ➜ https://www.youtube.com/watch?v=V43s0L7wNL0
Disclaimer: Some of the links in this description could be affiliate links, which means I may earn a small commission if you purchase through them. This comes at no extra cost to you and helps support the channel. Thank you for your support!
#Shopify #ShopifyPageBuilder #Ecommerce
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
More on: UI Design
View skill →Related Reads
📰
📰
📰
📰
The human in the loop isn’t a fallback. It’s the design.
Medium · UX Design
Why Every Designer Is About to Get an AI Teammate, Not an AI Replacement
Medium · UX Design
Less friction for parents, less admin for schools
Medium · UX Design
Why Does Good UX Often Go Unnoticed?
Medium · UX Design
🎓
Tutor Explanation
DeepCamp AI