Elements

Theme settings element types used in schema.json to configure the Theme Editor UI.

checkbox

Used to toggle on theme settings (boolean value).

{
  "type": "checkbox",
  "label": "i18n.HideBreadcrumbs",
  "force_reload": true,
  "id": "hide_breadcrumbs"
},

Required fields: type, label, and id.

Optional field: force_reload.

color

Used to set color value on theme setting (hex value).

{
  "type": "color",
  "label": "i18n.BannerBackground",
  "id": "color-primary"
},

Required fields: type, label, and id.

font

Used to select font value on theme setting.

{
	"type": "font",
	"label": "i18n.BodyTextFontFamily",
	"id": "body-font",
	"options": [
		{
			"group": "i18n.Karla",
			"label": "i18n.Karla",
			"value": "Google_Karla_400"
		},
		{
			"group": "i18n.Roboto",
			"label": "i18n.Roboto",
			"value": "Google_Roboto_400"
		},
		{
			"group": "i18n.SourceSansPro",
			"label": "i18n.SourceSansPro",
			"value": "Google_Source+Sans+Pro_400"
		}
	]
}

Required fields: type, label, id, and options.

Optional field: force_reload.

heading

{
  "type": "heading",
  "content": "i18n.BackgroundAndLines"
},

Required fields: type and content.

imageDimension

Used to set image ratio on theme setting.

{
  "type": "imageDimension",
  "id": "blog_size",
  "force_reload": true,
  "label": "i18n.SizeOfImages",
  "options": [
    {
      "value": "190x250",
      "label": "i18n.OptimizedForTheme"
    },
    {
      "value": "custom",
      "label": "i18n.SpecifyDimensions"
    }
  ]
},

Required fields: type, label, id, and options.

optimizedCheckout-image

Upload a custom logo to checkout when using optimized one-page checkout.

{
  "type": "optimizedCheckout-image",
  "label": "i18n.250X100pxRecommended",
  "reference": "optimizedCheckout-show-logo",
  "reference_default": "none",
  "force_reload": true,
  "id": "optimizedCheckout-logo"
},

reference

The reference field on a setting can show additional settings based on the value of another setting. For example, we may want to hide the Product Sale Badge Label setting if Show product sale badges setting equals none.

{
  "type": "select",
  "label": "i18n.ShowProductSaleBadges",
  "id": "product_sale_badges",
  "force_reload": true,
  "options": [
    {
      "value": "none",
      "label": "i18n.None"
    },
    {
      "value": "topleft",
      "label": "i18n.TopLeft"
    },
    {
      "value": "sash",
      "label": "i18n.Diagonal"
    },
    {
      "value": "burst",
      "label": "i18n.Burst"
    }
  ]
},

{
  "type": "text",
  "label": "i18n.ProductSaleBadgeLabel",
  "force_reload": true,
  "id": "pdp_sale_badge_label",
  "reference": "product_sale_badges",
  "reference_default": "none"
},

In this example, you can see that when ShowProductSaleBadges equals none, the ProductSaleBadgeLabel text setting is hidden. But when ShowProductSaleBadges has a value other than none, ProductSaleBadgeLabel text setting displays.

The reference field is added to the setting you want to toggle the display of based on a value (so in this example ProductSaleBadgeLabel). The value for reference should be the id of whichever setting you are referencing (so in this example product_sale_badges).

The reference_default field should be set to the value the setting wants to reference. In this case, none will set the ProductSaleBadgeLabel hidden until ShowProductSaleBadges changes in value.

select

Used to select custom value on theme settings.

{
  "type": "select",
  "label": "i18n.BodyTextFontSize",
  "id": "fontSize-root",
  "options": [
    {
      "value": 12,
      "label": "12px"
    },
    {
      "value": 13,
      "label": "13px"
    },
    {
      "value": 14,
      "label": "14px"
    },
    {
      "value": 16,
      "label": "16px"
    }
  ]
},

Required fields: type, label, id, and options.

Optional field: force_reload.

sort

Used to let the store owner drag wallet button providers into a custom order. The setting stores an array of provider identifiers in the chosen order.

{
  "type": "sort",
  "label": "i18n.ProviderSortingOrderLabel",
  "id": "paymentbuttons-provider-sorting",
  "force_reload": true,
  "options": [
    {
      "value": "paypal",
      "label": "i18n.PayPalProviderSortingLabel",
      "enabledBy": "paypal"
    },
    {
      "value": "googlepay",
      "label": "i18n.GooglepayProviderSortingLabel",
      "enabledBy": "googlepay"
    },
    {
      "value": "applepay",
      "label": "i18n.ApplepayProviderSortingLabel",
      "enabledBy": "applepay"
    }
  ]
},

Required fields: type, label, id, and options. The id must be paymentbuttons-provider-sorting.

Optional field: force_reload.

Each option requires value, label, and enabledBy. The enabledBy field names a payment provider and identifies the option in Page Builder, so set value to the same string. An option appears in the sort list only when that provider is enabled on the store. The saved value is the array of enabledBy identifiers for the enabled providers, in the order the store owner chose.

Recognized provider identifiers are paypal, paypal-credit, paypal-venmo, sepa, googlepay, applepay, afterpay, amazonpay, bolt, and stripeocs.

Set the default value in config.json to an empty array: "paymentbuttons-provider-sorting": []. Page Builder fills in the enabled providers when the store owner opens the theme settings.

For an end-to-end example, see Sorting wallet buttons.

text

Used to set string value for theme settings.

{
  "type": "text",
  "label": "i18n.ProductPriceLabelSale",
  "force_reload": true,
  "id": "pdp-sale-price-label"
},

Required fields: type, label, and id.

Optional field: force_reload.