To edit a Shopify product page in Shogun, you first import it. When you import, you choose a layout, which decides which parts of the page you can edit and whether your theme's product apps keep working. This article covers choosing a layout, the three ways to import, and what you can edit afterwards.
Before you import: importing doesn't create a new page. It gives your existing product page a new Shogun layout, and Shogun takes control of that layout. Always edit the layout in the Shogun editor, because changes made elsewhere revert to the latest Shogun version.
If you want to go back to the version you had before Shogun, undo the import. Don't unpublish the page: unpublishing it in Shogun removes the product from your Online Store sales channel.
Choose a layout
Whichever import method you use, you'll be asked to pick one of three layouts:
Existing Layout: keeps your theme's product page template and adds Shogun dropzones to it. Your theme's product apps keep working.
Custom Layout: replaces the theme template with a blank Product Box, so you can design the whole page yourself.
Shopify 2.0 Sections: imports your page's existing Shopify sections into a Custom Layout, so you can rearrange them and add Shogun content between them.
Each layout is described in more detail under Edit your imported product page below.
Import your product page
There are three ways to import a product page.
From the dashboard search bar
In your Shogun dashboard, use the search bar at the top of the page to find the product you want to import.
Click Import.
Choose a layout.
Click Edit in Shogun to open the product page in the editor.
From the Import a page card
In the Pages view of your Shogun dashboard, click the Import a page card.
Open the Product tab.
Find the product you want to import, then click Import page next to it.
Choose a layout. This imports the page and opens it in the editor.
Import a page lists your Shopify pages by type. Pick Product, then Import page.
From the product in your Shopify admin
In your Shopify admin, open the product.
Click More actions, then select Edit with Shogun.
The product page opens in the Shogun editor.
Note: if the product has been imported before, this opens the existing Shogun page in the layout you chose then. If it hasn't, the product is imported with the Existing Layout. To use a different layout, undo the import and import it again using one of the first two methods.
Edit your imported product page
Once your product page is imported, what you can edit depends on the layout you chose.
Existing Layout
The Existing Layout uses your theme's product page template, so the page keeps its original layout when you import it. It also keeps any third-party app features that are specific to Shopify product pages.
Shogun adds a dropzone in the product description area and two dropzones above and below the main content area. You can drag elements such as videos, image galleries, text and countdown timers into these dropzones.
Where the dropzones appear depends on your theme's default product template. To see them, turn on the dropzone toggle at the top of the editor.
Note: with the help of a developer, you can change where these dropzones appear by modifying your theme.
Custom Layout
The Custom Layout doesn't use your theme's product page template. Instead, the page starts with an empty Product Box, and you build the whole page yourself. Drag Shogun's Product elements into the Product Box to show the product's details wherever you want them.
Note: the page already contains a Product Box, so you only need to add another one if you want to show additional products on the same page.
Shopify 2.0 Sections
This option imports all the Shopify sections that make up your page into a Custom Layout. You can then move them around, add Shogun content between them, or add and remove Shopify sections. You'll find Shopify sections at the bottom of the Element library on the left, under Shopify Sections.
Will my third-party apps work with imported product pages?
Most third-party product apps, such as swatches, bundles and subscriptions, need your theme's default product template to work.
Existing Layout: these apps work as usual, because the page uses your theme's product template.
Shopify 2.0 Sections: apps imported as part of your Shopify sections usually keep working. If an app's widget is available as a Shopify section, you may be able to drag it onto any page, including a Custom Layout, from the Element library.
Custom Layout: apps won't appear automatically, because the page doesn't use your theme's template. You can sometimes add an app with an HTML embed code.
If you use an embed code, it must be entirely HTML. Any Liquid in the code needs to be added to your theme instead. Ask the app's developer whether an HTML embed code is available.