shopify app
Builder for Shopify includes templates for product pages, blog articles, collections and more. All customizable to your needs and designed to help you build faster while driving more conversions. In addition to the included templates, our shopify app provides the ability for users to create their own custom pages.
In this guide, we'll show you how to create a custom landing page in less than 5 minutes, sharing our best practices and some useful tips. Let's dive in!
On the left side bar, you'll see a set of available theme pages, and if you scroll to the bottom you can select "New Custom Page." Give your page a name, then select the Blank template.
👉Note: Custom landing pages are not tied to a particular theme (staging, default, etc) meaning when you publish the page, it will be live on your site.
From here, it'll take us directly into the Builder Visual Editor where we can start building our page.
You'll see your header and footer carries over to all your new pages, so you don't have to worry about re-creating it for each individual page.
Start by adding a hero image to the page. Drag and drop the image component onto the page. Feel free to adjust the adjust the aspect ratio by using the blue outline around the component if you want the image to be smaller or larger. On top of the image, drag a column component. On each side, we're going to add button, which will serve as call-to-actions, such as "Shop Men, Shop Women."
The beauty of using Builder components is that they are responsive by default. As you move to smaller screens, the columns stack vertically and look great on every device. To learn more about Responsive Design, check out our video!
Using the alignment tools at the top of the style tab, you can reposition the buttons and utilize the rest of the styling features to adjust the look and feel.
Now let's drag a column component below our image. Then add a product box component into the left column, deleting the placeholder image and text. This element is dynamically tied to Shopify data, so as you add products to your Shopify store, they'll be available in Builder as well. Select the product you want to display and then in the right column, use the text box to add a description of the product.
Let's make some styling adjustments. Using the alignment tools, center align the text. Next, adjust the product image to be smaller, which can be achieved easily with columns by dragging the middle divider to the desired size. This is a another great trick for responsive design.
Now that we have a product box that looks exactly how we want, the first thing to do is check that the design looks great on all device sizes. You should always check the device previews throughout the page building process to avoid any unexpected final results in other views.
It looks like our hero image is a little small for mobile devices. Let's add a min height of 200px to make it a bit larger for mobile. Any edits made to mobile preview, will only impact mobile devices or smaller.
Clicking the dropdown arrow of this element, you can save it as a template and make it reusable. Templates save you time by having to create less components and it keeps your style consistent from page to page.
On the left side bar, under My Templates, grab your saved templates and drag the newly created product box template onto the page, change out the image to a different product, match the description, and done!
You can schedule this to go live or even target to specific audiences.
And that's it! That's how simple it is to create a custom page in Builder.
