How do I add more zones to my theme? I only see "Top" and "Bottom".

Question

Is there a way to have the sections anywhere code inserted above the related products and featured image on the product page? The only options we see currently are "top" and "bottom" which see to place code at very top and very bottom. Neither of those scenarios are ideal locations for us to add custom product page content.

Answer 1

Advanced ThemeBuilder will 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".

Answer 2

You may place the sections placeholder anywhere you like in the template. By default, we placed sections at the top and bottom of the template and named them accordingly. Your templates/product.liquid file looks like this:

n order to create a new zone for sections called "middle" between the product tempate section and related products section, you would add

{% include 'atb' zone: 'Middle' %}

e.g.

{% include 'atb' zone:"Top"%}
{% section 'product-template' %}
{% include 'atb' zone: 'Middle' %}
{% section 'related-products' %}
{% section 'recently-viewed-products' %}
{% include 'atb' zone:"Bottom"%}

If you wanted to be even more specific and place the zone inside one of the sections, you would have to pull the section code out into the main template we only parse the main template file for zones.