Importing a page
Shogun’s page importer allows you to import into Shogun any page built using a Shopify Online Store 2.0 theme. This tool also allows you to work with and make edits to sections imported into Shogun from Shopify. Keep reading to learn more about how to use the feature and its limitations.
If you have built pages in Shopify using a Shopify 2.0 theme, you will see those pages listed in the “Shopify Pages” section of the Pages dashboard.
To import the page into Shogun, simply click the “import page” button next to the page you would like to import. Once the page has been imported, it will be opened in the Shogun visual editor.
It is important to note that even though the page has been imported, it won’t replace the page currently published by Shopify until you publish the page via Shogun.
In order to use page importer you must input your store password, otherwise Shogun will not be able to import the page.
Editing an imported page
Once your page has been imported and opened in the visual editor, you can edit the page’s sections exactly as you would edit them in Shopify. Sections which have been imported from Shopify will be highlighted in green and feature a Shopify badge, indicating that the section was originally created in Shopify.
Simply click on the section you would like to edit and the right-hand panel will open up, exposing your options for editing the section. Just as in Shopify, you can rearrange and edit the elements of the section using Shopify’s blocks functionality. You can also make changes to the section’s color scheme, dimensions, padding or alignment from the right-hand menu.
Additionally, if your imported page has a section containing images you can make use of the image-picker functionality to select any image saved in Shopify to use in your section.
Once your page has been imported, you can drag and drop any Shogun element (including snippets and global snippets) on to the page just like any other page built in Shogun. You can also launch A/B tests or run Targeted Experiences on any page that has been imported into Shogun.
Reversing the importation of a page
If you decide that you do not want to import a Shopify page into Shogun, you have an option to undo the import at any time, by going to the Shogun Pages section of the dashboard, clicking on the bread-crumbs menu and hitting “reverse import.” Taking this action will revert your page content to exactly as it was before the page was imported into Shogun.
Sections
When you import a page from Shopify, Shogun will automatically pull down the sections associated with your Shopify theme. You can find all of your imported sections in the visual editor by clicking the elements button and scrolling to the bottom of the panel. This allows you to reuse any section created in Shopify on any of your Shogun pages - simply drag the section onto the page and start editing.
Sections cannot be nested inside other elements like Container or Columns
You can also find a list of all of your imported sections in the “sections” tab of the Pages & Templates tab. One important thing to note is that changes made to sections in Shopify do not update automatically. If you make a change to a section in Shopify and want those changes to be propagated on any pages with those sections in Shogun, you will need to hit the “import sections” button on this screen to update the imported sections.
App Blocks
App Blocks are supported through integration with the Shopify Editor. You can add, edit, and delete App Blocks from the sidebar once you have a Shopify section open in the editor.
Add an App Block
To add an App Block, click the "Add block" button inside the 'Blocks' dropdown of your Shopify Section and then select the "App block" option.
Clicking this option will open the Shopify Editor, add the App Block, configure its settings and click save.
Now, navigate back to the Shogun Editor and refresh the section. You will now see your App Block in the list of Blocks.
Edit an App Block
To edit an App Block, click the link icon for the App Block.
This will navigate you to the Shopify Editor and the settings panel will automatically open for the App Block.
Update the settings and click save.
Now, navigate back to the Shogun Editor and refresh the section. You will see your App Block with updated settings in the preview.
Delete an App Block
To delete an App Block, click the Delete Icon.
Limitations
This feature is currently in beta, which means that the feature has some limitations including:
App Block not displaying in Shogun Editor
In some cases, your App Block may not display in the Shogun Editor. This is due to how the App Block is loading Javascript.
This is not an issue on published pages. The App Block will work and display correctly once published.
We are currently working on a fix for this but in the meantime you can try reloading the editor to see if this allows it to display.
Legacy Importer Pages
Pages imported using the legacy Page Importer cannot use Shopify Sections.
If you want to use Shopify Sections on a page imported from Shopify using the previous Shogun Page Importer, please do the following:
Create snippets for the Shogun Elements on the page
Delete the page
Re-import the page using the new Online Store 2.0 Page Importer
Add the snippets to the page
In future, we will provide a migration tool to do the above automatically.
If you have any questions before doing this procedure please reach out to our support team.
Input types not supported in the Shogun Editor
We are currently working on adding support for the input types listed below. The values will always be set to their initial value during import and cannot be edited inside the Shogun Editor:
Font Picker
Article
Blog
Link List
Page
Dynamic Sources
Dynamic Sources are supported but must be configured using Liquid until UI, similar to the Shopify Editor, is implemented.
For example, setting a text field to be the Product Title in the Shopify Editor can be achieved using the Dynamic Sources selector.
Currently in Shogun, you must use the following Liquid syntax.
More information about Shopify's Dynamic Sources and what properties are available when using Liquid can be found in their documentation.
Shopify Sections can only be added to the top level of a page
Shopify Sections can only be added to the top level of a page and cannot be added inside elements like Containers or Columns. The editor will prevent you from doing this.
Shopify Sections created in Shogun
Shopify Sections created in Shogun will import as their Shopify Section representation instead of drag and drop.
In future, we plan to support translating these sections back into their drag and drop counterpart.
Live Objects
Objects that use contextual context like cart and customer will always be set to their default state inside the editor.
Product Recommendations
Product Recommendation sections will not display inside the editor but will on published pages.
Setting a page as your Homepage
In Shopify, there are contextual objects related to the current page type (page, product, collection, etc...).
If a Section uses one of these objects and is added to your Homepage, the object will not be populated.
When setting a page in Shogun as your homepage you will see a warning if the page contains a Section that uses one of these contextual objects. You may proceed with publishing but you should verify the published page displays correctly.
These are the contextual objects that will be empty on a Homepage:
Article
article
Blog
blog
Collection
collection
Page
pagepage_titlepage_descriptionpage_image
Product
product
Javascript
Unlike with Shogun pages, the Shogun Editor will run all Javascript present in the theme if a page is imported from Shopify or is a Shogun page that contains Shopify sections.
If you have problems with popups that you cannot dismiss on a page that uses Shopify Sections please contact support.
Hyperlinks
Clicking links inside the Shogun Editor does not navigate you to the corresponding page like in the Shopify Editor.
Snippets
You currently cannot create a snippet in Shogun that contains a Shopify Section.
Shopify Elements & Sync
If a page using Shopify Elements is copied over to a new store using our Sync feature, they may stop working properly or display incorrectly. This is because assets that the section or app rely on to function may not be present in the new store, and as these would be stored in your theme Shogun is not able to copy them across as part of the sync. Shopify sections may also have hardcoded references to external assets (CSS, JavaScript), which won’t be able to get loaded in the destination stores because of security reasons.
As such we cannot guarantee that Shopify elements (and therefore pages using them) will work properly after being copied as part of sync. We encourage users to double check any pages using Shopify elements after a sync to make sure they're working properly, and make manual adjustments as needed.