Get Started: Difference between revisions

From Posstack.com Documentation
mNo edit summary
Line 61: Line 61:
* 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]].  
* Browse the [https://easy-content-builder-demo.myshopify.com pre-built template collection] (Product pages, Blog posts, and Other pages). Or section variations for inspiration:  
 
=== Use cases ===
Browse the [https://easy-content-builder-demo.myshopify.com pre-built template collection] (Product pages, Blog posts, and Other pages). Or section variations for inspiration:  
 
:* [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid Hierarchical Grid]
:* [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid Hierarchical Grid]
:* [https://easy-content-builder-demo.myshopify.com/products/shopify-bundles Payment Icons - Trust Badges]
:* [https://easy-content-builder-demo.myshopify.com/products/shopify-bundles Payment Icons - Trust Badges]
:* [https://easy-content-builder-demo.myshopify.com/products/promo-flash-sale Promotion - Flash Sales]
:* [https://easy-content-builder-demo.myshopify.com/products/promo-flash-sale Promotion - Flash Sales]
:* [https://easy-content-builder-demo.myshopify.com/pages/ecb-hero-banners Hero Banners]
:* Hero banners:
::*[https://easy-content-builder-demo.myshopify.com/pages/ecb-hero-banners Hero Banners examples]
::* How to [[Block_Image_With_Text#Use_case_3:_Hero_banner_with_3_CTAs_buttons|create a Hero banner]]
:* [https://easy-content-builder-demo.myshopify.com/pages/collection-grid Collection Grid & Layouts]
:* [https://easy-content-builder-demo.myshopify.com/pages/collection-grid Collection Grid & Layouts]

Revision as of 06:49, 27 August 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.

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

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

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 collection (Product pages, Blog posts, and Other pages). Or section variations for inspiration: