Installation

Step 1: Install the app by going to https://apps.shopify.com/advanced-theme-builder.

Installation Step 1

Step 2: Approve the monthly billing. Remember you get a free 30 day trial to see how much you will love ATB.

Installation Step 2

Step 3: Launch the app in the Apps section of your Shopify website.

Installation Step 3

Step 4: Once the app is launched, Advanced Theme Builder will open in a new tab. Please watch our quick video on getting started.

Installation Step 41


Getting Started

Step 1: Choose from products, pages, collections or blog Posts in the right hand sidebar to get started. For this tutorial we will select products.

Installation Step 1

Step 2: The dropdown menu will be populated with your products. Choose a desired product.

Installation Step 2

Step 3: Create New Zones. This step will inject liquid placeholders into this product’s template file. We like to have the option to add content to the top and bottom of the product page, so here we will click the button for Top and Bottom. Note: Once an option has been set, the only way to modify this in the future is to manually edit this product’s page template. If using the Shopify Theme App, make sure to download file to your local machine.

Installation Step 3

Step 4: You now have Zones for Top and Bottom in the sidebar. We are going to click the Add Section button for the Bottom zone.

Installation Step 4

Step 5: In the modal pop up window, give your new section a name and select the template for the section, we are going to choose the Image section. Click the Create Section button.

Installation Step 5

Step 6: Now it is time to populate the content for this new section. Here in our screenshot you can see we have chosen title, content, and button. Once populate, click the Save Section button and upon refresh you will see your changes. Some changes may take up to a minute to show.

Installation Step 6

 


What are Zones?

A Zone is an area on a Page, Product, Collection, or Blog Post template, where custom content can be populated using Sections with Advanced ThemeBuilder. You can think of it as a frame that is as wide as the container area of your site, that can stretch limitlessly vertically to accommodate any number of Sections. Zones may be automatically added to the top and bottom of any template file with Advanced ThemeBuilder, and for those willing to edit theme files, you can also add more zones

 


What are Sections?

Sections are blocks of content in customizeable layouts that can be added limitlessly to any Zone.

 


Add more sections to Advanced Theme Builder

Advanced Themebuilder will automatically install four basic Section templates into your theme, Image, Video, Text and Offset. You can do a lot with just these four options, espcially with the WYSIWYG editor included in the text field.

Visit advancedthemebuilder.com/store to download new sections for Advanced Theme Builder and Shopify Sections.

For Advanced Developers familiar with Liquid, you can develop your own Section template files and place them into your theme's Snippets folder, prefixed by "atb." (so your file would look like atb.myawesomesection.liquid), and they will instantly be available in Advanced ThemeBuilder. While you're at it, why not submit your new Section to the Section Store and make some extra cash!

Custom Sections must follow the proper format. Below is an example of the contents of a Section file:

                
                
                <!-- Section / Block Type: Text -->

                {% comment %}
                    ATB-SCHEMA{
                    "name":"Text",
                    "id":"text",
                    "price": 0,
                    "banner":"//i.imgur.com/3xH5C0o.png",
                    "icon": "//i.imgur.com/JBPe0Qi.png",
                    "screenshots" : [
                        "//i.imgur.com/OcChZrR.png",
                        "//i.imgur.com/OcChZrR.png",
                        "//i.imgur.com/OcChZrR.png"
                    ],
                    "tags": "text,html,wysiwyg,universal",
                    "description": "Add any content to any page using a robust Wysiwyg text editor. You can add images, format your text, even add your own html.",
                    "settings":[
                        { 
                            "id" : "title",
                            "label" : "Title",
                            "info" : "Include a title",
                            "type" : "text"
                        },
                        { 
                            "id" : "description",
                            "label" : "Description",
                            "info" : "You can add text or html here",
                            "type" : "html"
                        },
                        { 
                            "id" : "text_align",
                            "label" : "Text align",
                            "info" : "Choose the alignment of the text",
                            "default" : "center",
                            "type" : "select",
                            "options": [
                                {
                                    "label": "Left",
                                    "value": "left"
                                },
                                {
                                    "label": "Center",
                                    "value": "center"
                                },
                                {
                                    "label": "Right",
                                    "value": "right"
                                }
                            ]
                        }
                    ]
                }ATB-SCHEMA
                {% endcomment %}

                {% include 'atb-render' field:'title' %}
                {% assign title = val %}
                {% include 'atb-render' field:'description' %}
                {% assign description = val %}
                {% include 'atb-render' field:'text_align' %}
                {% assign text_align = val %}

                <section class="atb--type__text">
                    <div style="text-align: {{ text_align }};">
                        {% if title != blank %}
                        <h2>{{ title }}</h2>
                        {% endif %}
                        {{ description }}
                    </div>
                </section>
        

 


Add more Zones to your Theme

Advanced ThemeBuilder wil automatically allow you to add Sections to the top and bottom of any page, product, collection, or blog post. You can add more zones to your theme to place Sections among your other page content by including the following snippet into your theme files.

{% include 'atb' zone:'My Zone'%}

You may want to rename the zone to be more descriptive for your placement, like "Above Comments" or "Below Product Info".

 


Updating Theme Files

Part of what makes Advanced ThemeBuilder such a powerful tool for Developers and Store owners, is the ability to carry over Section temapltes and content across multiple themes, and with changes that are made to theme files.

When you update your theme's template files, it is important to know how to migrate your Zones and Sections. By default, a new template may not have Advanced ThemeBuilder Zones defined. If a template is without Zones is used on a selected Page, Product, Collection, or Blog Post, Advanced ThemeBuilder will prompt you to automatically include Zones at the top and bottom of the template. You can also Add More Zones.

If you delete a template, you will be prompted with an error message, indicating that the template file was not found. You can visit the Shopify admin, navigate to that Page, Product, Collection, or Blog Post, and select a new template that does exist, then return to Advanced ThemeBuilder and refresh your browser.

Some Shopify Themes have special templates to offer variation in design and more freedom to Store owners. If you change themes from one that offerred multiple templates, and had a template variation selected on a Page, Product, Collection, or Blog Post, you will need to update that page to use a template that exists on the new Theme.