Get Started: Difference between revisions

From Posstack.com Documentation
mNo edit summary
 
(162 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==
=== Adding your first template ===
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].
'''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'''
[[File:Ecb-video-tutorials.jpg|frameless|800x800px]]
::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]]
'''Step 3''': Select a pre-built template suggested by the app (then you will be automatically redirected to the Theme Editor)
:: [[File:Ecb create 1st template.jpg|1200x1200px]]
:: '''TIP:''' 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].
:: [[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:  
{{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}}
::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 (See [https://easy-content-builder-demo.myshopify.com/pages/section-variations multi-column layouts examples])
{{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}}
::'''<u>Useful link</u>''': 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 (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 ===
==Add Your First Template & Section==
Steps to preview your products, blog posts or pages with the new custom template:  
Depending on the pages you wish to customize, select one of the specific guides below:
# From your Shopify admin, click '''Online Store''' > '''Themes'''.
* [[Create_Template_Apply_to_Multiple_Pages|Create a template for multiple pages]]
# Find the theme that you want to edit, and then click '''Customize'''.
* [[Create_Template_Apply_to_One_Page|Create a unique template]]
# Open the dropdown menu at the top of the page.
* [[Customize_standard_pages|Customize homepage, collection page]]
# Use the dropdown menu to select a template.
* [[Add_section_settings|Add your first section]].
# In the sidebar, click '''Change'''.
# Select the product or page you want to preview with the selected template.


=== Next steps ===
== Learn the Basics ==


* Manage your templates: [[Manage Templates|follow these steps]].
* [[Add section settings#How to set up a full-width section|Making your sections full width]]
* Edit your template: [[Edit Template|follow these steps]].
* [[Add section settings#Adjust the background color|Adjusting your section's background color]]
* Learn how to set up multi-column layouts:
* [[Add section settings#Adjust the text color|Adjusting your section's text color]]
::*[[Section Settings|1-col boxed layout]]
* [[Add section settings#Adjust space between columns and rows within a section|Adjusting padding between columns and rows]] (within a section)
::*[[Section Settings|1-col with Background Image]]
* [[Add section settings#Adjust the top/bottom padding and margin between sections|Adjusting top/bottom padding and margins]] (between sections)
::*[[Section Settings|2-col with Flexible Col Width]]
* [[Custom CSS#Adjust the button style, font size, border radius, background color|Adjusting your font size]]
::*[[Section Settings|2-col with Blank Sections]]
::*Hierarchical Grids ([https://posstack.com/blog/easy-content-builder-new-hierarchical-grids 6 layout options]) - The step-by-step guide for this section will be added soon.


=== Jump in a little deeper ===
==Jump in Deeper==
If you would rather want to learn more about the fundamentals of the Easy Content Builder app:
* [[Multi_column_layout_examples|Create multi-column layouts]]
* [[Add_section_settings#Edit_Section_Settings|Customize your templates]]
* [[Metaobject intro|Create metaobjects templates]]


* Read to understand [[Clean Template]] and [[Prebuilt Templates|Pre-built ECB Templates]].
==More Actions==
* 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]].
* [[Manage_Templates|Manage Templates]]
* Browse the [https://easy-content-builder-demo.myshopify.com pre-built template collection] (Product pages, Blog posts, and Other pages).
* [[Migration|Theme Migration]]
* [[Custom_CSS|Custom CSS]]

Latest revision as of 03:59, 27 February 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

Depending on the pages you wish to customize, select one of the specific guides below:

Learn the Basics

Jump in Deeper

More Actions

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