Create Template For Single Page: Difference between revisions
From Posstack.com Documentation
mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
This tutorial will guide you through 4-easy-steps to build your first custom template and assign it to a single page using the Easy Content Builder app. | {{Note|This tutorial will guide you through 4-easy-steps to build your first custom template and assign it to a single page using the Easy Content Builder app. <br/><br/> | ||
Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme.|inline}} | |||
Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme. | |||
Templates can be assigned to a product/blog post/page or a product/blog/page group. Learn how to assign a template to multiple pages at once [[Create Template For Multiple Pages|here]]. | Templates can be assigned to a product/blog post/page or a product/blog/page group. Learn how to assign a template to multiple pages at once [[Create Template For Multiple Pages|here]]. | ||
Line 15: | Line 13: | ||
::Depending on your specific page type, click on the action label ''Create Template for this product'', ''Create Template for this page'', or ''Create Template for this article''. | ::Depending on your specific page type, click on the action label ''Create Template for this product'', ''Create Template for this page'', or ''Create Template for this article''. | ||
::[[File:Create product template.jpg|1000x1000px|border]] | ::[[File:Create product template.jpg|1000x1000px|border]] | ||
'''Step 3''': Select a pre-built template suggested by the app (then you will be automatically redirected to the Theme Editor) | '''Step 3''': Select a pre-built template suggested by the app (then you will be automatically redirected to the Theme Editor) | ||
::{{Note|'''<u>TIP</u>''': Create [[Clean Template|a clean template]] first to avoid a known issue - "Must have a maximum of 25 sections" and hide default sections of default template when creating page from prebuilt template.|info}} | ::{{Note|'''<u>TIP</u>''': Create [[Clean Template|a clean template]] first to avoid a known issue - "Must have a maximum of 25 sections" and hide default sections of default template when creating page from prebuilt template.|info}} | ||
::::[[File:Ecb create 1st template.jpg|1200x1200px]] | ::::[[File:Ecb create 1st template.jpg|1200x1200px]] | ||
Line 22: | Line 20: | ||
'''Step 4''': Start adding and editing the app blocks as follows: | '''Step 4''': Start adding and editing the app blocks as follows: | ||
::'''4.1.''' Define your section column layouts: | ::'''4.1.''' Define your section column layouts: | ||
::With Easy Content Builder, you define the layout on an individual section level. This is done by adding/editing the Sections Setting block. Learn how to [[Section Settings|add a Sections Setting]] block. | :: With Easy Content Builder, you define the layout on an individual section level. This is done by adding/editing the Sections Setting block. Learn how to [[Section Settings|add a Sections Setting]] block. | ||
::You can add many sections per page, each section with its column layout. | ::You can add many sections per page, each section with its column layout. | ||
::{{Note|'''<u>Useful link</u>''': | ::{{Note|'''<u>Useful link</u>''': | ||
::* See [https://easy-content-builder-demo.myshopify.com/pages/section-variations multi-column layouts examples] | ::* See [https://easy-content-builder-demo.myshopify.com/pages/section-variations multi-column layouts examples] | ||
::* Learn how to [[Section Settings|create multi-column layouts]]}} | ::* Learn how to [[Section Settings|create multi-column layouts]]}} | ||
::[[File:Ecb section column config.jpg|frameless|1024x1024px]] | ::[[File:Ecb section column config.jpg|frameless|1024x1024px]] | ||
::'''4.2.''' Add new blocks to that section as you wish. | :: '''4.2.''' Add new blocks to that section as you wish. | ||
::{{Note| | ::{{Note| | ||
::*See [https://easy-content-builder-demo.myshopify.com/pages/multi-column-layouts pre-built sections examples] | ::*See [https://easy-content-builder-demo.myshopify.com/pages/multi-column-layouts pre-built sections examples] |
Revision as of 13:19, 19 September 2023
This tutorial will guide you through 4-easy-steps to build your first custom template and assign it to a single page using the Easy Content Builder app.
Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme.
Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme.
Templates can be assigned to a product/blog post/page or a product/blog/page group. Learn how to assign a template to multiple pages at once here.
Getting Started
Watch the Getting Started with Easy Content Builder:
Adding your first template
Step 1: In your Shopify admin, select your Product/Blog Post/Page (depending on which page you want to create a custom template)
Step 2: On the Product/Blog Post/Page, click on More actions > Create a template
Step 3: Select a pre-built template suggested by the app (then you will be automatically redirected to the Theme Editor)
- TIP: Create a clean template first to avoid a known issue - "Must have a maximum of 25 sections" and hide default sections of default template when creating page from prebuilt template.
- We suggest you install the Theme Section Kit to customize your Shopify theme faster. This template contains prebuilt sections (Free and Pro versions) that you can edit, reorder, or hide through your Theme Editor. Preview the Theme Section Kit here.
Step 4: Start adding and editing the app blocks as follows:
- 4.1. Define your section column layouts:
- With Easy Content Builder, you define the layout on an individual section level. This is done by adding/editing the Sections Setting block. Learn how to add a Sections Setting block.
- You can add many sections per page, each section with its column layout.
- Useful link:
- See multi-column layouts examples
- Learn how to create multi-column layouts
- 4.2. Add new blocks to that section as you wish.
- See pre-built sections examples
- Learn how to add app blocks.
- 4.3. Adjust the padding/margin of each section.
- The Easy Content Builder lets you adjust the space (padding and margin) between elements at two levels:
- Section Settings level: refers to the global padding configurations for a section.
- Block level: refers to the padding/margin of a specific block within a section (One section might come with multiple blocks in it.)