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.