Create Template For Single Page: Difference between revisions

From Posstack.com Documentations
mNo edit summary
Line 1: Line 1:
{{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/>
{{Note|This tutorial will guide you through 4-easy-steps to build your first custom template for Product, Blog Post, and Store Page 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.|inline}}
{{Note|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]].|reminder}}
{{Note|To customize Homepage or Collection pages, follow section [[Template for Standard Pages|Template for Standard pages]].|inline}}
{{Note|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]].|inline}}


===Getting Started===
===Getting Started ===
Watch this overview video to learn how to build a new template and assign it to an individual page using Easy Content Builder.
Watch this overview video to learn how to build a new template and assign it to an individual page using Easy Content Builder.


‎<youtube width="960" height="540">ze_UE0uVto4</youtube>
‎<youtube width="960" height="540">ze_UE0uVto4</youtube>
===Adding your first template ===
===Adding your first template===


===== Step 1: Select an item (Product/Blog Post/Page) =====
===== Step 1: Select an item (Product/Blog Post/Page)=====
In your Shopify admin, select your Product/Blog Post/Page (depending on which page you want to create a custom template)
In your Shopify admin, select your Product/Blog Post/Page (depending on which page you want to create a custom template)


===== Step 2: Create a template =====
=====Step 2: Create a template =====
On the Product/Blog Post/Page, click on '''More actions''' > '''Create a template'''  
On the Product/Blog Post/Page, click on '''More actions''' > '''Create a template'''  
::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: Choose a pre-made template =====
=====Step 3: Choose a pre-made template =====
Select a prebuilt template suggested by the app (then you will be automatically redirected to the Theme Editor). Easy Content Builder offers you three options to create a new template:   
Select a prebuilt template suggested by the app (then you will be automatically redirected to the Theme Editor). Easy Content Builder offers you three options to create a new template:   
:* Select a prebuilt product template provided by the Easy Content Builder app.
:* Select a prebuilt product template provided by the Easy Content Builder app.
:* Select from available templates of the main theme (if created before): This option is only visible if you did build templates using the Easy Content Builder app before. It allows you to speed up the workflow by reusing those templates. Please note this option is available when you upgrade to the Pro version.
:*Select from available templates of the main theme (if created before): This option is only visible if you did build templates using the Easy Content Builder app before. It allows you to speed up the workflow by reusing those templates. Please note this option is available when you upgrade to the Pro version.
:* Or create your own template from scratch.
:* Or create your own template from scratch.
::{{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]]  
:: {{Note| 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''' [https://easy-content-builder-demo.myshopify.com/pages/ecb-prebuilt-theme-sections here]. |reminder}}
:: {{Note| 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''' [https://easy-content-builder-demo.myshopify.com/pages/ecb-prebuilt-theme-sections here]. |reminder}}
:::: [[File:Ecb section kit.jpg|frameless|1024x1024px]]
::::[[File:Ecb section kit.jpg|frameless|1024x1024px]]


===== Step 4''':''' Start customizing the template =====
=====Step 4''':''' Start customizing the template=====
Start adding and editing the app sections and blocks through your Shopify theme editor as follows:  
Start adding and editing the app sections and blocks through your Shopify theme editor as follows:  


====== Define your section column layouts ======
======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.


Line 36: Line 37:
::{{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]]


====== Add new blocks to that section as you wish ======
======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]
::*Learn how to [[Add Blocks|add app blocks]].}}
::*Learn how to [[Add Blocks|add app blocks]].}}


====== Adjust the padding/margin of each section ======
======Adjust the padding/margin of each section======
::The Easy Content Builder lets you adjust the space (padding and margin) between elements at two levels:
::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.
::*Section Settings level: refers to the global padding configurations for a section.
Line 52: Line 53:
===Preview your custom template===
===Preview your custom template===
Steps to preview your products, blog posts or pages with the new custom template:  
Steps to preview your products, blog posts or pages with the new custom template:  
#From your Shopify admin, click '''Online Store''' > '''Themes'''.
# From your Shopify admin, click '''Online Store''' > '''Themes'''.
#Find the theme that you want to edit, and then click '''Customize'''.
#Find the theme that you want to edit, and then click '''Customize'''.
#Open the dropdown menu at the top of the page.
#Open the dropdown menu at the top of the page.
#Use the dropdown menu to select a template.
# Use the dropdown menu to select a template.
#In the sidebar, click '''Change'''.
#In the sidebar, click '''Change'''.
#Select the product or page you want to preview with the selected template.
#Select the product or page you want to preview with the selected template.
Line 66: Line 67:
::*[[Section Settings|1-col boxed layout]]
::*[[Section Settings|1-col boxed layout]]
::*[[Section Settings|1-col with Background Image]]
::*[[Section Settings|1-col with Background Image]]
::*[[Section Settings|2-col with Flexible Col Width]]
::*[[Section Settings|2-col with Flexible Col Width]]  
::*[[Section Settings|2-col with Blank Sections]]
::*[[Section Settings|2-col with Blank Sections]]  
::*Hierarchical Grids ([https://posstack.com/blog/easy-content-builder-new-hierarchical-grids 6 layout options])
::*Hierarchical Grids ([https://posstack.com/blog/easy-content-builder-new-hierarchical-grids 6 layout options])  
:::{{note|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''' [https://easy-content-builder-demo.myshopify.com/pages/ecb-prebuilt-theme-sections here].|info}}  
:::{{note|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''' [https://easy-content-builder-demo.myshopify.com/pages/ecb-prebuilt-theme-sections here].|info}}


*Learn how to customize your Shopify themes with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].
*Learn how to customize your Shopify themes with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].

Revision as of 04:06, 20 September 2023

This tutorial will guide you through 4-easy-steps to build your first custom template for Product, Blog Post, and Store Page 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.
To customize Homepage or Collection pages, follow section Template for Standard pages.
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 this overview video to learn how to build a new template and assign it to an individual page using Easy Content Builder.

Adding your first template

Step 1: Select an item (Product/Blog Post/Page)

In your Shopify admin, select your Product/Blog Post/Page (depending on which page you want to create a custom template)

Step 2: Create a template

On the Product/Blog Post/Page, click on More actions > Create a template

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.
Create product template.jpg
Step 3: Choose a pre-made template

Select a prebuilt template suggested by the app (then you will be automatically redirected to the Theme Editor). Easy Content Builder offers you three options to create a new template:

  • Select a prebuilt product template provided by the Easy Content Builder app.
  • Select from available templates of the main theme (if created before): This option is only visible if you did build templates using the Easy Content Builder app before. It allows you to speed up the workflow by reusing those templates. Please note this option is available when you upgrade to the Pro version.
  • Or create your own template from scratch.
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.
Ecb create 1st template.jpg
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.
Ecb section kit.jpg
Step 4: Start customizing the template

Start adding and editing the app sections and blocks through your Shopify theme editor as follows:

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.
Ecb section column config.jpg
Add new blocks to that section as you wish
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.)
Ecb sections padding margin.jpg

Preview your custom template

Steps to preview your products, blog posts or pages with the new custom template:  

  1. From your Shopify admin, click Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Open the dropdown menu at the top of the page.
  4. Use the dropdown menu to select a template.
  5. In the sidebar, click Change.
  6. Select the product or page you want to preview with the selected template.

Next steps

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.
  • Learn how to customize your Shopify themes with Custom CSS using Easy Content Builder: 5-min video tutorial.