Skip to main content
All CollectionsShopify FAQ
Shopify Page Importer
Shopify Page Importer

Shogun’s page importer allows you to import into Shogun any page built using a Shopify Online Store 2.0 theme

Updated over a week ago

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.

Add an App Block

To add an App Block, click the "Add block" button inside the Blocks 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:

  1. Create snippets for the Shogun Elements on the page

  2. Delete the page

  3. Re-import the page using the new Online Store 2.0 Page Importer

  4. 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

  • page

  • page_title

  • page_description

  • page_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.

Did this answer your question?