All Collections
Shopify FAQ
Shopify Product Pages
How do I move my Shogun dropzones?
How do I move my Shogun dropzones?

Steps on how to rearrange your Shopify product pages.

Updated over a week ago

When using the theme's existing product layout, there are three dropzones on the page. There is the theme's main "Product Description" area and two custom areas that appear above and below the product. 

Screenshot of the Layout panel inside Shogun

Each of these regions can be found in your Shopify theme's product template and can be relocated. It's important to note that the change requirements depend on whether your theme has the Online Store 2.0 architecture or vintage architecture. You can read more about this and determine which architecture type your current theme has here: Shopify Theme Architecture Versions.

Note: Edit your product template files with care. This is the default template for all products in the store.


Online Store 2.0 Architecture

The process for moving dropzones within an Online Store 2.0 Architecture theme is easy. In this type of Architecture, Shogun actually inserts moveable sections right into the Shopify Theme Customizer.

In order to access these you'll want to click "Customize" on your theme as seen below:

In the theme customizer, you can navigate to your default product/collection page template and see the three dropzones that Shogun adds (Shogun Helper, Shogun Section Above, Shogun Section Below).

Shogun Helper

The Shogun Helper section isn't one that you'll want or need to edit at all. The contents of this section are not visible on the live page and are only used to add the scripts responsible for pulling product/collection data from Shopify. We strongly recommend leaving this section as is.

Shogun Section Above

This section is what controls the "above" dropzone in Shogun. This can be moved anywhere on the page by clicking the 6 little dots icon and dragging it up/down the page.

Shogun Section Below

This section is what controls the "below" dropzone in Shogun. This can be moved anywhere on the page by clicking the 6 little dots icon and dragging it up/down the page.

Main Dropzone

The main dropzone in Shogun is controlled through your themes product/collection description. If you'd like to move the position of the main dropzone, you'll need to move the "Description".

Note: These dropzones can also be hidden by clicking the "visibility eye" icon next to the draggable icon on the section. It's important that you don't hide the visibility of the "Shogun Helper" section, as this will cause the scripts it adds not to load in anymore.


Vintage Architecture

Quick Notes:

  • The technique for moving dropzones in the section below covers the existing product page dropzones, but the same technique can be used on the collection.liquid template file and the collection metafield tags within it.

Each dropzone is represented by a liquid tag in the product.liquid file, which is located in the Templates folder of the Shopify theme.

  • The Main region appears as {{product.description}}. In some themes, this may be located in the product-template.liquid section file.

  • The Above region appears as {{product.metafields.shogun.above}}

  • The Below region appears as {{product.metafields.shogun.below}}

Each of these tags can be placed anywhere inside of your product.liquid file.

Additional theme components can be placed in this file to rearrange the order of a page.

Example: If your theme has a Reviews section that you'd like to have appear at the bottom of the product page, the Reviews code can be placed underneath the {{product.metafields.shogun.below}} tag in the product.liquid template.

Note: These product metafields are required within the product.liquid file in order for the dropzones to appear in the editor. They will be automatically re-added if they are deleted. If you would like to disable them from the product template, you can comment them out with Liquid tags.

{% comment %}
{{product.metafields.shogun.below}}
{% endcomment %}
Did this answer your question?