Storefront Setup

Creating Custom App for your Pack Account

To create a new Storefront in Pack, you need to link your Shopify store to Pack. This is done by creating a Custom App in your Shopify store and linking it to your Pack storefront. After enabling Custom Apps in your store, create and install the Custom App:

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. In the modal window, enter the App name and select an App developer.
5. Click Create app.

Configuring Your Custom App Permissions

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

Admin API Scopes

Pack will use 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 scopes are selected and click Save.

Storefront API Scopes

Necessary for the Shopify Storefront API's 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
   • Read and modify customer details: unauthenticated_read_customer_tags (required for Customer Accounts experience)
4. Verify all scopes are selected and click Save.

Installing Your Custom App to Shopify and Obtaining API Keys

After configuring your API scopes, the next step is to install the custom app on your Shopify store to acquire your API keys.

 

Steps to Install Custom App and Obtain API Keys:

1. Click Install app.
2. Inside 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

Once you have successfully installed your new Custom App in Shopify, continue with creating your new Storefront inside Pack Admin.

Steps to Link Shopify Store to Pack:

1. Navigate to Pack Admin, click on your Storefront and select Create Storefront.
2. Name your Storefront and click next to continue linking your Shopify Store.
3. Navigate back to Pack where you started creating your new Storefront.
4. Enter your shop URL your-store.myshopify.com.
5. Paste in your Admin API access token.
6. Paste in your Storefront API access token.
7. Click Connect and wait for confirmation.
8. After confirmation, click Enter Storefront to continue to your Pack dashboard.

All permissions but 'Gates' are required for the Hydrogen Storefront API.
Please ensure unauthenticated_read_customer_tags is selected for the Customer Accounts experience.

To configure the permissions in your Hydrogen Storefront, follow the steps below:

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

To edit your Hydrogen Storefront environment variables, follow the steps below:

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

GTM Setup

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

1. Navigate to Shopify Admin > Sales Channels > Hydrogen
2. Click on your Hydrogen Storefront
3. Click on Storefront Settings
4. Click on Environments and Variables
5. Click on 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 store 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 Store as Primary:

For detailed guidance on redirecting traffic to your Hydrogen storefront, refer to the Shopify documentation:

Redirect traffic to the Hydrogen storefront

This process will help ensure that your Hydrogen storefront serves as the main entry point for your customers.