Get Started: Difference between revisions

From Posstack.com Documentation
mNo edit summary
mNo edit summary
Line 11: Line 11:


=== Adding your first template ===
=== 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'''
Select the option that best fits your goal:  
::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]]
'''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}}
:::: [[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}}
:::: [[File:Ecb section kit.jpg|frameless|1024x1024px]]
'''Step 4''': Start adding and editing the app blocks as follows:  


::'''4.1.''' Define your section column layouts:
:==== Template for Single page ====
::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.
:Create a new template - assigned to a single page: [[Create Template For Single Page|Read setup guide]].


::You can add many sections per page, each section with its column layout.
:==== Template for Multiple pages ====
::{{Note|'''<u>Useful link</u>''':
:Create a new template - assigned to multiple pages at once: [[Create Template For Multiple Pages|Read setup guide]].
::* See [https://easy-content-builder-demo.myshopify.com/pages/section-variations multi-column layouts examples]
::* Learn how to [[Section Settings|create multi-column layouts]]}}
::[[File:Ecb section column config.jpg|frameless|1024x1024px]]
::'''4.2.''' Add new blocks to that section as you wish.
::{{Note|
::*See [https://easy-content-builder-demo.myshopify.com/pages/multi-column-layouts pre-built sections examples]
::*Learn how to [[Add Blocks|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.)
::[[File:Ecb sections padding margin.jpg|frameless|1917x1917px]]


=== Preview your custom template ===
:==== Template for Standard pages ====
:Customize your standard pages (Homepage, Collection, etc.): [[Template for Standard Pages|Read setup guide]].
 
===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.


=== Next steps ===
===Next steps===  


* Manage your templates: [[Manage Templates|follow these steps]].
*Manage your templates: [[Manage Templates|follow these steps]].
* Edit your template: [[Edit Template|follow these steps]].
*Edit your template: [[Edit Template|follow these steps]].
* Learn how to set up multi-column layouts:
*Learn how to set up multi-column layouts:
::*[[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].


=== Jump in a little deeper ===
===Jump in a little deeper===
If you would rather want to learn more about the fundamentals of the Easy Content Builder app:
If you would rather want to learn more about the fundamentals of the Easy Content Builder app:


* Read to understand [[Clean Template]] and [[Prebuilt Templates|Pre-built ECB Templates]].
*Read to understand [[Clean Template]] and [[Prebuilt Templates|Pre-built ECB Templates]].
* Learn how to create and [[Create Product Templates|assign a template for a group of products]], [[Create Blog Post Templates|blog posts]], or [[Create Page Templates|pages]].  
*Learn how to create and [[Create Product Templates|assign a template for a group of products]], [[Create Blog Post Templates|blog posts]], or [[Create Page Templates|pages]].


=== Use cases ===
===Use cases===
Browse the pre-built template collections - [https://easy-content-builder-demo.myshopify.com/pages/shopify-product-page-templates Product pages], [https://easy-content-builder-demo.myshopify.com/pages/shopify-landing-page-templates Landing pages], [https://easy-content-builder-demo.myshopify.com/pages/about-us-our-story-v3 Brand pages], etc. - for inspiration.
Browse the pre-built template collections - [https://easy-content-builder-demo.myshopify.com/pages/shopify-product-page-templates Product pages], [https://easy-content-builder-demo.myshopify.com/pages/shopify-landing-page-templates Landing pages], [https://easy-content-builder-demo.myshopify.com/pages/about-us-our-story-v3 Brand pages], etc. - for inspiration.


:* Grid & Layouts:  
:* Grid & Layouts:
::* Multi-column layout examples: [https://easy-content-builder-demo.myshopify.com/pages/multi-column-layouts view demo]
::*Multi-column layout examples: [https://easy-content-builder-demo.myshopify.com/pages/multi-column-layouts view demo]
::* Hierarchical Grid examples: [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid view demo]
::*Hierarchical Grid examples: [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid view demo]
::* Collection Grid & Layout examples: [https://easy-content-builder-demo.myshopify.com/pages/collection-grid view demo]
::*Collection Grid & Layout examples: [https://easy-content-builder-demo.myshopify.com/pages/collection-grid view demo]
::{{Note| How to create multi-column layouts: [[Section Settings|view details]]}}
::{{Note| How to create multi-column layouts: [[Section Settings|view details]]}}  
:* Payment Icons - Trust Badges: [https://easy-content-builder-demo.myshopify.com/products/shopify-bundles view demo]
:*Payment Icons - Trust Badges: [https://easy-content-builder-demo.myshopify.com/products/shopify-bundles view demo]
:* Promotion - Flash Sales: [https://easy-content-builder-demo.myshopify.com/products/promo-flash-sale view demo]
:* Promotion - Flash Sales: [https://easy-content-builder-demo.myshopify.com/products/promo-flash-sale view demo]
:* Hero banners:  
:*Hero banners:
::* Hero Banners examples: [https://easy-content-builder-demo.myshopify.com/pages/ecb-hero-banners view demo]
::* Hero Banners examples: [https://easy-content-builder-demo.myshopify.com/pages/ecb-hero-banners view demo]
::{{Note| How to create a Hero banner: [[Block_Image_With_Text#Use_case_3:_Hero_banner_with_3_CTAs_buttons|view details]]}}
::{{Note| How to create a Hero banner: [[Block_Image_With_Text#Use_case_3:_Hero_banner_with_3_CTAs_buttons|view details]]}}

Revision as of 04:17, 19 September 2023

This tutorial will guide you through 4-easy-steps to build your first custom template 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 can be assigned to a product/blog post/page or a product/blog/page group.

Getting Started

Watch the Getting Started with Easy Content Builder:

‎

Adding your first template

Select the option that best fits your goal:

==== Template for Single page ====
Create a new template - assigned to a single page: Read setup guide.
==== Template for Multiple pages ====
Create a new template - assigned to multiple pages at once: Read setup guide.
==== Template for Standard pages ====
Customize your standard pages (Homepage, Collection, etc.): Read setup guide.

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.

Jump in a little deeper

If you would rather want to learn more about the fundamentals of the Easy Content Builder app:

Use cases

Browse the pre-built template collections - Product pages, Landing pages, Brand pages, etc. - for inspiration.

  • Grid & Layouts:
How to create multi-column layouts: view details
How to create a Hero banner: view details
Retrieved from "https://docs.posstack.com/index.php?title=Get_Started&oldid=1138"