Last updated

Shop Config

In the root folder of your shop there is a file called shop.config.js, view file for exact types, that contains options for different features that are built in by default. Editing the values in this file allows you to customize a lot of how your shop works.

Add the following to get a typed version of the config:

`/** @type {import('@jetshop/core/components/ConfigProvider').BootOptions} */`
const config = {
  ...
}

export default config
KeyTypeDescription
themeobjectPasses the theming variables to the internals of the framework. This is used e.g. in the Image component to make sure to use the correct breakpoints etc. You shouldn't have to touch this.
apolloConfigobjectSee Apollo Config
trackingID (DEPRECATED)stringDefault Google Analytics tracking ID to use. If the value is set in the Jetshop Admin, that will override this value
additionalGtagTrackingIdsstring[]Additional tracking IDs to use for gtag. Supported services: Google Ads, Display & Video 360, Search Ads 360 and Campaign Manager
tagManagerID (DEPRECATED)stringDefault Google Tag Manager container ID to use. If the value is set in the Jetshop Admin, that will override this value
ga4 (DEPRECATED)booleanGoogle Analytics 4 is opt-in. Set this to true to make gtag track using GA4 instead of Universal Analytics
relewareEnabledbooleanEnable Releware tracking
sentryobjectRead about Error logging
intlobjectSee Intl
disableGeoRedirectbooleanThe default behaviour is to redirect users to the appropriate user based on their IP address. Setting this to true disables that behaviour.
singleDomainModebooleanIn this mode all channels will be under the same domain but prefixed with the channel name when changing channels. E.g. the default channel will be http://www.my-shop.com/ and the Sweden channel will be under http://www.my-shop.com/SE/ as opposed to http://www.my-shop.se when this is disabled.
schemaExtensionsExtensions[]Read about Integrating External APIs
preserveRedirectbooleanTry to navigate to the same route in the new channel when changing channels
structuredDataobjectRead about Structured data
openGraphobjectRead about Open Graph
trackersTrackers[]See Custom Tracking
serverTrackers[]See Server Side Tracking
googleMapsApiKeystringUsed in to render a map in the Store locator
loginPathstringUsers are redirected to this route if they try to reach a page that requires authentication without being signed in
pathsWithNoAuthRequiredstring[]If a channel is configured to require the user to be authenticated, these are the only routes you can access without being signed in
preloadobjectSee Preload
brandCustomFieldstringSets which of a product's custom field should be considered a brand (defaults to "brand"). This primarily affects tracking and open graph. To access a product's brand field specifically, use the getBrand function (available in @jetshop/core/components/OpenGraph/OpenGraphProductData) along with the configuration value, e.g getBrand(product, config.brandCustomField)
usePrimaryRouteForProductsbooleanSet to true if you wish to use product.primaryRoute.path as product link from category instead of current category. Defaults to false.
useTrackingConsentAPIbooleanSet to true if you wish to use Google consent mode. Defaults to false in early 5.15.x versions. Read more.
useIndefinitelySavedCartbooleanSet to true if you wish to use saved carts on logged in customers. Available from 6.1.0, defaults to false. Read more.
usePolyfillingbooleanSet to true if you wish to use polyfills before booting shop. Available from 6.2.0, defaults to false. Read more.

apolloConfig

This configuration object tells Apollo where and how to fetch our data. Usually you just need to change the shopid to the proper value to be up and running.

KeyTypeDescription
shopidstringWhich shopid to use when querying the API
graphQLURIstringThe URL to the StoreAPI. This should not be changed.
tokenstringToken used to authenticate with the API. Should not be mistaken with the Authorization header which is used to get data for a specific user when the user has signed in.
channelsQueryGraphQL queryThe query used to get all data on the channels which is used to get the localized information (currency, languages etc) as well as other things configured in the Norce Admin. Usually you don't have to touch this, but you might need to extend this query if there's additional data you're interested in.
useGraphQLProxyServerbooleanSet this to true to enable schema extensions. See Integrating External APIs
enableGateway (deprecated)booleanThe legacy way of Integrating External APIs.
engineApiKey (deprecated)stringThere used to be a feature called Apollo Engine which was used to get statistics for the queries run through Apollo. The official support for this was dropped in an earlier version.

intl

This object tells where to find translations and how to format numbers (mainly prices) in different locales.

KeyTypeDescription
translationsobjectAn object containing imports for all supported locales. Usually you don't need to touch this.
defaultLocalestringThe default language of the shop. This is used as a fallback if a translation string cannot be found in a particular language.
optionsobjectOverrides you want to pass to format-message, our translation utility. For a complete list of available options, see the format-message API docs for setup.

A common usecase is overriding the formatting function for price rendering. E.g. if you want to change the rendering of prices in swedish to show no fraction digits if there are no decimals, you can try out the following:

{
  intl: {
    options: {
      formats: {
        number: {
          SEK: {
            style: "currency",
            currency: "SEK",
            minimumFractionDigits: 0,
          }
        }
      }
    }
  }
}

The options are passed to Intl.NumberFormat, so read the MDN reference for more details.