Shopify

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:

Install 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 in your Shopify shop.
2. After the Shopgate App is installed, the pop-up 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.
   
   
   
3. You will now be redirected to your Shopify shop's backend. Click the big blue button labeled  Install Shopgate - Mobile Commerce for Shopify .
   
   
   
   
4. A big green "Hooray!" screen will open, indicating that 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.

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! Welcome to the mobile world!
Sync order 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 labeled  Webhooks ,  then Create a webhook .

To sync Fulfillment Status. To sync Cancellation 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 this 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 .

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 this 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 .

Activate your mobile website

To redirect mobile visitors to your mobile website, a few lines of code 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  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 it exists, 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 = "
   
   
   _shopgate.redirect = "start"; 
   {% endless %} 
   {% 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.

Frequently Asked Questions

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.

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.

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:

Which additional payment information will I get when "Note Attribute" or "Note" is selected?

You will get additional information such as transaction ID, transaction token, and payer ID , among others.  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 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.