Product documentation and training for Shipcode.
Adding Your Shopify Data
Connect your Shipcode project to your Shopify store's data.

Connecting your Shipcode project to your Shopify store's data is the critical first step to ensuring your landing page reflects your live products and collections.

Step 1: Create and Name Your Project

  1. In the Project Dashboard, click + New Project.
  2. Give your project a name in the Project Name field.
  3. Select the Shopify Landing Page template.
  4. Click Create Project.

 

Step 2: Bypass the Initial Data Configuration Screen

Leave these blank!

 

After creating the project, a pop-up modal will prompt you to configure your data environment. The first screen in this workflow presents configuration fields that are not required for the landing page template.

 

These fields would allow you to engage in more advanced activities in Shipcode, for simplicity, you may leave all fields blank and click Next.

Optional Shopify Fields (you can leave these blank)

For your awareness, the optional fields presented on this screen are defined as:

  • shopifyEndpoint: Used for advanced scenarios involving GraphQL API routing.
  • shopifyAccountEndpoint: Used for connecting to customer-specific endpoints of the Shopify API (e.g., customer login/account data).
  • shopifyAccessToken: This is a private access token typically used for server-side or administrative operations.

Step 3: Configure Your Essential Storefront API Credentials

The second screen in the modal has fields that are required.

Required Storefront API Credentials

  • storeFrontApiUrl: The unique URL endpoint for your Shopify store's GraphQL Storefront API. This is the destination your project sends requests to when it needs live data.
  • storeFrontApiToken: The public access token generated by Shopify that allows client-side applications (like your Shipcode project) to safely fetch product, collection, and other public storefront data. This token grants read-only access to your store's data via the Storefront API.

Locating Your Shopify API Credentials

Locating Your storeFrontApiToken

The Storefront API Token is your permission key that allows your Shipcode project to read your store's public data.

  1. In your Shopify Account, go to Settings $\to$ Apps and Sales Channels.
  2. Click on the Headless sales channel (you may need to install it first).
    1. You can also search "Headless" in your search bar.
  3. Click into your storefront.
  4. Copy the Storefront API Access Token.

 

Constructing Your storeFrontApiUrl

The API URL is built manually using your store's domain and the desired API version.

  • Format: https://your-store-name.myshopify.com/api/[API-VERSION]/graphql.json
  • Replace:
    • your-store-name with your Shopify store’s myshopify.com subdomain.
    • [API-VERSION] with the current supported API version (e.g., 2025-04).

 

It may take a several minutes for your project to load. This is a great opportunity to read ahead on next steps, fill up your water bottle, or get a snack!

 

Did this answer your question?