How to import your product page from Shopify
Before you can edit your product pages, you will need to import them into Shogun. There are three ways to import your pages:
Note: Once a product is imported, Shogun takes control. If the page is unpublished, this will remove the availability of the product to the online store sales channel.
Use the Search Bar in the Dashboard
In your Shogun dashboard, use the search bar at the top of the page to search for a product you would like to import and edit.
Click on "Import" to import the page into Shogun.
Select a page layout option. (Learn the differences here.)
Click on "Edit in Shogun" to then open the product page in the editor.
The Create Page Button
In your Shogun dashboard, click on the Create Page button.
Select Product Page.
Search for the product you want to import, then click on "Select."
Select a page layout option. (Learn the differences here.)
Next, click on "Create Page". This will import the page and open it in the editor.
You can learn more about the difference between the layout options from this guide:
Select More Actions on the Product Within Shopify
In your Shopify admin, select the product.
Click on More Actions, then select Edit With Shogun.
The product page will open within the Shogun editor.
Note: If the product has been imported previously, this will edit the existing product page in the layout initially selected. If the page has not been imported prior, this product will be sent to Shogun as an existing layout. If this is not the preferred layout type, the product page must be reverted and re-imported using one of the first two methods.
How to edit your imported Product Page
Congratulations on importing your Product Page from Shopify into Shogun! You can now edit your page.
Depending on the layout option chosen during the import process, the editable areas of the page will be different for each.
Existing Layout option
The Existing Layout option uses your theme's product page template allowing the product page to retain its original layout upon importing. This option also retains any third-party app functions specific to Shopify product pages.
Shogun works with your theme by adding a drop zone in the product description area and two custom drop zones above & below the main content area. These drop zones make it easy to add elements like videos, product image galleries, text, countdown timers, and more to product pages in Shopify.
The location of the product description drop zones is determined by the theme's default layout. To easily view the areas that can be edited with Shogun, toggle the Drop Zone feature located at the top of the editor. Enabling this will display the drop zone where you can drag and drop Shogun elements to edit your page.
Please note: The location of the product description and drop zones may vary based on your theme's default product template. With the assistance of a developer, it is possible to change the locations of these drop zones by modifying your theme.
Custom Layout Option
The Custom Layout option does not use your theme's product page layout. This layout allows you to create a completely custom product page by presenting you with an empty Product Box to place elements within. By dragging Shogun's Product fields into the page, you can display the product's details anywhere within the page's content area.
Note: The Custom Layout page type starts with a Product Box already on the page. Because of this, dragging additional Product Boxes into the content area is unnecessary, unless you'd like to display additional products within the same page.
Will my third party apps work with imported product pages?
Most third-party product-related apps, such as swatches, bundles, subscriptions, etc., require the theme's default product template to function. These apps will work as usual within product pages using the Existing Layout option, as this uses the theme's product page template.
Since the Custom Layout does not use the theme's default template nor contain the theme's product components, third-party product applications will not automatically appear in this layout type. In some cases, it is still possible to include third-party applications in the Custom Layout if an all HTML embed code is available for that app.
Note:
The embed code will need to be entirely in HTML to function. Any Liquid tags within the code will require placement within the theme to display properly.
Please reach out to the developer of the third-party app to find out if such an embed code is available.