Storefront Setup: Connecting Shopify and Pack

You can watch the video below to learn how to set up your Storefront in Pack and link your Shopify store to Pack.

Creating a Custom App for Your Pack Account

To create a new storefront in Pack, link your Shopify store to Pack by creating and installing a Custom App in Shopify.

Steps to Create and Install a Custom App:

1. From your Shopify admin, click Settings > Apps and sales channels.
2. Click Develop apps.
3. Click Create an app.
4. Enter the App name and select an App developer in the modal window.
5. Click Create app.

Configuring Your Custom App Permissions

To ensure Pack functions correctly, configure the following API scopes:

Admin API Scopes

Pack uses these scopes to synchronize and manage your store's products and assets.

Steps to Configure Admin API Scopes:

1. In your Custom App, navigate to Configuration.
2. Click Configure Admin API integration.
3. Configure the following properties:
   • Files: write_files, read_files
   • Metaobject definitions: write_metaobject_definitions, read_metaobject_definitions
   • Metaobject entries: write_metaobject, read_metaobjects
   • Products: read_products
   • Shopify Markets (optional): read_markets, write_markets
   • Store content: read_content
4. Verify all required scopes are selected and click Save.

Storefront API Scopes

These scopes are necessary for the Shopify Storefront API features, such as Metaobjects, Cart, Customer Account, and Market.

Steps to Configure Storefront API Scopes:

1. In your Custom App, navigate to Configuration.
2. Click Configure Storefront API integration.
3. Configure the following properties:
   • Metaobject entries: unauthenticated_read_metaobjects
   • Customers: Select all scopes
4. Verify all required scopes are selected and click Save.

Installing Your Custom App and Obtaining API Keys

After configuring your API scopes, install the custom app on your Shopify store to obtain your API keys.

Steps to Install Custom App and Obtain API Keys:

1. Click Install app.
2. In the modal window, click Install.
3. Navigate to API Credentials.
4. Note down the Admin API access token and Storefront API access token.
5. Remember, the Admin API access token is displayed only once.

Linking Your Shopify Store to Pack

After installing your Custom App in Shopify, create your new Storefront in Pack Admin.

Steps to Link Shopify Store to Pack:

1. Navigate to Pack Admin, click on your current instance, and select Create new instance.
2. Select 'Create a storefront', name your storefront, and click next.
3. Enter your shop URL your-store.myshopify.com.
4. Paste your Admin API access token.
5. Paste your Storefront API access token.
6. Click Connect and wait for confirmation.
7. After confirmation, click Success, Continue to continue setting up your Storefront.

Preparing Your GitHub Repository

You will be prompted to connect your GitHub repository to Pack.

Steps to Connect GitHub Repository:

1. Click Connect.
2. Create a repository and name it.
3. Click Create.
4. Click Success, Continue to proceed.

Setting Up Your Hydrogen Storefront

The final step is to create a new Hydrogen storefront on Shopify.

Steps to Set Up Hydrogen Storefront:

1. Navigate to Shopify Admin and ensure you have the Hydrogen sales channel installed.
2. Click Hydrogen.
3. Click Create storefront.
4. Name your storefront.
5. Select the repository you created in the previous step.
6. Click Create. This may take a moment.

7. Click Storefront Settings > Environment and Variables, and copy your Pack environment variables.
   • Click on Add variable in Custom Variables section: Add the key, value, and select all environments. Click Save.
   • Repeat this step for all variables shown in Pack.

8. Navigate to your GitHub repository and merge the pull request created by Shopify.
9. Once deployment is complete, navigate back to Pack and click Continue.
10. In Your Storefront Details, paste the following:
    • Public Storefront URL: Your Hydrogen Storefront URL. Navigate to your Hydrogen Store > Storefront Settings > Environment and Variables > Production, set the URL as public, and click Save.

      
    • Storefront ID: Your Hydrogen Storefront ID. Find it in the URL bar of your Hydrogen Storefront right after the hydrogen/ part of the URL.
11. Click Done, Continue to finish the setup.

Hydrogen Storefront Required Scopes

All permissions except 'Gates' are required for the Hydrogen Storefront API. Ensure unauthenticated_read_customer_tags is selected for the Customer Accounts experience.

Steps to Configure Hydrogen Storefront Permissions:

1. Navigate to Shopify Admin > Sales Channels > Hydrogen.
2. Click on your Hydrogen Storefront.
3. Click Storefront Settings.
4. Click Storefront API or Customer Account API to configure the permissions.

Environment Variables

To edit your Hydrogen Storefront environment variables, follow these steps:

1. Navigate to Shopify Admin > Sales Channels > Hydrogen.
2. Click on your Hydrogen Storefront.
3. Click Storefront Settings.
4. Click Environments and Variables.

GTM Setup

To add your Google Tag Manager (GTM) container ID to your Hydrogen Storefront, follow these steps:

1. Navigate to Shopify Admin > Sales Channels > Hydrogen.
2. Click on your Hydrogen Storefront.
3. Click Storefront Settings.
4. Click Environments and Variables.
5. Click Add Variable:
   • Key: PUBLIC_GTM_CONTAINER_ID
   • Value: GTM-XXXXXXX
   • Environments: Select all available.
6. Click Save.

Redirecting Traffic to Your Hydrogen Storefront

When your Hydrogen storefront is ready to be set as the primary, public storefront, you'll need to redirect traffic from the online store to your Hydrogen storefront.

Steps to Set Hydrogen Storefront as Primary:

For detailed guidance, refer to the Shopify documentation:

Redirect traffic to the Hydrogen storefront

This will ensure your Hydrogen storefront becomes the main entry point for your customers.