Configuring Clay

Configuration of Clay is done through the shop.config.ts file. Alternatively, environment variables can be used for this purpose. In some situations, such as when using the Netlify quick build pipeline, environment variables are the only method available for Clay configuration.

The shop.config.ts file is a strongly-typed TypeScript file. If you have TypeScript integration enabled in your text editor, it may provide contextual hints during the file editing process.

NOTE

Each time you modify the config file, you must re-fetch the shop data by executing: npm run fetch-data.

Config File Field Reference

Config File Field Descriptions

• shopID

  The ID for the Lana shop. This is a required field.

  It can be set using the environment variable CLAY_SHOP_ID.

• opts

  These are the options applied to all GraphQL queries.

  This field is primarily for internal use. The default settings are suitable for most users.

  Note

  This field cannot be configured using environment variables.

• cdn

  The address of the CDN hosting. It defaults to https://cdn.lana.dev.

  It can be set using the environment variable CLAY_CDN.

  This field is primarily for internal use. The default settings are suitable for most users.

• beacon

  The address of the beacon endpoint for analytics. It defaults to https://api.lana.dev/i.

  It can be set using the environment variable CLAY_BEACON.

  This field is primarily for internal use. The default settings are suitable for most users.

• siteUrl

  The URL where the shop website will be hosted. It's used for canonical URLs in the pages' metadata.

  It can be set using the environment variables CLAY_SITE_URL or URL.

• staticData

  If set to true, Clay will pre-fetch all products for each category and arrange this data for use at build time. As a result, category product filtering and sorting will be performed on the client-side. This provides a better user experience but is only suitable for shops with a small number of products. Consider this option if your shop has less than 5000 products in total.

  It can be set using the environment variable CLAY_STATIC_DATA (a non-empty string equates to true; an empty string equates to false).

• topBarMenuHandle

  The handle of the menu to be used as the top bar.

  It can be set using the environment variable CLAY_TOP_BAR_MENU_HANDLE.

  See also: Menus

• megaMenuHandle

  The handle of the menu to be used as the mega menu.

  It can be set using the environment variable CLAY_MEGA_MENU_HANDLE.

  See also: Menus, Content Models > Mega Menu

• footerMenuHandle

  The handle of the menu to be used for the footer navigation.

  It can be set using the environment variable CLAY_FOOTER_MENU_HANDLE.

  See also: Menus, Content Models > Footer Menu

• footerExtraMenuHandle

  The handle of the menu to be used for additional items in the footer.

  It can be set using the environment variable CLAY_FOOTER_EXTRA_MENU_HANDLE.

  See also: Menus

• homePageContentBlockHandle

  The handle of the content block that describes the content of the home page.

  It can be set using the environment variable CLAY_HOME_PAGE_CONTENT_BLOCK_HANDLE.

  See also: Custom Fields, Content Models > Home Page

• searchPageContentBlockHandle

  The handle of the content block that describes the content of the search page.

  It can be set using the environment variable CLAY_SEARCH_PAGE_CONTENT_BLOCK_HANDLE.

  See also: Custom Fields, Content Models > Search Page

• productPageContentBlockHandle

  The handle of the content block that describes the content of the product page.

  It can be set using the environment variable CLAY_PRODUCT_PAGE_CONTENT_BLOCK_HANDLE.

  See also: Custom Fields, Content Models > Product Page

• cartContentBlockHandle

  The handle of the content block that describes the content of the cart element.

  It can be set using the environment variable CLAY_CART_CONTENT_BLOCK_HANDLE.

  See also: Custom Fields, Content Models > Cart