Skip to main content

How do I embed a third-party application into a Product Page?

Applications added into your theme's product template can be used alongside Shogun content.

Updated this week

Most product-related apps require placement within the theme's product template file in order to function. In this case, using the Existing Layout product page option will allow you to use third-party apps alongside Shogun content. This can be useful for integrating many third-party applications, such as upsell, review, and bundle applications.

The Custom Layout is ideal for creating a blank template where product data can be dynamically retrieved using Shogun's product box element, giving you complete control over the design and functionality.

While the Custom Layout product page option does not utilize the theme's product template file, some apps can still be embedded.

Custom Layout allows users to build entirely unique product pages, tailoring every detail manually while excluding the theme's inherent product template design or functionality.

Using Third-Party Applications With The Existing Layout

This layout allows you to leverage the pre-defined structure of your Shopify theme while adding custom content through dropzones for Above, Main, and Below elements.

When using the theme's existing product template with your product page, your applications should work as expected and you will not need to make any additional adjustments. The applications should appear on your Shogun pages as they do with other product pages in your store.

You can learn more about the Existing layout here:

Using Third-Party Applications With A Custom Layout

With Custom Layout, you have the flexibility to implement features entirely through Shogun's interface, using HTML and specific Shogun elements to embed product data.

If the application has an embed code available that is in all HTML, it can be embedded into Custom Layout product pages using the HTML element. 

Note: Oftentimes, app developers will provide Liquid embed code for their applications (indicated by curly brackets {{}}). That code requires placement within the theme files to function, so the Existing Layout option would need to be used for the product page. 

We recommend contacting the developer of the application that you are embedding. They may be able to provide you with the code needed to embed their app into HTML.

You can learn more about how to make use of the HTML element here:

Shopify 2.0 Layout

The Shopify 2.0 Layout option is specifically designed for themes built on the Shopify 2.0 architecture. This layout allows product information to be drawn seamlessly from Shopify sections, similar to the Existing Layout. Additional customization can be made within Shogun to enhance your store’s functionality.

Liquid Code Limitations in Shogun

Shogun does not support Liquid code through its HTML element. However, if your Shogun plan includes custom elements, you can incorporate Liquid code within these custom elements to ensure compatibility.

Did this answer your question?