Support Center

Connecting to Shopify

Follow

 

   

 

Shopgate supports Shopify as a shopping cart system.

By setting up the Shopgate App for your Shopify shop, you will get these wonderful features straight into your app and mobile website:

Supported Version Import to Shopify

All Shopify versions

  Orders
Sync Export to Shopgate Mobile Shop

Delivery Status "Shipped"
Order Status "Canceled"
Stock Quantity, on Product Detail Page

*
**

Products
Categories
Reviews



Customer Account Validate, upon Cart Changes

Login with Desktop Shop Account
Login to Desktop Shop with Mobile Account
Customer Groups / Tier Pricing
Show Desktop Orders on Mobile



✘ / ✘

Coupon
Shipping Method
Payment Method
Product Availability

***


Supported Payments Notes
Authorize.net * Delivery status can be synced after Webhook "Order fulfillment" is added.
** Cancellation status can be synced after Webhook "Order cancellation" is added.
*** Coupons and taxes can be imported after access to your Shopify account is granted.

 

In this article, you will find everything you need to set up the Shopgate App for your Shopify shop.

 

Topics covered in this article:

  1. Installing the Shopgate App
  2. Syncing order fulfillment and cancellation status
  3. Activating your mobile website
  4. Frequently Asked Questions (FAQ)

 

1. Installing the Shopgate App

The Shopgate App for Shopify can be installed by your Shopgate Support member. To do this, please follow the steps below:

  1. Contact Shopgate Support to install the Shopgate app into your Shopify shop.
    Shopgate Support member, please use this link then click Get.
    Shopgate_Mobile_Commerce_for_Shopify.png

  2. After the Shopgate App is installed, a popup shown below will open in your Shopgate Admin. Enter your Shopify shop alias and the username and password of an account* from your Shopify shop. Click Connect.
    * Due to security reasons, Shopify requires special access to import your tax settings and coupon codes. Please enter an account with read access to your tax and coupon settings. This account can be one of your admin accounts or an account you created for Shopgate.
    connecting_to_shopify.png

  3. You will now be redirected to your Shopify shop's backend. Click the big blue button Install Shopgate - Mobile Commerce for Shopify.


  4. A big green Hooray page will open - now you have successfully connected your Shopify to the Shopgate technology. Continue to set up the Shopgate App by clicking Configure interface. This will take you back to your Shopgate Admin.


  5. Now you should see the progress bar running - this means that your apps and mobile website are being populated with your products! This process can take up to a few hours. Once the status bar is gone, your mobile shop is ready to go! Now welcome to the mobile world :)

 

 

2. Syncing order fulfillment and cancellation status

 

To sync order fulfillment and cancellation status from Shopify to Shopgate, create a webhook for each:

  1. In your Shopify backend, go to Settings > Notifications.
  2. Find the section Webhooks then Create a webhook.

To sync Fulfillment Status

With this webhook connection, the status of your orders will be updated on the Order Details page at Shopgate automatically.

  1. Select "Order fulfillment" as the Event, JSON as Format, and enter URL: 
    https://api.shopgate.com/shopify/$customerNo./$shopNo./$apiKey
  2. Replace $customerNo., $shopNo., and $apiKey with your Shopgate customer number, shop number, and API key.
    ☞ Where can I find my shop number, customer number and API key?
  3. Click Save webhook.

 

To sync Cancellation Status

With this webhook connection, an order that is canceled in your Shopify backend will show the canceled status on the Order Details > Cancel & Refund page at Shopgate.

Please allow up to 24 hours for this configuration to take effect.

  1. Select "Order cancellation" as event, JSON as format, and enter URL: 
    https://api.shopgate.com/shopify/$customerNo./$shopNo./$apiKey
  2. Replace $customerNo., $shopNo., and $apiKey with your Shopgate customer number, shop number, and API key.
    ☞ Where can I find my shop number, customer number and API key?
  3. Click Save webhook.

 

 

 

3. Activating your mobile website

To redirect mobile visitors to your mobile website, a few lines of codes need to be added to your layout file. Follow the steps below to do so.

  1. In your Shopify backend navigate to Online Store > Themes, and click Edit HTML/CSS.
  2. Under the Layouts folder, click on theme.liquid to open the layout file you need to modify. Copy the JavaScript code below and paste it right above the </head> in the layout file.
    IMPORTANT: Do NOT delete any existing code from Shopify in the file. Overwrite the old JavaScript code from Shopgate, if existed, with the code below.
  3. Replace XXXXXXX (line 4) with your shop number at Shopgate and click Save. Where can I find my shop number?
    <!-- BEGIN SHOPGATE MOBILE HEADER CODE -->
    <script type="text/javascript">
    var _shopgate = new Object();
    _shopgate.shop_number = "XXXXX";

    {% if template == 'index' %}
    _shopgate.redirect = "start";
    {% elsif template == 'search' %}
    _shopgate.redirect = 'search';
    _shopgate.search_query = '{{ search.terms }}';
    {% elsif product.id %}
    _shopgate.redirect = "item";
    _shopgate.item_number = "{{ product.id }}";
    {% elsif collection.handle and collection.handle != 'all' and collection.handle != 'frontpage' %}
    _shopgate.redirect = "category";
    _shopgate.category_number = "{{ collection.handle }}";
    {% else %}
    {% unless page or blog %}
    _shopgate.redirect = "start";
    {% endunless %}
    {% endif %}

    if (_shopgate.redirect) {
    _shopgate.host = (("https:" == document.location.protocol) ? "https://static-ssl.shopgate.com" : "http://static.shopgate.com");
    document.write(unescape(
    "%3Cscript src='" + _shopgate.host + "/mobile_header/" + _shopgate.shop_number + ".js' type='text/javascript' %3E%3C/script%3E"
    ));
    }
    </script>
    <!-- END SHOPGATE MOBILE HEADER CODE -->

Now your mobile website will be successfully forwarded.

 

 

4. Frequently Asked Questions (FAQ)

4.1 Why does a banner say "This app is unpublished and unsupported"?

The Shopgate App is shown as "unsupported" by Shopify because it's using the Shopgate-integrated payment methods. We are doing this so that you will NOT pay extra fees to Shopify.

The Shopgate App is, as always, maintained and developed continuously by Shopgate as part of our mobile commerce solution.

 

4.2 How can I update an existing Shopgate app?

You do not need to update an existing Shopgate app - we will update the app automatically for you.

 

4.3 How can I update my Shopify account or other settings at Shopgate?

You can access your Shopify account and the other settings in your Shopgate Admin by going to  Integration > Install Interface and then Actions > Edit on your Shopify shop entry.

To update the Shopify account which gives access to taxes and coupons, enter the new username and password below.

 

To help you understand the settings, we provide the table here:

When should the order be transmitted?

Select when do you want to see your mobile orders in your Shopify:

  • Directly after the order is placed (recommended) | you will see your order immediately
  • After shipping is approved
Debug Enable this option for debugging purposes only.
Advanced error logging Enabling this option will STOP all import and export activities when an error occurs. Use this option for debugging purposes only. Make sure you turn this option OFF after the debugging process.
Username & Password

Enter a Shopify account here so your mobile shop can access the tax and coupon settings.

This account can be one of your admin accounts or an account you created for Shopgate. Make sure to give read access to coupon codes and tax settings to this account.

Import order payment info as

Select if you want to see additional payment information of an order on your Shopify's Order page: 

 

4.4 What additional payment info do I get when "Note Attribute" or "Note" is selected?

You will get additional information such as transaction ID, transaction token, payer ID, etc. if you select to import payment info as "Note Attribute" or "Note". This data will be shown on the Order's detail page in your Shopify Admin.

  • The option "Note Attribute" is recommended, as it will add additional payment data as Additional details on an Order page.
  • The option "Note", however, will add the same additional data to as a comment on an Order page.

 

The screenshot below shows how the additional payment data looks like when the "Note Attribute" option is selected.

 

 

 

 

Comments