Picture of Infigo's Shopify App | CI_Shopify_001

Infigo's Shopify App | CI_Shopify_001

Overview

The purpose of our Shopify App is to provide an embedded Infigo editor experience on an existing Shopify Store. Through our custom built app we make this a quick and easy process.

Below we cover everything that the app supports and the steps to install and configure the app so that you can get up and running, providing your end users with the flexibility and power of MegaEdit on your Shopify Store.

Installation

The Shopify app currently is not listed on the public app store of Shopify. Instead, we will create a custom app for you and will create an installation link specifically for your store. Please raise a ticket with the Shopify link we would connect to.

The app will modify some theme files to inject the editor experience to the frontend. Currently, the app supports only liquid based themes. If your theme is liquid based, the installation takes care of any necessary steps. If you have a json based theme, please inform our support after installation and provide login details with sufficient rights to edit the theme so the necessary adjustments can be made for you.

Once the link has been provided, log onto Shopify with an administration account with permissions to install external apps and open the link. A summary of the installation is shown and via one click, the app installs for your store.

The Infigo app will show up under the Apps section on the left hand menu:

Setup

Infigo Setup

  • Go to General Settings

    • Set Configure the Cookie Same Site mode to use to ‘None'

    • Set iFrame protection to ‘External Editor’

Shopify Setup

On the integration area, there are three tabs:

  • API Settings

    • Infigo Config

      • Infigo Domain - setup the Infigo storefront URL. This need to contains binding to point to the right storefront.

      • Infigo Token - setup the API token for that storefront.

      • Delivery Method - setup an existing shipping method on that storefront.

      • Test Connection - this button can be used to test connection with the Infigo. In this way you can check if the Infigo Domain and the Infigo Token are correct. Under the hood this will call Infigo and connection will be considered as successful if no exception was thrown during this process.

      • Sync Products NOW - this button can be used to sync the Infigo products. Sync in this case means that:
        1. Products that are present on the integration area, but do not exist in Infigo will be removed.
        2. Newly added products in Infigo that do not exist in the integration will be added.
        3. Products that are present on the integration area and exist in Infigo will be updated.
        There is a job that runs automatically every day at 00:00 UTC to sync the products, but this can also be triggered whenever you want by clicking this button.

    • Shopify Product Page Config

Button Selector - setup the HTML class of the ‘Add to cart’ Shopify button for the Infigo products to work properly.

 
 
 

      • Product Page Button Text - setup with the text you want to be displayed for this button.

         
         

 

      • Product Quantity Selector

    • Shopify Cart Page Config

      • Edit Button Text - setup with the text you want to be displayed for the edit button in the ‘You cart’ Shopify page.

         
         

    • Shopify General Config

      • Custom CSS - you can add here your custom CSS.

      • Disable elements selector - setup the HTML class of the ‘Buy it now’ Shopify button. Thus, products that are linked with Infigo products will disable this button, so the end user will not be able to buy this product without configuring it the way he wants.

         
         
         

      • Create orders without payment in Infigo - this will create orders in Infigo regardless of whether the orders were paid in Shopify.

  • Products

    • Link - this button allows you to link Shopify products to the specific Infigo products. You can link multiple Shopify products to a single Infigo product, but the same Shopify product can not be linked to multiple Infigo products.

    • Clear Link - this button unlinks all the Shopify products that were linked to that Infigo product

  • Orders

    • You can see any order placed along with some additional information like Shopify Id and Infigo Id.

    • If there was a problem placing the order (e.g. unknown shipping method), a retry button allows to push the order into Infigo again.

       

Supported things

Products

At the moment, we support only MegaEdit Full Editor products.

The following products are NOT supported:

  • MegaEdit UI

  • Infigo Editor

  • Multipart (will be added in the future)

  • Static PDF

  • Stock

  • Custom

 

We support the following product mappings between Infigo and Shopify:

  • Infigo product → Shopify products

  • Infigo product → Shopify variations

Attribute mapping from Infigo to Shopify and vice versa can be done only via MegaEdit scripts.

 

The app does NOT sync:

  • Any product options to Infigo for the editor or ordering process.

  • Any checkout options to Infigo for the ordering process.

Delivery methods

At the moment, we support only one Delivery Method. Provided Delivery Method in the integration’s API Settings tab should be a valid Delivery Method name from Infigo.

Plugins

We cannot guarantee seamless compatibility with all external plugins in Shopify, including custom plugins. If any custom plugins are used, please confirm with Infigo to determine whether they may impact the integration.

Others

Cross Domain - when embedding our editor in your third party software, as we use an iframe approach, it is important that you ensure the domain of the Infigo website hosting your editor and products is the same as your third party site domain.

E.g.

Shopify domain - www.myshopifystore.com

Infigo domain - www.editor.myshopifystore.com

 

Incomplete
Alternate Search Terms

Individual Search Words:
embedded, integration, configuration, synchronization, liquid, custom, tokens, plugins, mapping, iFrame

Alternate Search Phrases:
Shopify product synchronization, app installation steps, custom app integration, linking Infigo products, API configuration settings, editor iframe setup, syncing Infigo and Shopify, custom CSS in Shopify, shipping method configuration, external plugin compatibility