How To create a Collection Template?

Author: An Do 447 views

There is a limit to what you can change with the default Collection Template of your theme. If you want to make more significant changes, or you want to be able to fully customize your collection templates, but you don’t know how to code, EComposer page builder is a great idea. The question is, how do you do this in the Ecomposer page builder app? We’ll show you how much customization EComposer gives you for your Collection pages.

There are two ways to build a Collection template. You can stick with the Default Collection Template or Create a new one.

1. Build a new default collection template (with EComposer) 

Note: Usually Shopify theme provides only one template for all collections in your store. EComposer default collection template will overwrite your current theme template and the changes you made on this template will apply to all your collection pages.

In order to edit the layout for the Default Collection Template, please follow these steps:

  1. From App dashboard -> Collection Template 

  2. Build collection page
EComposer Visual Page Builder Dashboard

1.1 Building content with EComposer Elements

Note: On collection templates, you should add Collection elements and Basic elements only.

There are many ways for you to start building a Collection template: Quickstart with Template Library or Drag & Drop Elements.

  • For the first option to build, please click on “Explore Library” to get more suggested sections from EComposer. After that, you can choose which one you love, so click on “Insert now” to use that for your Collection template.
  • Following the second option here, you can design the collection template with your own idea by choosing a structure first and then dragging any elements such as Title/Description/Banner/Tags/… from the left-slider bar to configure.

The Collection template has some elements below:

  • Title: This option allows you to show the Collection title.
  • Description: This shows the descriptions of the Collection.
  • Banner: This element allows you to display the collection image of the collection as a banner.
  • Filters: This allows customers to filter products in a collection with availability status and price.
  • Applied Filter: This allows you to show the options that your customers are clicking to buy.
  • Tags: Display all product tags of products in the collection.
  • Sorting: This allows customers to sort products in a collection by featured, best selling, price, name and date.
  • Products: This element display all products in the collection.

Each element is fully customizable. For example, you can change the font and size of the product title, adjust the size and alignment of the collection banner image, filter, etc. It allows for so much more customization than you can get with the Shopify default template. Discover more about the Collection elements here.

After you’ve finished designing, click the Publish button on the top-right corner, and your collection template will go live.

The Results After Adding The Element

1.2. How to restore the original Shopify Theme Template?

Changing your Default Collection Template might not always be the best idea. If you wish to roll back to the previous version of your theme. Please try to go to:
App dashboard > Template > Collection > Restore again

EComposer Visual Page Builder Dashboard

2. Create a Custom Template

Note: Otherwise, if you want to have different templates for each collection. You can create a new Collection template and assign it to the collections that you want.

2.1. Create a Custom Template

There are two ways to create a custom collection template.

The first way: Collection Pages -> Build Collection Page

The second way: From EComposer custom -> Navigate on top bar -> Create new template

  • After you’ve finished designing, click the “Publish” button on the right-hand side. If you haven’t wanted to publish, there are three choices for you:
    Save as draft: You should choose when your Collection Template is uncompleted, save and continue config other times.
    Save to library: You should choose when your Collection Template is completed, save and then use it next time.
    Export as file: You should choose when your Collection Template is completed, export it as a file then you can save it on hardware and send it to others
Presentation Save Options

2.2 Template Settings – Assign Template To Certain Collections

You might save time whilst also choosing a particular one of the structures that have already been designed on the template. You can also drag and drop Elements from the left sidebar to your template.

This template allows you to customize the Collection template to your liking. The Collection template contains the following elements:

You can connect together between Basic Element and Collection Page in the same Collection Template.

The general information setting board will be shown, then you can fill in the blanks such as:

  • Template name: put a name for this new collection template, as you can have multiple collection templates later.
  • Template Slug: while you text the template name, by the time the template slug is shown, it will be the same as what you’ve typed.
  • Apply for:
    • None (which means you apply for nowhere, just save it in your theme template)
    • Apply for all Collections (overwrite theme template)
    • Specific Collections (which means several collections that you select after will be applied for)
  • Page layout:
    • Shopify theme ( Include header & footer of your published theme)
    • EComposer canvas ( Without theme header & footer)

Besides, you also can add custom CSS, and JS for your template there.

2.3. How to Remove a Collection Template?

Regarding deleting the template permanently, there are two ways for you.

The first way: From EComposer dashboard -> Choose a template that you want to delete > Remove

The second way: Navigate on the Top bar -> Choose a template that you want to delete -> More action -> Delete

3. How to add flexible sections for the existing Collection template of the theme?

Note: Besides allowing to overwrite the default collection template for all collections, create a custom template for some collections. You also can add Ecomposer collection sections to your Shopify default template.

  1. From EComposer dashboard choose Extra builder -> Create section
  1. Design your section in EComposer App then click Save to save the section. Watch the video below to get more details.
  1. Then, please go back to the Shopify dashboard and click on Publish Theme -> Customize to add the section into the collection template from the theme. Drag & drop the section to the position you wish then click Save.
On this page