LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template má»›i - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • What is a Page Layout?
  • How to create/import a Page Layout from Layout Hub
  • How to configure a Page layout
  • How to publish your customized Layout
  • How to revert changes after clicked Publish button?

Was this helpful?

  1. User guides
  2. Layout Management

Create Layouts

The Templates that helps you speed up your design process by: Importing pre-made templates from the developer (or third-party), Saving your own designs as templates to reuse later

PreviousLayout ManagementNextDesign Blocks

Last updated 4 years ago

Was this helpful?

What is a Page Layout?

Page Layout is a template that includes pre-built elements such as sections, blocks, texts, images, sliders,... etc. They are combined to each other to construct a spectacular structure in various styles.

We offer 5 types of Page template. They are Standard, Product, Collection, Blog and Article pages.

Moreover, every Page Layout showcased will have high-quality free stock images as placeholders. Our design team has crafted each and every piece of an individual template to ensure it is unique and easily modified to adapt to your unique needs.

With LayoutHub, you don’t have to be a developer to create a page. With LayoutHub you don’t have to be designer either.

Amazing features included in a Page Layout:

  • Section element to combine several rows

  • Color Picker

  • Text Translation

  • Extended CSS box

  • Options to save section and row as templates

  • Remove at one click without loading process

How to create/import a Page Layout from Layout Hub

Step 1: From the menu on the left side, Select Standard Page > Click Add new page. I suppose I would like to design for my Homepage. (You can also design for the other pages such as Product page, Collection page, Blog page,... etc)

Step 2: Choose show or hide Header and Footer.

Step 3: Select Blank layout

Step 4: Click Add layout

Step 5: Select a layout from our library for your home page.

You can also add a design block to your page.

Click Import/Preview button to import design to your store.

Searching for your designs quickly by Search form or the Categories Menu on the left side.

Select any Layouts and click Install button. Then you start customizing the Layout as you desire

How to configure a Page layout

Now you get the Homepage Layout sample imported to your store.

Only the body of Homepage imported. The Header and Footer section are fixed and initial from your current theme.

LayoutHub offers all the controls you need to work with content elements – change, edit, duplicate, remove, preview or create presets for your elements whenever you wish with just single click.Configure your Shopify site layout like never before.

On this content of the Layout, you can changed everything by using the sidebar Editor. But It’s just a preview. You can customize this preview like customizing a Shopify Theme, they are very simple and user-friendly.

There are 2 tabs that you can switch over them to make changes: Sections + Settings

Layout Hub gives you 2 different tabs to edit individual sections/blocks. While the specific options that you’ll see in each tab depend on the exact section/block that you’re editing.

  • Section: include settings of each blocks: ex) Slide block, Collection block,...

  • Settings: Include settings of global, apply a color or gap at once time onto all the pages. All websites are different! Use Primary color to make a perfect match with your corporate and brand identity. You can change visual appearance literally in seconds and determine which color, font you want to affect – combine your design with your brand as a unique design.

*Adding Custom CSS

If you’re a casual user, you might not ever need to use custom CSS in your page builder designs. But for more advanced users, the ability to add custom CSS is a great way to get more control over your page layouts.

How to publish your customized Layout

Finally, after you had completed customizing your Layout, you can click Publish Page button.

Enter a Page Title, Page handle, Meta description for this customized Layout and press Publish now.

  • Page Title: Enter your page title. This title will display as a link in search engine results. You can enter up to 55 characters in the title.

  • Page handle or human url: Enter your url, the URL can't contain any spaces.

  • Meta description: Enter a description for the search engine listing. You can enter up to 320 characters in the description.

  • Publish page: When you choose YES on this mode, your page will be publishing, that mean everyone can see your page if they have the link. If NO here the Design is created and achieved in the App Dashboard, you can go there to re-use or edit the layout for the next time.

  • Make as Home page: Choose YES if you want to make default this page to replace your existing home page.

  • "Publish now" button: Click on this button to publish or Save your page.

Result: Please go to your store front- Landing page, it's replaced by the new layout

How to revert changes after clicked Publish button?

In the case you want to revert all the changes, back to your Original design

Go back to Layout Hub dashboard > Select exactly the Shopify Default template not the other customized layouts > Click Restore default template button.

If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the

link