Template builder: Difference between revisions

From Posstack.com Documentation
(Created page with "<to be updated>")
 
mNo edit summary
Line 1: Line 1:
<to be updated>
{{DISPLAYTITLE:Template Builder}}
 
===Who is this guide for?===
 
Use the Template Builder to add prebuilt sections and create templates for any page you want.
 
The Template Builder helps you:
*Get to know the Easy Content Builder app quickly.
*Combine different prebuilt sections to try out new page layouts.
 
{{Note|Besides the Template Builder, you can also create a custom template using a prebuilt template by following this [[Create_Template_Apply_to_Multiple_Pages|step-by-step guide]].|reminder}}
 
===Template Basics===
 
If you're new to Easy Content Builder, we suggest checking out [[Create_Template_Apply_to_Multiple_Pages#Template_basics|this guide]] to learn about:
 
*What a template is in Shopify
*How to see which templates are applied to which pages?
 
===Create your first template===
'''Step overview:'''
 
*Select prebuilt sections from our library of 238+ (5 for Free plan, 12 for Pro plan). 
:{{Note|NOTE: You can add all PRO sections and edit in the Theme Editor, but you'll need to upgrade to see them on the front end.|inline}}
*After creating your template, add more sections through the Theme Editor as needed. 
*Assign the template to any page, product, or blog post and view it in your storefront.
 
'''Step 1''': Go to Apps > Easy Content Builder > '''Template Builder'''.
 
'''Step 2''': Click on '''Select a preset''', choose your prebuilt sections, and hit '''Add to template'''. The selected sections will appear in the left-side preview. 
:{{Note|NOTE:You can add up to 5 sections (Free plan) or 12 sections (Pro plan) from our 238+ library. You can add more sections later using the Theme Editor.|inline}}
 
'''Step 3''': Click '''Create''' menu
 
After adding your prebuilt sections, hit '''Create''' menu in the top left.
 
 
 
'''Step 4''': Fill in the template name.
 
*Specify the page type you want to assign to this template: Product, Page, or Blog post.
*Then enter a template name (3-15 characters, using letters, numbers, underscores, and hyphens).
 
 
 
'''Step 5''': Preview and edit the template
 
After clicking '''Submit''' in Step 4, your new template will be created, and you'll be redirected to the Theme Editor to edit and add more sections.
 
{{Note|IMPORTANT: At this stage, the new template isn’t assigned to any page yet, so you can only preview it in the Theme Editor. To see it on your storefront, assign it to your desired page following [[Create_Template_Apply_to_Multiple_Pages#How_to_assign_a_template_to_one_product|this guide]].|reminder}}
 
 
===Add & configure prebuilt sections===
Now that you’ve created your first template with prebuilt sections, you can add more from our library of over 238 sections or create your own custom sections. We suggest checking out the helpful guides below to enhance your template further:
 
[[Add_section_settings#Edit_Section_Settings|Global configurations]] using Section Settings that include:
 
Add multi-column layouts
Add the background image
Add the background video
Adjust the background color
Adjust the background container color
Adjust the text color
 
[[Add_section_settings#Extra_Customizations|Extra customizations]] that include:
How to set up a full-width section
Add Colorful Sections
Create an overlapping layout
Adjust space between columns and rows within a section
Adjust the top/bottom padding and margin between sections

Revision as of 05:12, 16 June 2025


Who is this guide for?

Use the Template Builder to add prebuilt sections and create templates for any page you want.

The Template Builder helps you:

  • Get to know the Easy Content Builder app quickly.
  • Combine different prebuilt sections to try out new page layouts.
Besides the Template Builder, you can also create a custom template using a prebuilt template by following this step-by-step guide.

Template Basics

If you're new to Easy Content Builder, we suggest checking out this guide to learn about:

  • What a template is in Shopify
  • How to see which templates are applied to which pages?

Create your first template

Step overview:

  • Select prebuilt sections from our library of 238+ (5 for Free plan, 12 for Pro plan).
NOTE: You can add all PRO sections and edit in the Theme Editor, but you'll need to upgrade to see them on the front end.
  • After creating your template, add more sections through the Theme Editor as needed.
  • Assign the template to any page, product, or blog post and view it in your storefront.

Step 1: Go to Apps > Easy Content Builder > Template Builder.

Step 2: Click on Select a preset, choose your prebuilt sections, and hit Add to template. The selected sections will appear in the left-side preview.

NOTE:You can add up to 5 sections (Free plan) or 12 sections (Pro plan) from our 238+ library. You can add more sections later using the Theme Editor.

Step 3: Click Create menu

After adding your prebuilt sections, hit Create menu in the top left.


Step 4: Fill in the template name.

  • Specify the page type you want to assign to this template: Product, Page, or Blog post.
  • Then enter a template name (3-15 characters, using letters, numbers, underscores, and hyphens).


Step 5: Preview and edit the template

After clicking Submit in Step 4, your new template will be created, and you'll be redirected to the Theme Editor to edit and add more sections.

IMPORTANT: At this stage, the new template isn’t assigned to any page yet, so you can only preview it in the Theme Editor. To see it on your storefront, assign it to your desired page following this guide.


Add & configure prebuilt sections

Now that you’ve created your first template with prebuilt sections, you can add more from our library of over 238 sections or create your own custom sections. We suggest checking out the helpful guides below to enhance your template further:

Global configurations using Section Settings that include:

Add multi-column layouts Add the background image Add the background video Adjust the background color Adjust the background container color Adjust the text color

Extra customizations that include: How to set up a full-width section Add Colorful Sections Create an overlapping layout Adjust space between columns and rows within a section Adjust the top/bottom padding and margin between sections