Shogun makes small additions to your Shopify theme that allow the application to add and display content. These are non-destructive theme additions that are required in order for the content generated by the app to display on the published page.
It's important to note that the changes Shogun makes to the theme code depend on whether your theme has the Online Store 2.0 architecture or the vintage architecture. You can read more about this and determine your current theme's architecture type here: Shopify Theme Architecture Versions.
Online Store 2.0 Architecture
Layouts
Two small additions are made to all existing layout files**,** which enable pages built with Shogun to function properly. The code is as follows:
{% include 'shogun-content-handler' %} {% render 'shogun-head' %}
Each of these lines will render a snippet that Shogun has also created within the theme.
Shogun also adds a file called theme.shogun.landing.liquid, which allows you to create landing pages without the theme's header and footer within Shogun.
Templates
Five templates are added into the theme on installation of Shogun, and are required in order for some Shogun page types to publish.
article.shogun.custom.liquid - Allows you to import Blog Posts via Shogun’s Shopify Page Importer feature
collection.shogun.custom.liquid - Allows you to import Collections via Shogun’s Shopify Page Importer feature
page.shogun.default.liquid - Allows you to create standard pages within Shogun, as well as importing Pages via Shogun’s Shopify Page Importer feature.
page.shogun.landing.liquid - Allows you to create landing pages within Shogun
product.shogun.custom.liquid - Allows you to create custom product pages within Shogun, as well as importing Products via Shogun’s Shopify Page Importer feature.
Shogun will also make a couple of additions to existing theme files when they are used with a Shogun page. This can be any article.*.json, collection.*.json, page.*.json, or product.*.json file, depending on the page type.
We make two additions for article or page templates to enable those pages to function correctly. Any existing content will be in between these two sections.
The code is as follows:
{ "sections": { "shogun-helper": { "type": "shogun-helper", "settings": { } }, "shogun-optimizer": { "type": "shogun-optimizer", "settings": { } } }, "order": [ "shogun-helper", "shogun-optimizer" ] }
For collection or product templates, we make four additions, both in order to enable those pages to function correctly and to add Shogun dropzones. Shogun dropzones are what allow you to drop your content onto your page when you are inside the Shogun editor. Any existing content will be in between the second and third sections here.
The code is as follows:
{ "sections": { "shogun-above": { "type": "shogun-above", "settings": { } }, "shogun-below": { "type": "shogun-below", "settings": { } }, "shogun-helper": { "type": "shogun-helper", "settings": { } }, "shogun-optimizer": { "type": "shogun-optimizer", "settings": { } } }, "order": [ "shogun-helper", "shogun-above", "shogun-below", "shogun-optimizer" ] }
Each of these additions will render a section that Shogun has also created within the theme.
When setting a Shogun page as your home page, Shogun will alter the index.json template to use that page instead. The original content will be restored upon reverting the Shogun page from being set as the home page.
The code is as follows:
{ "sections": { "shogun-home": { "type": "shogun-home", "settings": { } } }, "order": [ "shogun-home" ] }
When using the Shopify Page Importer feature, Shogun will dynamically create template files when publishing those pages. All of these files will use the naming scheme of <page-type>.shogun-<id>.json , e.g. article.shogun-6696cf983e8381695094c1d5.json.
Sections
Five sections are added to the theme on Shogun installation and are required to load the content into the templates as explained above.
shogun-above.liquid - Renders content from the above Shogun dropzone
shogun-below.liquid - Renders content from the below Shogun dropzone
shogun-helper.liquid - Enables Shogun product elements to function properly
shogun-optimizer.liquid - Enables pages with a Shogun A/B Test or Personalization to function properly
shogun-home.liquid - Allows a Shogun page to be used as the home page
When using the Shopify Theme Sections feature, Shogun will dynamically create section files when publishing those sections. All of these files will use the naming scheme of shogun-custom-<id>.liquid, e.g. shogun-custom-66105adbd5c004e215bdc66d.liquid.
Snippets
Three snippets are added to the theme on installation of Shogun and are required in order to load the correct libraries into your Shogun pages.
shogun-content-handler.liquid - Enables pages imported via Shogun’s Shopify Page Importer with an A/B Test or Personalization to function properly
shogun-head.liquid - Renders SEO metadata for a Shogun page
shogun-products.liquid - Enables Shogun product elements to function properly
Vintage Architecture
Layout
One addition is made to all existing layout files**,** which enables pages built with Shogun to function properly. The code is as follows:
{% render 'shogun-head' %}
This line will render a snippet that Shogun has also created within the theme.
Shogun also adds a file called theme.shogun.landing.liquid, which allows you to create landing pages without the theme's header and footer within Shogun.
Templates
Three templates are added to the theme on installation of Shogun and are required in order for some Shogun page types to publish.
page.shogun.default.liquid - Allows you to create standard pages within Shogun, as well as importing Pages via Shogun’s Shopify Page Importer feature.
Page.shogun.landing.liquid - Allows you to create landing pages within Shogun
product.shogun.custom.liquid - Allows you to create custom product pages within Shogun, as well as importing Products via Shogun’s Shopify Page Importer feature.
Shogun will also make a couple of additions to existing theme files when they are used with a Shogun page. This can be any article.*.liquid, collection.*.liquid, page.*.liquid, or product.*.liquid file, depending on the type of page.
For article templates we make two additions, in order to enable those pages to function properly. Any existing content will be in between these two lines.
The code is as follows:
{% render 'shogun-products', content: article %} {{ article.metafields.shogun.optimizer }}
For page templates, we make two additions in order to enable those pages to function properly. Any existing content will be in between these two lines.
The code is as follows:
{% render 'shogun-products', content: page %} {{ page.metafields.shogun.optimizer }}
For collection templates, we make four additions, enabling those pages to function properly, as well as adding Shogun dropzones. Shogun dropzones allow you to drop your content onto your page when you are inside the Shogun editor.
Any existing content will be in between these lines 2 and 3.
The code is as follows:
{% render 'shogun-products', content: collection %} {{ collection.metafields.shogun.above }} {{ collection.metafields.shogun.below }} {{ collection.metafields.shogun.optimizer }}
For product templates, we make four additions, both in order to enable those pages to function correctly and to add Shogun dropzones. Shogun dropzones allow you to drop your content onto your page when you are inside the Shogun editor.
Any existing content will be in between these lines 2 and 3.
The code is as follows:
{% render 'shogun-products', content: product %} {{ product.metafields.shogun.above }} {{ product.metafields.shogun.below }} {{ product.metafields.shogun.optimizer }}
The functionality these additions provide:
{% render 'shogun-products', content: article %} - Enables Shogun product elements to function properly
{{ article.metafields.shogun.optimizer }} - Enables pages with a Shogun A/B Test or Personalization to function properly
{{ collection.metafields.shogun.above }} - Renders content from the above Shogun dropzone
{{ collection.metafields.shogun.below }} - Renders content from the below Shogun dropzone
When setting a Shogun page as your home page, Shogun will replace the index.liquid content so that it uses that page instead. The original content will be restored upon reverting the Shogun page from being set as the home page.
The code is as follows:
{% assign page = pages["<page-handle>"] %} {% render 'shogun-products', content: page %} <div class="shg-clearfix"></div> {{ page.content }} {{ page.metafields.shogun.optimizer }}
Snippets
Two snippets are added to the theme on installation of Shogun and are required in order to load the correct libraries into your Shogun pages.
shogun-head.liquid - Renders SEO metadata for a Shogun page
shogun-products.liquid - Enables Shogun product elements to function properly
Notes regarding Shogun theme files
Specific Shogun files may get re-written at any time and are not recommended to be edited; these are visible in the theme files and are marked with a comment explaining this at the top of the file.
{% comment %}
Auto-generated by Shogun.
This file can be re-written at any time.
{% endcomment %}