Library Components allow you to accelerate your Shipcode build by integrating pre-configured, ready-to-use component sets from external projects and data sources. As you integrate more third-party services, this functionality allows you to pull in specialized UI elements that are already connected to that data source.

Currently, the Shopify Starter Kit Components are the primary example of a Library Component set, providing responsive elements connected to the Shopify backend.

Key Characteristics

• Responsiveness: All Library Components are responsive and work across all device sizes.
• External Sourcing: Components originate from an external project or integration library.

💡💡💡 Tip 💡💡💡

If you need to control the main component across your project, Shipcode recommends detaching the Component and creating a new main component that you can fully customize, control, and reuse.

Setup: Connecting to External Data

To ensure Library Components work as expected, you must install the component library and configure your external data source using Project Settings.

1. Install the Library

1. Open your project in Shipcode.
2. Navigate to Project Settings by clicking the Settings link in the Header.
3. In the left-hand navigation, navigate to Marketplace.
4. Scroll down and select the Shopify Template Library.
5. Click the Install App button in the top right to open the configuration modal.

2. Configure Your Environment Data

To install the library, you must enter required values in the App Configuration modal. You must enter values for draft, staging, and production environments.

• Storefront API URL
• Storefront API Token

💡💡💡 Tip 💡💡💡

You can use the same data for all environments or enter unique data for each if available.

After entering the values, click the Install App button to finish the configuration.

Locating Your Shopify API Credentials

• Storefront API URL: This URL is constructed manually using your store’s domain and the API version you are using.
• • Example Format: https://[your-store-name].myshopify.com/api/[2025-04]/graphql.json
• Storefront API Token:
• 1. In your Shopify Admin, go to Settings → Apps and Sales Channels.
  2. Click on the Headless sales channel (install it if necessary).
  3. Click into your storefront.
  4. Copy the Storefront API Access Token.

📍📍📍 Note 📍📍📍

Some components may require additional setup steps directly in your Shopify store to function correctly. These are detailed in the Shopify Prerequisites section for each component.