Overview

The Frontend Config package allow access to store configuration values, such as store name, id and many more.

📘 If you are using Storybook to develop Components and Sections to your store, and you need direct access to your store's configuration values, follow this guide on how to add frontend-config to your local environment setup.

Import

frontend-config is already pre-installed on every Shogun Frontend store. To import:

import getConfig from 'frontend-config'

Usage

import React from 'react'
import getConfig from 'frontend-config'

const config = getConfig()

const MyComponent = () => {
  console.log(config) // { publicRuntimeConfig: {...}, serverRuntimeConfig: {} }
  
  return (
    <p>
      Welcome to {config.publicRuntimeConfig.storeName} store!
    </p>
  )
}

export default MyComponent

Output

name	example value	internal property	description
`storeName`	My Store	No	Can be changed from site settings https://frontend.getshogun.com/STORE_ID/settings?tab=general
`storeToken`	"4bd78b8f6fb62584670d24dcf4b52afc"	No	Shopify only. Storefront API public token only available for Shopify stores, usually set during site setup.
`storePlatform`	"shopify"	No	"shopify" \| "big_commerce"
`storeDomain`	"new.my-store.com"	No	Shogun Frontend store domain. Value can only be changed by Shogun.
`storePlatformDomain`	"my-store.myshopify.com"	No	Usually set on store setup.
`storePlatformPublicDomain`	"my-store.com"	No	Main custom domain on which users are accessing store. Value can only be changed by Shogun. If this value is not set on Shopify checkout will be on my-store.myshopify.com//checkouts , instead of my-store.com//checkouts
`storeId`	"65737a4b-ac95-43d9-91fe-994188b17c9c"	Yes	⚠️ Internal property that should be only used for debugging. Property name and value might change in the future.
`storePlatformApiType`	"graphql"	Yes	⚠️ Internal property that should be only used for debugging. Property name and value might change in the future.
`releaseVersion`	23	Yes	⚠️ Only available in live/production store and not in Live preview ⚠️ Internal property that should be only used for debugging. Property name and value might change in the future.
`storeSharedCheckoutDomain`	`[]`	Yes	Shopify only. ⚠️ Only available in live/production store and not in Live preview.

Page Builder for Frontend

Frontend Checkout Cart v3

Frontend Customer

useStore

Adding frontend-config locally