|
|
(163 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]]
| |
| '''Step 3''': Select a pre-built template suggested by the app (then you will be automatically redirected to the Theme Editor)
| |
| :: [[File:Create template for single product.jpg|1200x1200px]]
| |
| '''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.
| | ==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]] |
|
| |
|
| ::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]).
| | ==More Actions== |
| | | * [[Manage_Templates|Manage Templates]] |
| ::'''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]].
| | * [[Migration|Theme Migration]] |
| | | * [[Custom_CSS|Custom CSS]] |
| ::'''Important Note''': Always keep the Section Settings at the bottom of each Content Block list.
| |
| | |
| ::[[File:Reorder the Section settings block.png|1000x1000px]]
| |
| | |
| === 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]]. | |
| | |
| === 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]].
| |
| * Browse the [https://easy-content-builder-demo.myshopify.com pre-built template collection] (Product pages, Blog posts, and Other pages).
| |