Vtex Integration

Overview

In the following guide, we will present the best way to integrate your store in Vtex with our platform.

What can you do with this integration?

  • Add your orders faster in your Shippify Dash.
  • Get complete control of your deliveries.

Configure Vtex Integration

This guide contains three simple steps:

  1. Registering Shippify as a Shipping/Carrier Option
  2. Adding fares to show to your clients
  3. Adding the Widget in your checkout process

1) Registering to Shippify like a Shipping option

You have two options to register shippify as a "Transportadora" or carrier on VTEX:

  1. You need to access to https://.vtexcommercestable.com.br/admin/logistics/#/dashboard
  2. Click in "CREATE A NEW TRANSPORTADORA".
  3. Fill the fields like the example above.

Note: In this form, you can see a section to upload a file with the fares to the clients on your store. This file can be provide by your shippify manager.
If you need to help to get this file then you can contact us in engineering@shippify.co

Using the Shippify Rest API

This option is documented here.

2) Adding fares to show to your clients

If you registed shippify from the VTEX dashboard and you uploaded the file provided by the shippify team with the fares and zipcode for your city then you don't need to do anything in this step.

If you need to edit or add the fares, you can do it in the following ways:

3) Adding the Widget in your store

For this step, you need to have a google tagmanager account. Currently, this is the only way available to add the shippify script tags in the checkout process in order to collect the customer's information. This is the information that the customer fill in the form that vtex provide by default called SmartCheckout.

If you already have a google tagmanager account, then you can follow with the next step and add the next script with this preferences explained in the next lines.

What do you need to know to complete this integration?

  • You have to know your store name in Vtex.
  • You have to know your credentials in Shippify.
  • You have to know your credentials in Vtex like an email and password.
  • You have to specific your language like "es" to Spanish, pt to Portuguese and en to English.

For your operation range you need to know the next things.

  • You have to specific your country code. For example to Brazil "BRA". You can search your country in this list.
  • If you need to operate on all a state or more than one then you can define these. For example, Brazil, Saõ Paulo then you can put in states "SP" else you can delete this variable.
  • If you need to operate only in determinate cities then you can define this.

For your company in Shippify, you need to know the next things:

  • You have to know your company id provided by Shippify.
  • You need to define your email like a sender to send the tracking email to the clients.
  • You need to define the subject to show the clients with the tracking email.

The parameters you need to know the calculate your prices and the vehicle for your deliveries are the next:

  • If you are in a city with poor accurate in zipcode inside the vtex then you need to enable the map inside the checkout form.
  • You have your inventary in vtex with the correct dimensions in centimeters to get your correct price and correct vehicle. If you dont have the correct size then you can talk with your manager account in shippify to solve it or you can write us to engineering@shippify.co
    • You have to know your warehouse by default where you want the pickup from the shipper.

When you know all these things then you can add the next script tag in google tagmanager with a trigger for the all pages, because the widget needs to know the current page itself. This widget only collect information from the delivery in the checkout and this not edit nothing in the checkout.

When you added this widget then the integration should be completed. Congratulations.

<script>
  //Basic Configuration
  var API_URL = "https://admin.shippify.co"; //Url provided by shippify.
  var API_URL_SKU = "{{storeName}}.vtexcommercestable.com.br/api/catalog_system/pvt/sku/stockkeepingunitbyid/";
  var RESOURCE_URL = "https://cdn.shippify.co/service"; 
  var SHIPPING_NAME=["shippify"];
  var API_ID = "{{Shippify Credential}}";
  var API_TOKEN = "{{Shippify Credential}}";
  var X_VTEX_API_APPKEY = "{{Vtex Credential}}";
  var X_VTEX_API_APPTOKEN = "{{Vtex Credential}}";
  var PAGE_LANG = "pt";

  //Configuration to define operation range
  var COUNTRIES=["BRA"];
  var STATES=[{{State Codes}}];
  var CITIES=[{{City Name}}];

  //Configuration to define your company.
  var COMPANY_ID = {{Your Company Id in Shippify}};
  var COMPANY_EMAIL="{{Your email like a sender to send the tracking email to the clients}}";
  var COMPANY_SUBJECT="{{A subject to show to the clients with the tracking email}}";

  //Calcutation and more
  var ENABLE_MAP = {{true|false}};//To enable or disable the map in the form to the clients in the checkout(Recomended to the cities with poor accurate in the zip codes from Vtex).
  var AVAILABLE_DIMENSIONS = ["height","length","width"];// Dimensions inside the vtex from your package to calculate the vehicle for the shipping.
  var SIZE_FOR_DIMENSIONS = [50,80,120,150,200]; //Estimate dimensions for the package to match in an particular capacity, This is in centimeters. For example, for XS=50cmts, S=80cmts, M=120mts, L=150cmts, XL=200cmts, For example, a package with size 20x20x20 is a XS, because if this package fits in an imaginary box of 50x50x50 then the capacity for this delivery is XS.
  var RADIO_DIMENTION = 10;//Dimension threshold to fits in a capacity.
  var PICKUP_DEFAULT = ["São Paulo","-23.6548036","-46.759461"]; //Pickup by default.
  var DELIVERY_DEFAULT = ["São Paulo","-23.6548036","-46.759461"]; //Delivery point by default. Important for the map.
  var MAX_DISTANCE = 199;// Maximum distance between pickup location and delivery location. In the shippify backend this distance is maximum 200 kilometers. Warning: If you specify  more than 200km then you delievy can't be create the delivery in Shippify.
  var PRODUCTS=[];// Array of product by default. For custom integrations.

</script>
<script src="https://api.shippify.co/vtex/widget.js"></script>

If you need to help with some parameter then you can contact us engineering@shippify.co

results matching ""

    No results matching ""