|
|
| (105 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== |
| | * [[Create_Template_Apply_to_Multiple_Pages|Create a template for multiple pages]] |
| | * [[Create_Template_Apply_to_One_Page|Create a unique template]] |
| | * [[Customize_standard_pages|Customize homepage, collection page]] |
| | * [[Add_section_settings|Add sections]]. |
|
| |
|
| === Getting Started ===
| | {{Note|Watch Video Tutorials|reminder}} |
| Watch the Getting Started with Easy Content Builder:
| | 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]. |
|
| |
|
| <youtube width="960" height="540">ze_UE0uVto4</youtube>
| | {{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}} |
|
| |
|
| === Adding your first template === | | ==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]] |
|
| |
|
| Select the option that best fits your goal:
| | ==More Actions== |
| | | * [[Manage_Templates|Manage Templates]] |
| :==== Template for Single page ====
| | * [[Migration|Theme Migration]] |
| :Create a new template - assigned to a single page: [[Create Template For Single Page|Read setup guide]].
| | * [[Custom_CSS|Custom CSS]] |
| | |
| :==== Template for Multiple pages ====
| |
| :Create a new template - assigned to multiple pages at once: [[Create Template For Multiple Pages|Read setup guide]].
| |
| | |
| :==== 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:
| |
| #From your Shopify admin, click '''Online Store''' > '''Themes'''.
| |
| #Find the theme that you want to edit, and then click '''Customize'''.
| |
| #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}}
| |
| | |
| *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]]}}
| |
