import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Customization/Settings file" />

# settings.json file
<br />

In the `settings.json` file in your Plaza theme, you can set default components with their [schema](?path=/story/docs-customization-schema--page#schema) form setting values to use for every storefront page. Your storefront pages are filled with default components based on which `component` or `PageOrderableContainer` tag elements you provided in your theme.

## Example

For example, in the `profile.html` file in the `content/pages/profile` folder of your current theme (that is, the profile page), you set up the page with the `ProductDescription`, `ProductReviews`, and `ProductTopFeatures` components:

```html
<component name="ProductDescription" id="ProductDescription"></component>
<component name="ProductReviews" id="ProductReviews"></component>
<component name="ProductTopFeatures" id="ProductTopFeatures"></component>
```

In the `settings.json` file, you can fill in some schema form setting values for each component. All you have to do is follow
this JSON structure:

```js
{
  "pages" : {
    "profile" : {
      "components" : {
        "ProductDescription" : {
          "isAddonsVisible" : {
            "value" : true,
            "type" : "TOGGLE"
          },
          "isPricesVisible" : {
            "value" : true,
            "type" : "TOGGLE"
          },
          "layout" : {
            "value" : "horizontal-thumbnails",
            "type" : "DROPDOWN"
          }
        },
        "ProductReviews" : {
          "isAvatarVisible" : {
            "value" : true,
            "type" : "TOGGLE"
          },
          "position" : {
            "value" : "right",
            "type" : "DROPDOWN"
          }
        },
        "ProductTopFeatures" : {
          "numberOfColumns" : {
            "value" : "two",
            "type" : "DROPDOWN"
          },
          "withImages" : {
            "value" : false,
            "type" : "TOGGLE"
          }
        }
      },
      "orderableComponents" : []
    }
  }
}
```

In the [Layout Management](?path=/story/docs-customization-layout-management--page#layout-management) section, we will explain to you how you can leverage the `settings.json` file to fill the
`PageOrderableContainer` tag element with some default component(s).
