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
  • How to create Collection template?
  • 1 - Click to Collection template > Add new collection template
  • 2 - You can start with blank layout or layouts available in our library
  • 3 - Config Layout
  • 3.1 - Section settings
  • 3.2 - Editing
  • 4 - Set default
  • 4.1 - Layout for all collections
  • 4.2 - Layout for each collection

Was this helpful?

  1. User guides
  2. LayoutHub pages/templates

Collection Template

PreviousRelated ProductNextBlog Templates

Last updated 4 years ago

Was this helpful?

How to create Collection template?

Follow instruction below:

1 - Click to Collection template > Add new collection template

2 - You can start with blank layout or layouts available in our library

  • When edit template you can see whole collection layouts and collection sections in our library

3 - Config Layout

3.1 - Section settings

3.1.1 - Background color

3.1.2 - Background gradient colors

Background overlay & gradient You can make background overlay by set only the first color with rgba color (alpha < 1)

3.1.3 - Background image

3.1.4 - Advanced

- Margin Padding

3.2 - Editing

3.2.1 - General

  • Select collection

  • Number of item to show

  • Show 2 items in mobile:

  • Show product title:

  • Product image size

Remember, you have to follow available syntax for displaying.

  • Promo label

  • Use rating

  • Banner content

3.2.2 - Sidebar component

  • Style sidebar

  • Collection

    • Component title and Select Menu

This Menu take from Shopify navigation

  • Color

    • Component title and Filter values

  • Item width

  • Size

    • Component title and Filter values

      Enter your tag here, Example: S,M,L,XL

When you click to S, M, L, 42, 34, 25,... it will filter product. You have to set tag for product first.

  • Item width

  • Brand

Remember set tag for product

  • Feature products

  • Banner sidebar

3.2.3 - Change text

Use for changing text in Title features: You can change size, color, style, background, etc...

4 - Set default

Collection template only active when you set template as template default for all collection or as template with assigned.

4.1 - Layout for all collections

4.2 - Layout for each collection

- Section ID ()

Learn more How to set color

Use for Connective Button
here
Gradient colors
Full title
Short title
Left sidebar
Right sidebar
Off - Canvas
Auto
50%
100%