DocsArchitecturetheme.config.js

theme.config.js

Just like props and blocks in sections, you can define some configuration values that you can use throughout the theme.

An example config

Here’s an example config

theme.config.js
import {Prop} from "builderoo";
 
export const themeConfig = {
  cardBorderRadius: Prop.number().default(12),
  showVendor: Prop.boolean().default(false)
}

In your React components, you can use useConfig hook to access these values.

sections/ProductGridSection.jsx
import {useConfig} from "builderoo"
 
export default function ProductGridSection(){
  const {cardBorderRadius, showVendor} = useConfig()
  return (
    <section className="section">
      {/* section content */}
    </section>
  )
};

You can also group some options together. For example, you can put logo image, it’s width and height under one config key like this:

theme.config.js
import {Prop} from "builderoo";
 
export const themeConfig = {
  "logo": {
    image: Prop.image().default("/images/logo.png"),
    width: Prop.number().default(100),
    height: Prop.number().default(60)
  },
  cardBorderRadius: Prop.number().default(12),
  showVendor: Prop.boolean().default(false)
}

You can access theme in the same way:

components/Header.jsx
import {useConfig} from "builderoo"
 
export default function Header(){
  const {logo} = useConfig()
  // Now `logo.image`, `logo.width` and `logo.height` have your values.
  return (
    <header>
      {/* header content */}
    </header>
  )
};
💡

Important: You must export the themeConfig object from this file.

Available types

You can use all Prop types that are available in the section schema definition except Prop.collection(), Prop.product(), Prop.post().

Special config options

name

Used to provide the name of the theme.

theme.config.js
export const name = "My Special Theme"

version

Used to provide the version string of the theme

theme.config.js
export const version = "1.0.0"

versionCode

Used to provide the version code of the theme. Version code is a number that should be incremented for every new version of the theme.

theme.config.js
export const versionCode = 1

engineVersion

Used to specify the theme engine version. Currently, the only valid version is 1.

theme.config.js
export const engineVersion = 1

loginUrlPath

Used to specify the URL path where the user should be redirected when trying to access a page that requires authentication.

theme.config.js
export const loginUrlPath = "/account/login"

productImageSizes

theme.config.js
import {Prop} from "builderoo";
 
export const productImageSizes = [[100, 200], [300, 500]]
 
export const themeConfig = {
  // ...
  // config options
  // ...
}

productImageSizes is used to resize product images in production. It accepts an array of 2-item number array. Each item specifies the width and height pair of the image. You can provide up to 6 pairs.

import React from 'react';
import {useConfig, type Config} from "builderoo";
import {themeConfig} from "../theme.config";
 
export default function HeroSection() {
 
  const config: Config<typeof themeConfig> = useConfig()
 
  return (
    <section>
 
    </section>
  );
}
Custom PagesObjects