Get Started: Difference between revisions

From Posstack.com Documentation
 
(120 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This tutorial will guide you through 4-easy-steps to build your first custom template using the Easy Content Builder app.
Easy Content Builder provides you with sections and templates (including metaobject templates) that can be added directly to your existing Shopify themes.  


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. 
We've assembled some links to get you started:


Templates can be assigned to a product/blog post/page or a product/blog/page group.
==Quickstart Video Tutorials==
Check out the easy-to-follow video tutorials to learn how to use the sections in Posstack Easy Content Builder, [https://youtube.com/playlist?list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2&si=uRzrFdzbmuKowSC7 click here to watch videos].


=== Adding your first template ===
[[File:Ecb-video-tutorials.jpg|frameless|800x800px]]


Select the option that best fits your goal:  
{{Note|'''Tips''': Explore the [https://easy-content-builder-demo.myshopify.com/pages/section-variations All Section Library] to understand how you can use the Easy Content Builder to design a unique custom section. |reminder}}


===== Template for Single page =====
{{Note|'''New to the Shopify section?''': Learn [https://posstack.com/resources/shopify-section why Shopify uses sections as a primary way] to create your page layout. |inline}}
Create a new template - assigned to a single page: [[Create Template For Single Page|Read setup guide]].


'''Quickstart:'''
==Add Your First Template & Section==
If you're new to Easy Content Builder, start with the Template Builder to get familiar with the app quickly:


Watch this overview video to learn how to build a new template and assign it to an individual page using Easy Content Builder.  
* [[Template_builder|Template Builder]] - Use prebuilt sections to create a template.
* [[Add_section_settings|Add your first section]].


<youtube width="960" height="540">ze_UE0uVto4</youtube>
After that, check out these guides based on your customization needs:


===== Template for Multiple pages =====
* [[Create_Template_Apply_to_Multiple_Pages|Create a template for multiple pages/products/blog posts]]
Create a new template - assigned to multiple pages at once: [[Create Template For Multiple Pages|Read setup guide]].
* [[Create_Template_Apply_to_One_Page|Create a template for a single unique page/product/blog post]]
* [[Customize_standard_pages|Customize homepage, collection page]]


===== Template for Standard pages =====
== Learn the Basics ==
Customize your standard pages (Homepage, Collection, etc.): [[Template for Standard Pages|Read setup guide]].


===Preview your custom template===
* [[Add section settings#How to set up a full-width section|Making your sections full width]]
Steps to preview your products, blog posts or pages with the new custom template:  
* [[Add section settings#Adjust the background color|Adjusting your section's background color]]
#From your Shopify admin, click '''Online Store''' > '''Themes'''.
* [[Add section settings#Adjust the text color|Adjusting your section's text color]]
#Find the theme that you want to edit, and then click '''Customize'''.
* [[Add section settings#Adjust space between columns and rows within a section|Adjusting padding between columns and rows]] (within a section)
#Open the dropdown menu at the top of the page.
* [[Add section settings#Adjust the top/bottom padding and margin between sections|Adjusting top/bottom padding and margins]] (between sections)
#Use the dropdown menu to select a template.
* [[Custom CSS#Adjust the button style, font size, border radius, background color|Adjusting your font size]]
#In the sidebar, click '''Change'''.
#Select the product or page you want to preview with the selected template.


===Next steps=== 
==Jump in Deeper==
* [[Multi_column_layout_examples|Create multi-column layouts]]
* [[Add_section_settings#Edit_Section_Settings|Customize your templates]]
* [[Metaobject intro|Create metaobjects templates]]


*Manage your templates: [[Manage Templates|follow these steps]].
==More Actions==
*Edit your template: [[Edit Template|follow these steps]].
* [[Manage_Templates|Manage Templates]]
*Learn how to set up multi-column layouts:
* [[Migration|Theme Migration]]
::*[[Section Settings|1-col boxed layout]]
* [[Custom_CSS|Custom CSS]]
::*[[Section Settings|1-col with Background Image]]
::*[[Section Settings|2-col with Flexible Col Width]]
::*[[Section Settings|2-col with Blank Sections]]
::*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}}
 
*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===
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]].
*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===
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:
::*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]
::*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]]}}
:*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]
:*Hero banners:
::*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]]}}

Latest revision as of 09:31, 16 June 2025

Easy Content Builder provides you with sections and templates (including metaobject templates) that can be added directly to your existing Shopify themes.

We've assembled some links to get you started:

Quickstart Video Tutorials

Check out the easy-to-follow video tutorials to learn how to use the sections in Posstack Easy Content Builder, click here to watch videos.

Ecb-video-tutorials.jpg

Tips: Explore the All Section Library to understand how you can use the Easy Content Builder to design a unique custom section.
New to the Shopify section?: Learn why Shopify uses sections as a primary way to create your page layout.

Add Your First Template & Section

If you're new to Easy Content Builder, start with the Template Builder to get familiar with the app quickly:

After that, check out these guides based on your customization needs:

Learn the Basics

Jump in Deeper

More Actions

Retrieved from "https://docs.posstack.com/index.php?title=Get_Started&oldid=3146"