|
|
| (113 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 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.
| | ==Get Started== |
| === Adding your first template === | | * [[Create_Template_Apply_to_Multiple_Pages|Create a template for multiple pages]] |
| '''Step 1''': In your Shopify admin, select your Product/Blog Post/Page (depending on which page you want to create a custom template)
| | * [[Create_Template_Apply_to_One_Page|Create a unique template]] |
| | * [[Customize_standard_pages|Customize homepage, collection page]] |
| | * [[Add_section_settings|Add sections]]. |
|
| |
|
| '''Step 2''': On the Product/Blog Post/Page, click on '''More actions''' > '''Create a template'''
| | {{Note|Watch Video Tutorials|reminder}} |
| ::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''.
| | Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, available [https://www.youtube.com/watch?v=uspAswjgQxs&list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2 here]. |
| ::[[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:
| | {{Note|'''Tips''': You can also look at this new [https://easy-content-builder-demo.myshopify.com/pages/shopify-custom-sections custom section library]. It's aimed at offering inspirational examples of how you can combine different app sections to create a unique custom section your way. |inline}} |
| ::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.
| | ==Jump in Deeper== |
| ::{{Note|'''<u>Useful link</u>''':
| | * [[Multi_column_layout_examples|Create multi-column layouts]] |
| ::* See [https://easy-content-builder-demo.myshopify.com/pages/section-variations multi-column layouts examples]
| | * [[Add_section_settings#Edit_Section_Settings|Customize your templates]] |
| ::* Learn how to [[Section Settings|create multi-column layouts]]}}
| | * [[Metaobject intro|Create metaobjects templates]] |
| ::[[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 === | | ==More Actions== |
| Steps to preview your products, blog posts or pages with the new custom template:
| | * [[Manage_Templates|Manage Templates]] |
| # From your Shopify admin, click '''Online Store''' > '''Themes'''.
| | * [[Migration|Theme Migration]] |
| # Find the theme that you want to edit, and then click '''Customize'''.
| | * [[Custom_CSS|Custom CSS]] |
| # Open the dropdown menu at the top of the page.
| |
| # Use the dropdown menu to select a template.
| |
| # In the sidebar, click '''Change'''.
| |
| # Select the product or page you want to preview with the selected template.
| |
| | |
| === Next steps ===
| |
| | |
| * Manage your templates: [[Manage Templates|follow these steps]]. | |
| * Edit your template: [[Edit Template|follow these steps]].
| |
| * Learn how to set up multi-column layouts:
| |
| ::*[[Section Settings|1-col boxed layout]]
| |
| ::*[[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}}
| |
| | |
| === 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 [https://easy-content-builder-demo.myshopify.com pre-built template collection] (Product pages, Blog posts, and Other pages). Or section variations for inspiration:
| |
| | |
| :* Grid & Layouts:
| |
| ::* Multi-column layout [https://easy-content-builder-demo.myshopify.com/pages/multi-column-layouts examples]
| |
| ::* Hierarchical Grid [https://easy-content-builder-demo.myshopify.com/pages/hierarchical-grid examples]
| |
| ::* Collection Grid & Layout [https://easy-content-builder-demo.myshopify.com/pages/collection-grid examples]
| |
| ::* How to [[Section Settings|create multi-column layouts]]
| |
| :* [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]
| |
| :* 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]]
| |
