diff --git a/docs/studio/Integrations/epcc.mdx b/docs/studio/Integrations/epcc.mdx
index df10aca6..727d962c 100644
--- a/docs/studio/Integrations/epcc.mdx
+++ b/docs/studio/Integrations/epcc.mdx
@@ -40,7 +40,7 @@ The following steps describe how to configure an integration between Studio and
1. (Optional) In **Catalog Channel**, enter the channel you specified when you created your catalog rule in Product Experience Manager. Channels represent your ecommerce sales channel through which your shoppers may select and pay for your products, for example, **Mobile** for a mobile app or **Web** for website. See [Configure Shopper Catalog Rules](/docs/api/pxm/catalog/rules). If you leave this blank, the default catalog is used.
1. (Optional) Configure the shipping options. If you have configured the **Shipping Service** in the [Integrations Hub](/docs/composer/integration-hub/integrations-hub), you can use the information from the integration to configure your shipping options in the **Elastic Path** integration. This enables you to use the shipping options available in your Elastic Path store in your Studio storefront.
-
+ 
Complete the shipping options with the information from the **Shipping Service** in Integrations Hub.
diff --git a/docs/studio/content/advanced-page-editing/Managing-Redirects.mdx b/docs/studio/content/advanced-page-editing/Managing-Redirects.mdx
index 8c91374c..2dba4217 100644
--- a/docs/studio/content/advanced-page-editing/Managing-Redirects.mdx
+++ b/docs/studio/content/advanced-page-editing/Managing-Redirects.mdx
@@ -29,7 +29,7 @@ steps to implement this for yourself
1. Identify the page that you want to redirect, and the URL that you want to redirect to.
2. Create or edit the page in your Studio account that you want to redirect.
3. Add a Custom Code/Text or Custom Code section to that page and add the below meta tag to the code block. Don't forget
- to replace the **https://www.google.com**portion of it with the URL of the page you'd like to redirect the user to:
+ to replace the **https://www.google.com** portion of it with the URL of the page you'd like to redirect the user to:
```
<meta http-equiv="refresh" content="0; url=https://www.google.com">
diff --git a/docs/studio/design/Design-&-Styles/Styling-for-light-and-dark-backgrounds.mdx b/docs/studio/design/Design-&-Styles/Styling-for-light-and-dark-backgrounds.mdx
index 14f6ea31..8d4f9615 100644
--- a/docs/studio/design/Design-&-Styles/Styling-for-light-and-dark-backgrounds.mdx
+++ b/docs/studio/design/Design-&-Styles/Styling-for-light-and-dark-backgrounds.mdx
@@ -1,7 +1,7 @@
---
title: Styling for Light and Dark Backgrounds
nav_label: Styling for Light and Dark Backgrounds
-sidebar_position: 20
+sidebar_position: 10
---
## How to adjust the elements in a section for light/dark
diff --git a/docs/studio/design/Design-&-Styles/Using-your-Style-Guide.mdx b/docs/studio/design/Design-&-Styles/Using-your-Style-Guide.mdx
index 8659d829..e8f0c3fd 100644
--- a/docs/studio/design/Design-&-Styles/Using-your-Style-Guide.mdx
+++ b/docs/studio/design/Design-&-Styles/Using-your-Style-Guide.mdx
@@ -1,7 +1,7 @@
---
title: Using your Style Guide
nav_label: Using your Style Guide
-sidebar_position: 10
+sidebar_position: 5
---
The Styles Guide can be accessed through the Studio Admin and is a huge asset when trying to quickly spin up page with
diff --git a/docs/studio/design/Header-and-Footer/_category_.json b/docs/studio/design/Header-and-Footer/_category_.json
deleted file mode 100644
index a2e7a1b3..00000000
--- a/docs/studio/design/Header-and-Footer/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "position": 10,
- "label": "Header and Footer"
-}
\ No newline at end of file
diff --git a/docs/studio/design/branding/_category_.json b/docs/studio/design/branding/_category_.json
new file mode 100644
index 00000000..cd6822a4
--- /dev/null
+++ b/docs/studio/design/branding/_category_.json
@@ -0,0 +1,4 @@
+{
+ "position": 5,
+ "label": "Branding"
+}
\ No newline at end of file
diff --git a/docs/studio/design/branding/branding.mdx b/docs/studio/design/branding/branding.mdx
new file mode 100644
index 00000000..b6dda80e
--- /dev/null
+++ b/docs/studio/design/branding/branding.mdx
@@ -0,0 +1,15 @@
+---
+title: Branding
+nav_label: Branding
+sidebar_position: 5
+---
+
+In **Branding**, you can configure the visible elements of your brand, including your logos, favicon image, and social share image. Maintaining a consistent use of brand identity throughout your pages enhances your company's image, creating a memorable first impression.
+
+1. From Studio, select **Design**.
+1. Select **Branding**.
+1. Depending on the image you want to add, select one of the following to open the Studio Media Editor and add your images.
+ - **Logo for light backgrounds**
+ - **Logo for dark backgrounds**
+ - **Favicon**
+ - **Social share image**
\ No newline at end of file
diff --git a/docs/studio/design/Header-and-Footer/Adding-&-Removing-Header-Dropdowns.mdx b/docs/studio/design/layouts/Header-and-Footer/Adding-&-Removing-Header-Dropdowns.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/Adding-&-Removing-Header-Dropdowns.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Adding-&-Removing-Header-Dropdowns.mdx
diff --git a/docs/studio/design/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation.mdx b/docs/studio/design/layouts/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation.mdx
diff --git a/docs/studio/design/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size.mdx b/docs/studio/design/layouts/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size.mdx
diff --git a/docs/studio/design/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page.mdx b/docs/studio/design/layouts/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page.mdx
diff --git a/docs/studio/design/Header-and-Footer/Header-Formatting-Options.mdx b/docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options.mdx
similarity index 98%
rename from docs/studio/design/Header-and-Footer/Header-Formatting-Options.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options.mdx
index 88ce30f5..0ad4f399 100644
--- a/docs/studio/design/Header-and-Footer/Header-Formatting-Options.mdx
+++ b/docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options.mdx
@@ -1,7 +1,7 @@
---
title: Formatting Header
nav_label: Formatting Header
-sidebar_position: 50
+sidebar_position: 5
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/fjdG-JN7nG8" title="Formatting Header" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
diff --git a/docs/studio/design/Header-and-Footer/How-to-add-a-button-to-your-header.mdx b/docs/studio/design/layouts/Header-and-Footer/How-to-add-a-button-to-your-header.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/How-to-add-a-button-to-your-header.mdx
rename to docs/studio/design/layouts/Header-and-Footer/How-to-add-a-button-to-your-header.mdx
diff --git a/docs/studio/design/Header-and-Footer/How-to-customize-header-color.mdx b/docs/studio/design/layouts/Header-and-Footer/How-to-customize-header-color.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/How-to-customize-header-color.mdx
rename to docs/studio/design/layouts/Header-and-Footer/How-to-customize-header-color.mdx
diff --git a/docs/studio/design/Header-and-Footer/How-to-make-my-header-transparent.mdx b/docs/studio/design/layouts/Header-and-Footer/How-to-make-my-header-transparent.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/How-to-make-my-header-transparent.mdx
rename to docs/studio/design/layouts/Header-and-Footer/How-to-make-my-header-transparent.mdx
diff --git a/docs/studio/design/Header-and-Footer/Managing-Social-Links-in-your-Footer.mdx b/docs/studio/design/layouts/Header-and-Footer/Managing-Social-Links-in-your-Footer.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/Managing-Social-Links-in-your-Footer.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Managing-Social-Links-in-your-Footer.mdx
diff --git a/docs/studio/design/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer.mdx b/docs/studio/design/layouts/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer.mdx
similarity index 100%
rename from docs/studio/design/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer.mdx
rename to docs/studio/design/layouts/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer.mdx
diff --git a/docs/studio/design/layouts/Header-and-Footer/_category_.json b/docs/studio/design/layouts/Header-and-Footer/_category_.json
new file mode 100644
index 00000000..d3bd3c7e
--- /dev/null
+++ b/docs/studio/design/layouts/Header-and-Footer/_category_.json
@@ -0,0 +1,4 @@
+{
+ "position": 20,
+ "label": "Header & Footer"
+}
\ No newline at end of file
diff --git a/docs/studio/design/layouts/_category_.json b/docs/studio/design/layouts/_category_.json
new file mode 100644
index 00000000..ab28491c
--- /dev/null
+++ b/docs/studio/design/layouts/_category_.json
@@ -0,0 +1,4 @@
+{
+ "position": 30,
+ "label": "Layouts"
+}
\ No newline at end of file
diff --git a/docs/studio/design/layouts/creating-layouts.mdx b/docs/studio/design/layouts/creating-layouts.mdx
new file mode 100644
index 00000000..46ae9cd5
--- /dev/null
+++ b/docs/studio/design/layouts/creating-layouts.mdx
@@ -0,0 +1,50 @@
+---
+title: Creating Layouts
+nav_label: Creating Layouts
+sidebar_position: 10
+---
+
+Layouts are a powerful tool that offers flexibility in designing the structure of your pages. Layouts allow you to create visually appealing and well-structured pages efficiently, ensuring consistency and ease of use across your site.
+
+You can either create new components and add them to a layout component, or you can design a new layout in the layout editor and add the sections you want using the page editor. When working in the page editor, you can combine newly-created components with existing components for a customized layout.
+
+## Step 1 - Create a New Layout
+
+To create a new layout:
+
+1. From Studio, select **Design**.
+1. Select **Layouts**.
+1. Select **+ Add layout**. The **New layout** panel is displayed.
+1. Specify a name for your layout. This should be something easy to understand, indicating the layout's purpose or function. For example, **Featured products** or **Sales countdown**.
+1. In **Layout component**, select the layout component you want from the list.
+1. Select **Create layout**. The new layout is displayed.
+1. Select **Header**. A list of available sections is displayed.
+1. Navigate to **Layout** to see a list of available headers.
+1. Select the header that you want to use.
+1. Select **Footer**. A list of available sections is displayed.
+1. Select the footer that you want to use.
+ :::note
+ For more information about how to format your headers and footers, see [Headers & Footers](/docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options)
+ :::
+1. When you are happy with your layout, select **Publish**.
+
+:::note
+You can build a new layout component using the `layout` tag. See [Layouts](/docs/studio/developers/tags/layout).
+:::
+
+## Step 2 - Apply a Layout to a Page
+
+Once a layout is published, when you create a new page, your new page automatically uses the new layout.
+
+For the page defaults, you can go to the Layouts Editor and change the layouts that the pages are using.
+
+Alternatively, manually change the layout for individual pages by going into the page settings and selecting a different layout.
+
+1. Select **Options** next to the page that you want to add a page layout. The **Page settings** are displayed.
+1. In **Layout**, select the layout you want to apply from the list.
+1. Select **Save only**.
+1. Preview the page to check that the layout is working correctly.
+1. When you are happy with your page, you can publish your page.
+
+
+
diff --git a/docs/studio/design/layouts/managing-layouts.mdx b/docs/studio/design/layouts/managing-layouts.mdx
new file mode 100644
index 00000000..58470ed8
--- /dev/null
+++ b/docs/studio/design/layouts/managing-layouts.mdx
@@ -0,0 +1,27 @@
+---
+title: Managing Layouts
+nav_label: Managing Layouts
+sidebar_position: 10
+---
+
+You can manage your layouts in the Layouts Editor. In the Layouts Editor, you can see the layouts that you have, the page usage,
+
+## Editing a Layout
+
+You can edit your layouts at any time. Once you publish your changes, all the pages using the layout are automatically updated to use the new layout.
+
+1. From Studio, select **Design**.
+1. Select **Layouts**.
+1. Select the layout you want to edit. The layout is displayed.
+1. Make the changes that you want.
+1. When you are happy with your layout, select **Publish**.
+
+## Deleting a Layout
+
+You can delete your layouts at any time. In the Layouts Editor, you can see how many pages are using the layout. You can still delete a layout, even if it is currently being used.
+
+1. From Studio, select **Design**.
+1. Select **Layouts**.
+1. For the layout you want to delete, select **Settings**.
+1. From **Settings**, select **delete**.
+1. Select **Yes, delete layout** to delete the layout.
diff --git a/docs/studio/design/layouts/overview.mdx b/docs/studio/design/layouts/overview.mdx
new file mode 100644
index 00000000..33007fa1
--- /dev/null
+++ b/docs/studio/design/layouts/overview.mdx
@@ -0,0 +1,33 @@
+---
+title: Overview
+nav_label: Overview
+sidebar_position: 5
+---
+
+You can use layouts to design the structure of your pages. Layouts determine how information, visuals, and components are organized to guide visitors through your content toward specific goals, such as making a purchase or signing up for an offer. By streamlining the page development process, layouts save time and enhance the overall user experience of your pages.
+
+Below is an overview of the steps to follow to use layouts:
+
+1. If required, create your own custom components, including banners, headers, footers, layouts or sections. See [Custom Components](/docs/studio/developers/).
+1. In the **Layouts** editor, create your new layout. You can use a default layout or use a custom layout that you have created.
+1. Add your headers and footers.
+1. Depending on your requirements, format your headers and footers.
+1. Once you have saved and published your layout, when you create a new page, the new page automatically uses the new layout. Alternatively, you can manually change the layout for individual pages by going to the **Settings** for a page and selecting a different layout.
+1. You can see a list of all your current layouts and the number of pages using each one. In addition, you can see the layouts used on your default pages, and change them if you wish.
+
+## Default Layouts
+
+There are three default layouts.
+
+| Default Layout | Description |
+|---------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Full header - Full Footer | The full header and footer provides an example of the typical elements commonly included in an online storefront. The header has key components such as company logo, navigation menu, and a call to actcion, while the footer includes essential information like contact details, link to policies, social media icons, and site navigation. The full header and footer offers a useful starting point when designing or developing your online storefront. |
+| Minimal header - Minimal footer | A minimal header consists of a company name and the footer contains a copyright notice. By starting with a minimal header and footer, you can take an iterative approach to adding elements to your header and footer. |
+| No header - No footer | The layout consists of a main section only. |
+
+
+
+
+
+
+
diff --git a/docs/studio/developers/components/_category_.json b/docs/studio/developers/components/_category_.json
deleted file mode 100644
index 00a2a4f4..00000000
--- a/docs/studio/developers/components/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "position": 21,
- "label": "Component Types"
-}
diff --git a/docs/studio/developers/components/section.mdx b/docs/studio/developers/components/section.mdx
deleted file mode 100644
index afe32025..00000000
--- a/docs/studio/developers/components/section.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Section
-nav_label: Section
-sidebar_position: 10
----
-
-The `<Section>` tag is required for all components. It is a block-level tag that renders as an element in the outputted HTML.
-
-```jsx
-<Section dataRef={content.section} enableHeader={true}>
-...
-</Section>
-```
-
-## Attributes
-
-* **dataRef**: DataLocator - The data-element storing the Section's configuration
-* **className**: string (optional) - A hard-coded class name to add to the rendered element (Default: none)
-* **defaultPaddingTop**: number (optional) - A number from 0-10 indicating the default top padding of the Section Box-Wrapper (Default: `8`)
-* **defaultPaddingRight**: number (optional) - A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default: `2`)
-* **defaultPaddingBottom**: number (optional) - A number from 0-10 indicating the default bottom padding of the Section Box-Wrapper (Default: `8`)
-* **defaultPaddingLeft**: number (optional) - A number from 0-10 indicating the default left padding of the Section Box-Wrapper (Default: `2`)
-* **defaultMaxWidth**: number (optional) - A number indicating the default max width in px of the Section Box-Wrapper (Default: `1200`)
-* **defaultTextAlignment**: string (optional) - A string (`"left"`, `"right"`, or `"center"`) indicating the default alignment of the Section Box-Wrapper (Default: `"center"`)
-* **defaultTextTheme**: string (optional) - A string (`"dark-bg"` or `"light-bg"`) indicating the default text theme to use for the component
-* **defaultBackgroundColor**: string (optional) - A CSS color value indicating the default background color (Default: none)
-* **enableHeader**: boolean (optional) - When true, allows content authors to add a section-header to this section type (Default: `false)`
-* **location**: Array\``<string>``` (optional) - Where the component can appear; can include `'header'`, `'main'`, and `'footer'` (Default: `['main']`)
-* **properties**: Array<\[object]> (optional) - defines properties that content authors can configure within the page editor. For details see [custom properties](/docs/studio/developers/features/properties).
diff --git a/docs/studio/developers/custom-themes/css-variables.mdx b/docs/studio/developers/css-variables.mdx
similarity index 99%
rename from docs/studio/developers/custom-themes/css-variables.mdx
rename to docs/studio/developers/css-variables.mdx
index fbd3988b..aa740c50 100644
--- a/docs/studio/developers/custom-themes/css-variables.mdx
+++ b/docs/studio/developers/css-variables.mdx
@@ -1,7 +1,7 @@
---
title: CSS Variables
nav_label: CSS Variables
-sidebar_position: 60
+sidebar_position: 25
---
Studio enables you to customize your Studio storefronts appearance using CSS variables. You can use these variables in the Component Editor when you are creating your [custom components](/docs/studio/developers/custom-themes/custom-components).
diff --git a/docs/studio/developers/custom-themes/_category_.json b/docs/studio/developers/custom-themes/_category_.json
index c1b634d4..b3566c71 100644
--- a/docs/studio/developers/custom-themes/_category_.json
+++ b/docs/studio/developers/custom-themes/_category_.json
@@ -1,4 +1,4 @@
{
- "position": 19,
+ "position": 5,
"label": "Custom Themes"
}
diff --git a/docs/studio/developers/custom-themes/custom-components.mdx b/docs/studio/developers/custom-themes/custom-components.mdx
index 717d8343..92c09762 100644
--- a/docs/studio/developers/custom-themes/custom-components.mdx
+++ b/docs/studio/developers/custom-themes/custom-components.mdx
@@ -12,5 +12,5 @@ Building your own components will give you the ultimate flexibility. Studio prov
The component editor can be used to build a few different types of components:
-* [**Sections**](/docs/studio/developers/components/section) - The main building blocks of Studio pages.
-* [**Headers & Footers**](/docs/studio/developers/components/header-and-footer) - If the built-ins don't work for you you can go custom.
+* [**Sections**](/docs/studio/developers/tags/section) - The main building blocks of Studio pages.
+* [**Headers & Footers**](/docs/studio/developers/tags/header-and-footer) - If the built-ins don't work for you you can go custom.
diff --git a/docs/studio/developers/custom-themes/headers-footers.mdx b/docs/studio/developers/custom-themes/headers-footers.mdx
deleted file mode 100644
index 13491330..00000000
--- a/docs/studio/developers/custom-themes/headers-footers.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Headers & Footers
-nav_label: Headers & Footers
-sidebar_position: 20
----
-
-Studio enables you to customize your site's appearance.
-
-Within the app, Studio provides a way of customizing your header and footer without code:
-
-
-
-This allows you to customize your menus, styles, and the basic layout of your header. The built-in header and footer do have some limitations, but they are excellent for customizing your header or footer without code.
-
-If the built-in header and footer don't meet your needs, you can also build your own header and footer components with code. See [Header and Footer](/docs/studio/developers/components/header-and-footer).
diff --git a/docs/studio/developers/components.mdx b/docs/studio/developers/developers.mdx
similarity index 86%
rename from docs/studio/developers/components.mdx
rename to docs/studio/developers/developers.mdx
index c6b396b3..c85f895b 100644
--- a/docs/studio/developers/components.mdx
+++ b/docs/studio/developers/developers.mdx
@@ -1,11 +1,11 @@
---
-title: Custom Components
+title: Custom Component Development
nav_label: Custom Components
-sidebar_position: 20
+sidebar_position: 1
---
How to customize existing components or add your own.
-## Getting started
+## Getting Started
To add or edit components you'll need to have the Developer or Administrator role within Studio. Then, click on **Design** -> **Sections** in the navigation to begin editing components:
@@ -17,6 +17,24 @@ Components are written in HTML, CSS, and JavaScript and use special tags we call
+### Creating a new component
+
+To add a new component:
+
+1. Go to **Design**.
+1. Select **Sections**.
+1. Select **+New Section**.
+1. Complete the details as follows:
+
+ | Option | Description |
+ | --- | --- |
+ | Name | Provide a descriptive name for your component. |
+ | Slug | Provide a unique slug for your component. |
+ | Category | From the list, select a category. |
+
+1. Configure your NoML. See [A NoML example](#a-noml-example).
+1. Select **Publish**. Once the component is published, it is available to use on your pages.
+
### A NoML example
NoML is Studio's proprietary markup language that makes it possible to build components that can be edited within the page editor. It is quite similar to [JSX](https://reactjs.org/docs/introducing-jsx.html). Using NoML you can define exactly what parts of a component should be editable by page authors. You can use any HTML you want within a component, but you'll need to use NoML to make bits editable.
@@ -59,7 +77,7 @@ Several tags appear in the example above:
2. There's then a `Collection` tag that generates multiple `Item` based on user input. These are rendered with the `callout` class which is used by the CSS to make them look like cards.
3. Finally, the `Media`, `RichText`, and `Action` tags provide the icon, text, and editable actions (buttons) for the user of the component.
-## Available tags
+## Available Tags
There are an array of tags within Studio that provide dynamic functionality for page authors. If you're building your own components, you'll want to familiarize yourself with each of them.
diff --git a/docs/studio/developers/e-commerce/_category_.json b/docs/studio/developers/e-commerce/_category_.json
deleted file mode 100644
index 0e4036e5..00000000
--- a/docs/studio/developers/e-commerce/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "position": 40,
- "label": "E-Commerce Tags"
-}
diff --git a/docs/studio/developers/eCommerce/_category_.json b/docs/studio/developers/eCommerce/_category_.json
index b22a27c4..8f27f431 100644
--- a/docs/studio/developers/eCommerce/_category_.json
+++ b/docs/studio/developers/eCommerce/_category_.json
@@ -1,4 +1,4 @@
{
- "position": 51,
+ "position": 15,
"label": "eCommerce"
}
\ No newline at end of file
diff --git a/docs/studio/developers/features/_category_.json b/docs/studio/developers/features/_category_.json
index 887145f7..4c178ed7 100644
--- a/docs/studio/developers/features/_category_.json
+++ b/docs/studio/developers/features/_category_.json
@@ -1,4 +1,4 @@
{
- "position": 60,
+ "position": 20,
"label": "Other NOML Features"
}
diff --git a/docs/studio/developers/tags/_category_.json b/docs/studio/developers/tags/_category_.json
index 697b48f4..fb454301 100644
--- a/docs/studio/developers/tags/_category_.json
+++ b/docs/studio/developers/tags/_category_.json
@@ -1,4 +1,4 @@
{
- "position": 30,
- "label": "Basic Tags"
+ "position": 10,
+ "label": "Tags"
}
diff --git a/docs/studio/developers/tags/actions.mdx b/docs/studio/developers/tags/actions.mdx
index 2f7e0851..6cceeb85 100644
--- a/docs/studio/developers/tags/actions.mdx
+++ b/docs/studio/developers/tags/actions.mdx
@@ -1,7 +1,6 @@
---
title: Actions
nav_label: Actions
-sidebar_position: 10
---
The Actions tag allows you to add buttons and forms to your section.
diff --git a/docs/studio/developers/tags/articles.mdx b/docs/studio/developers/tags/articles.mdx
index 46c79652..37bb74f4 100644
--- a/docs/studio/developers/tags/articles.mdx
+++ b/docs/studio/developers/tags/articles.mdx
@@ -1,7 +1,6 @@
---
title: Article Collection
nav_label: Article Collection
-sidebar_position: 20
---
The ArticleCollection generator allows you to create components powered by dynamic blog content. Users can optionally filter, sort, and pin articles to a given section using this component, giving them the flexibility to selectively display editorial content throughout your site.
diff --git a/docs/studio/developers/tags/banner.mdx b/docs/studio/developers/tags/banner.mdx
new file mode 100644
index 00000000..cecc4c8f
--- /dev/null
+++ b/docs/studio/developers/tags/banner.mdx
@@ -0,0 +1,27 @@
+---
+title: Banner
+nav_label: Banner
+---
+
+The `<Banner>` tag can be used to create site banners. To create your own banner component, simply create a new component and use the `<Banner>` tag as the outer wrapper for the component. (This should replace the `<Section>` tag as the outermost wrapper.)
+
+### Attributes
+
+The `banner` tag has the following attributes.
+
+| Attribute | Type | Required | Description |
+| --- | --- | --- | --- |
+| className | string | Optional | A hard-coded class name to add to the rendered element. |
+| dataRef | DataLocator | Required | The data-element storing the Section's configuration |
+| location | array\string | Optional | Where the component can appear; `header`, `main`, and `footer` (Default: `['main']`)|
+| properties | array/object | Optional | Define properties that content authors can configure within the page editor. For details see [Custom Properties](/docs/studio/developers/features/properties). |
+
+## Example
+
+An example of the banner tag is shown below.
+
+```jsx
+<Banner dataRef={content.banner}>
+...
+</Banner>
+```
\ No newline at end of file
diff --git a/docs/studio/developers/tags/box.mdx b/docs/studio/developers/tags/box.mdx
index 318f18e2..86387f5a 100644
--- a/docs/studio/developers/tags/box.mdx
+++ b/docs/studio/developers/tags/box.mdx
@@ -1,7 +1,6 @@
---
title: Box
nav_label: Box
-sidebar_position: 20
---
The `<Box>` tag is a special type of block-level element, which acts as a configurable container, as well as a child element of Layouts, or Collections defining a specific item in the defined layout that inherits properties from its parent.
diff --git a/docs/studio/developers/e-commerce/cart-and-drawer-soon.mdx b/docs/studio/developers/tags/cart-and-drawer-soon.mdx
similarity index 99%
rename from docs/studio/developers/e-commerce/cart-and-drawer-soon.mdx
rename to docs/studio/developers/tags/cart-and-drawer-soon.mdx
index 1b8f00af..3862c7c5 100644
--- a/docs/studio/developers/e-commerce/cart-and-drawer-soon.mdx
+++ b/docs/studio/developers/tags/cart-and-drawer-soon.mdx
@@ -1,7 +1,6 @@
---
title: Cart & Drawer
nav_label: Cart & Drawer
-sidebar_position: 5
---
:::note
diff --git a/docs/studio/developers/tags/code.mdx b/docs/studio/developers/tags/code.mdx
index 648f5193..fb035069 100644
--- a/docs/studio/developers/tags/code.mdx
+++ b/docs/studio/developers/tags/code.mdx
@@ -1,4 +1,7 @@
-# Code
+---
+title: Code
+nav_label: Code
+---
```jsx
<Code dataRef={content.code} />
diff --git a/docs/studio/developers/tags/collection.mdx b/docs/studio/developers/tags/collection.mdx
index c9d72d05..f3807902 100644
--- a/docs/studio/developers/tags/collection.mdx
+++ b/docs/studio/developers/tags/collection.mdx
@@ -1,4 +1,7 @@
-# Collection
+---
+title: Collection
+nav_label: Collection
+---
The Collection generator allows your users to create lists or grids of repeatable blocks of code, each with powerful UI tools for adding, removing, and sorting. These are useful for creating complex multi-element section types like testimonials, FAQs, etc.
diff --git a/docs/studio/developers/tags/element.mdx b/docs/studio/developers/tags/element.mdx
index 61c27b69..02eae23d 100644
--- a/docs/studio/developers/tags/element.mdx
+++ b/docs/studio/developers/tags/element.mdx
@@ -1,4 +1,7 @@
-# Element
+---
+title: Element
+nav_label: Element
+---
The `<Element>` tag is similar to the Box tag, but it doesn't provide any layout or style controls within the page editor. It exists to make it easy to attach [custom properties](/docs/studio/developers/features/properties) to a `div` or other HTML element.
diff --git a/docs/studio/developers/utility/generator.mdx b/docs/studio/developers/tags/generator.mdx
similarity index 96%
rename from docs/studio/developers/utility/generator.mdx
rename to docs/studio/developers/tags/generator.mdx
index 3d4cd8b3..2a1c08d2 100644
--- a/docs/studio/developers/utility/generator.mdx
+++ b/docs/studio/developers/tags/generator.mdx
@@ -1,7 +1,6 @@
---
title: Generator
nav_label: Generator
-sidebar_position: 10
---
The Generator allows your users to iterate through lists and groups of data and create a piece of NOML for each item iterated on.
diff --git a/docs/studio/developers/components/header-and-footer.mdx b/docs/studio/developers/tags/header-and-footer.mdx
similarity index 98%
rename from docs/studio/developers/components/header-and-footer.mdx
rename to docs/studio/developers/tags/header-and-footer.mdx
index 86919345..0d7d926a 100644
--- a/docs/studio/developers/components/header-and-footer.mdx
+++ b/docs/studio/developers/tags/header-and-footer.mdx
@@ -1,7 +1,6 @@
---
title: Header and Footer
nav_label: Header and Footer
-sidebar_position: 20
---
## Header
diff --git a/docs/studio/developers/utility/jsonparser.mdx b/docs/studio/developers/tags/jsonparser.mdx
similarity index 96%
rename from docs/studio/developers/utility/jsonparser.mdx
rename to docs/studio/developers/tags/jsonparser.mdx
index 3d8696dc..6f4aebe1 100644
--- a/docs/studio/developers/utility/jsonparser.mdx
+++ b/docs/studio/developers/tags/jsonparser.mdx
@@ -1,7 +1,6 @@
---
title: JSONParser
nav_label: JSONParser
-sidebar_position: 20
---
The JSON parser tag can be used to parse JSON that is contained in a string value. This is useful for parsing product attributes that contain JSON values.
diff --git a/docs/studio/developers/tags/layout.mdx b/docs/studio/developers/tags/layout.mdx
new file mode 100644
index 00000000..626ab4dd
--- /dev/null
+++ b/docs/studio/developers/tags/layout.mdx
@@ -0,0 +1,66 @@
+---
+title: Layout
+nav_label: Layout
+---
+
+The `<Layout>` tag is a wrapper that allows you to create custom page layouts using HTML, CSS, and Javascript. You can use the `<Layout>` tag in your components. When you create a new component, simply add the `<layout>` tag as the outer wrapper for the component.
+
+## Layout Container
+
+The `<layout>` tag is used to structure the main layout of a page. It serves as the container for elements like headers, footers, and the main content sections.
+
+### Properties
+
+The `<layout>` tag has the following properties.
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| `className` | `string` | Required | A custom CSS class that you can add to styles in the `Layout`. You can assign any value you want and specify in your stylesheet how you want the layout to look. For example, `className="layout-container"`. |
+
+## Container Component
+
+The `container` component is a reusable container that represents various sections if a page, such as headers, footers, and content areas. It allows you to pass in properties like `type`, `scope`, `tagName`, and `className` to adjust its behavior and appearance based on the content it wraps.
+
+### Properties
+
+The `Container` component has the following properties.
+
+| Property | Type | Required | Description |
+|-------------|----------|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `dataRef` | `object` | Required | A reference to the content data to be rendered inside the container. This property should link the container to the corresponding content object. For example, `dataRef={content.header}`. |
+| `type` | `array` | Required | An array specifying the type of content the container holds, for example, `header`, `footer`, `section`, or `banner`. This is useful for styling and dynamically adjusting the layout based on the content type. |
+| `scope` | `string` | Optional | Defines the scope of the container. It is used to indicate whether content is specfic to a page or applies globally, for example `scope="global"` for site-wide elements like headers or footers. If `scope` is `global` then you can set a global layout for different page types in **Design** > **Layouts**. If no scope is set then you can apply your layout to a page within the page settings drawer of a specific page. |
+| `tagName` | `string` | Optional | Allows the container to be rendered as a specific HTML tag. This is useful for semantic HTML, ensuring headers render as `<header>` and footers render as `<footer>`. |
+| `className` | `string` | Optional | Applies a custom CSS class to style the container. For example, `.header-container` could style the header container with custom styles defined in your CSS. |
+
+## Example
+
+Below is an example of a `layout`:
+
+```html
+<Layout className="layout-container">
+ <Container
+ dataRef={content.header}
+ type={["header", "banner"]}
+ scope="global"
+ tagName="header"
+ className="header-container"
+ />
+ <Container
+ dataRef={content.main}
+ type={["section", "banner"]}
+ />
+ <div class="sticky-bottom-spacer"></div>
+ <Container
+ dataRef={content.footer}
+ type={["footer", "banner"]}
+ scope="global"
+ tagName="footer"
+ className="footer-container"
+ />
+</Layout>
+```
+
+## Using a Layout Tag
+
+For more information about using a `<layout>` tag, see [Layouts](/docs/studio/design/layouts/overview).
diff --git a/docs/studio/developers/tags/media.mdx b/docs/studio/developers/tags/media.mdx
index 7afc97e7..d5cb546c 100644
--- a/docs/studio/developers/tags/media.mdx
+++ b/docs/studio/developers/tags/media.mdx
@@ -1,4 +1,7 @@
-# Media
+---
+title: Media
+nav_label: Media
+---
The Media Tag enables your content authors to add media to pages, augmented with full editor controls for linking, resizing, and media library management, and can be programmed to constrain the media output to specific dimensions, quality, etc.
diff --git a/docs/studio/developers/tags/plaintext.mdx b/docs/studio/developers/tags/plaintext.mdx
index 609775d0..6bbeba80 100644
--- a/docs/studio/developers/tags/plaintext.mdx
+++ b/docs/studio/developers/tags/plaintext.mdx
@@ -1,4 +1,7 @@
-# Plaintext
+---
+title: Plaintext
+nav_label: Plaintext
+---
The PlainText tag allows you to create a simple text entry input in the editor, which can also be associated with a given HTML tag, without giving your users full richtext capabilities.
diff --git a/docs/studio/developers/e-commerce/product-collection.mdx b/docs/studio/developers/tags/product-collection.mdx
similarity index 99%
rename from docs/studio/developers/e-commerce/product-collection.mdx
rename to docs/studio/developers/tags/product-collection.mdx
index 40182625..1572aaee 100644
--- a/docs/studio/developers/e-commerce/product-collection.mdx
+++ b/docs/studio/developers/tags/product-collection.mdx
@@ -1,7 +1,6 @@
---
title: Product Collection
nav_label: Product Collection
-sidebar_position: 10
---
:::note
diff --git a/docs/studio/developers/e-commerce/product-inventory.mdx b/docs/studio/developers/tags/product-inventory.mdx
similarity index 93%
rename from docs/studio/developers/e-commerce/product-inventory.mdx
rename to docs/studio/developers/tags/product-inventory.mdx
index d9a217a0..330b84f2 100644
--- a/docs/studio/developers/e-commerce/product-inventory.mdx
+++ b/docs/studio/developers/tags/product-inventory.mdx
@@ -1,7 +1,6 @@
---
title: Product Inventory
nav_label: Product Inventory
-sidebar_position: 20
---
The Product Inventory allows you to display the total inventory of a chosen product. 
diff --git a/docs/studio/developers/e-commerce/product-options.mdx b/docs/studio/developers/tags/product-options.mdx
similarity index 95%
rename from docs/studio/developers/e-commerce/product-options.mdx
rename to docs/studio/developers/tags/product-options.mdx
index 723e16c1..2c6e8752 100644
--- a/docs/studio/developers/e-commerce/product-options.mdx
+++ b/docs/studio/developers/tags/product-options.mdx
@@ -1,7 +1,6 @@
---
title: Product Options
nav_label: Product Options
-sidebar_position: 40
---
The Product Options allows you to show a list of all the options for the chosen product. This generates a series of list elements showing all the possible options.
diff --git a/docs/studio/developers/e-commerce/product-price.mdx b/docs/studio/developers/tags/product-price.mdx
similarity index 94%
rename from docs/studio/developers/e-commerce/product-price.mdx
rename to docs/studio/developers/tags/product-price.mdx
index eea2ec7a..f2b9366b 100644
--- a/docs/studio/developers/e-commerce/product-price.mdx
+++ b/docs/studio/developers/tags/product-price.mdx
@@ -1,7 +1,6 @@
---
title: Product Price
nav_label: Product Price
-sidebar_position: 30
---
The Product Inventory allows you to display the price of a product or the lowest and highest prices among the variants for a product.
diff --git a/docs/studio/developers/e-commerce/product.mdx b/docs/studio/developers/tags/product.mdx
similarity index 98%
rename from docs/studio/developers/e-commerce/product.mdx
rename to docs/studio/developers/tags/product.mdx
index dc700c60..677f4260 100644
--- a/docs/studio/developers/e-commerce/product.mdx
+++ b/docs/studio/developers/tags/product.mdx
@@ -1,7 +1,6 @@
---
title: Product
nav_label: Product
-sidebar_position: 10
---
:::note
diff --git a/docs/studio/developers/tags/richtext.mdx b/docs/studio/developers/tags/richtext.mdx
index b3bcba2a..795f66f0 100644
--- a/docs/studio/developers/tags/richtext.mdx
+++ b/docs/studio/developers/tags/richtext.mdx
@@ -1,4 +1,7 @@
-# Richtext
+---
+title: Richtext
+nav_label: Richtext
+---
The RichText tag is a very powerful tool for adding fully content-editable text areas to your sections, which can also be augmented with embedding tools for even richer media content.
diff --git a/docs/studio/developers/tags/section.mdx b/docs/studio/developers/tags/section.mdx
new file mode 100644
index 00000000..e0d3b1ff
--- /dev/null
+++ b/docs/studio/developers/tags/section.mdx
@@ -0,0 +1,36 @@
+---
+title: Section
+nav_label: Section
+---
+
+The `<Section>` tag is required for all components. It is a block-level tag that renders as an element in the outputted HTML.
+
+## Attributes
+
+The `<section>` tag has the following attributes:
+
+| Attribute | Type | Required | Description |
+| --- | --- | --- | --- |
+| `dataRef` | `DataLocator` | Required | The data-element storing the section's configuration. |
+| `className` | `string` | Optional | A hard-coded class name to add to the rendered element (Default: none). |
+| `defaultPaddingTop` | `number` | Optional | A number from 0-10 indicating the default top padding of the Section Box-Wrapper (Default: `8`). |
+| `defaultPaddingRight` | `number` | Optional | A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default: `2`). |
+| `defaultPaddingBottom` | `number` | Optional | A number from 0-10 indicating the default bottom padding of the Section Box-Wrapper (Default: `8`). |
+| `defaultPaddingLeft` | `number` | Optional | A number from 0-10 indicating the default right padding of the Section Box-Wrapper (Default: `2`). |
+| `defaultMaxWidth` | `number` | Optional | A number indicating the default max width in px of the Section Box-Wrapper (Default: `1200`). |
+| `defaultTextAlignment` | `string` | Optional | A string (`"left"`, `"right"`, or `"center"`) indicating the default alignment of the Section Box-Wrapper (Default: `"center"`). |
+| `defaultTextTheme` | `string` | Optional | A string (`"dark-bg"` or `"light-bg"`) indicating the default text theme to use for the component. |
+| `defaultBackgroundColor` | `string` | Optional | A CSS color value indicating the default background color (Default: none). |
+| `enableHeader` | `boolean` | Optional | When true, allows content authors to add a section-header to this section type (Default: `false)`). |
+| `location` | `array`/`string` | Optional | Where the component can appear; can include `'header'`, `'main'`, and `'footer'` (Default: `['main']`). |
+| `properties` | `array`/`object` | Optional | Defines properties that content authors can configure within the page editor. For details see [custom properties](/docs/studio/developers/features/properties). |
+
+## Example
+
+An example of the `section` tag is shown below.
+
+```jsx
+<Section dataRef={content.section} enableHeader={true}>
+...
+</Section>
+```
diff --git a/docs/studio/developers/utility/_category_.json b/docs/studio/developers/utility/_category_.json
deleted file mode 100644
index b7d232f5..00000000
--- a/docs/studio/developers/utility/_category_.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "position": 50,
- "label": "Utility Tags"
-}
diff --git a/docs/studio/index.mdx b/docs/studio/index.mdx
index fd090fc4..db345cc1 100644
--- a/docs/studio/index.mdx
+++ b/docs/studio/index.mdx
@@ -10,6 +10,6 @@ sidebar_position: 1
* **Designers** can quickly customize branding and styles
* **Marketers** can build out pages and adjust content to suit
-Studio ships with **over 40 pre-built block components** that make it easy to build pages. Each of these can be customized with your own code and styles. You can also [build your own components](/docs/studio/developers/components/section).
+Studio ships with **over 40 pre-built block components** that make it easy to build pages. Each of these can be customized with your own code and styles. You can also [build your own components](/docs/studio/developers/).
By default, Studio is pre-configured with sane defaults, but there are [many ways to customize your theme](/docs/studio/developers/custom-themes).
diff --git a/docusaurus.config.js b/docusaurus.config.js
index c45864dc..60b1d338 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -643,7 +643,7 @@ const config = {
redirects: [
// /docs/oldDoc -> /docs/newDoc
{ to: '/docs/api/commerce-extensions', from: '/docs/api/commerce-extensions/commerce-extensions-introduction'},
- { to: '/docs/studio/developers/custom-themes/css-variables', from: '/docs/cx-studio/developers/custom-themes/css-variables'},
+ { to: '/docs/studio/developers/css-variables', from: '/docs/cx-studio/developers/custom-themes/css-variables'},
{ to: '/docs/studio/Insights/Setting-up-an-AB-Test', from: '/docs/cx-studio/Insights/Setting-up-an-AB-Test'},
{ to: '/changelog/Studio-Release-Notes/2022/Release-145-July-17-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-145-July-17-2022'},
{ to: '/docs/studio/content/advanced-page-editing/Adding-Meta-Keywords', from: '/docs/cx-studio/content/advanced-page-editing/Adding-Meta-Keywords'},
@@ -674,7 +674,7 @@ const config = {
{ to: '/changelog/Studio-Release-Notes/2022/Release-147-August-10-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-147-August-10-2022'},
{ to: '/docs/studio/Integrations/stripe-payment-intents', from: '/docs/cx-studio/Integrations/stripe-payment-intents'},
{ to: '/docs/studio/Integrations/Integrating-Google-Tag-Manager', from: '/docs/cx-studio/Integrations/Integrating-Google-Tag-Manager'},
- { to: '/docs/studio/design/Header-and-Footer/Managing-Social-Links-in-your-Footer', from: '/docs/cx-studio/design/Header-and-Footer/Managing-Social-Links-in-your-Footer'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Managing-Social-Links-in-your-Footer', from: '/docs/cx-studio/design/Header-and-Footer/Managing-Social-Links-in-your-Footer'},
{ to: '/docs/studio/content/Media-Management/Hyperlinking-Images', from: '/docs/cx-studio/content/Media-Management/Hyperlinking-Images'},
{ to: '/docs/studio/Integrations/Integrating-DISQUS', from: '/docs/cx-studio/Integrations/Integrating-DISQUS'},
{ to: '/docs/studio/developers/features/properties', from: '/docs/cx-studio/developers/features/properties'},
@@ -691,11 +691,11 @@ const config = {
{ to: '/docs/studio/Settings/Domain-Management/Connecting-your-Shopify-Domain', from: '/docs/cx-studio/Settings/Domain-Management/Connecting-your-Shopify-Domain'},
{ to: '/docs/studio/Integrations/Integrating-Weglot', from: '/docs/cx-studio/Integrations/Integrating-Weglot'},
{ to: '/changelog/Studio-Release-Notes/2022/Release-129-Jan-16-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-129-Jan-16-2022'},
- { to: '/docs/studio/design/Header-and-Footer/How-to-customize-header-color', from: '/docs/cx-studio/design/Header-and-Footer/How-to-customize-header-color'},
- { to: '/docs/studio/design/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer', from: '/docs/cx-studio/design/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/How-to-customize-header-color', from: '/docs/cx-studio/design/Header-and-Footer/How-to-customize-header-color'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer', from: '/docs/cx-studio/design/Header-and-Footer/Removing-the-Unstack-Branding-from-your-Footer'},
{ to: '/docs/commerce-manager/subscriptions/subscription-plans/managing-subscription-plans-cm', from: '/docs/subscriptions/subscription-plans/managing-subscription-plans-cm'},
{ to: '/docs/studio/Integrations/Integrating-Calendly', from: '/docs/cx-studio/Integrations/Integrating-Calendly'},
- { to: '/docs/studio/design/Header-and-Footer/How-to-add-a-button-to-your-header', from: '/docs/cx-studio/design/Header-and-Footer/How-to-add-a-button-to-your-header'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/How-to-add-a-button-to-your-header', from: '/docs/cx-studio/design/Header-and-Footer/How-to-add-a-button-to-your-header'},
{ to: '/docs/studio/developers/eCommerce/Content-for-a-non-converting-user-who-visits-a-popular-product-page', from: '/docs/cx-studio/developers/eCommerce/Content-for-a-non-converting-user-who-visits-a-popular-product-page'},
{ to: '/docs/studio/content/advanced-page-editing/Saving-a-Page-as-a-Template', from: '/docs/cx-studio/content/advanced-page-editing/Saving-a-Page-as-a-Template'},
{ to: '/docs/commerce-manager/organizations/org-pxm-entities-in-commerce-manager/create-org_pxm_hierarchy', from: '/docs/commerce-cloud/organizations/organizations-in-commerce-manager/org-pxm-entities-in-commerce-manager/create-org_pxm_hierarchy'},
@@ -704,14 +704,13 @@ const config = {
{ to: '/docs/studio/content/Blog-Management/Adding-an-image-to-a-blog-article', from: '/docs/cx-studio/content/Blog-Management/Adding-an-image-to-a-blog-article'},
{ to: '/docs/promotions-builder/promotions-builder-api/cart-level-promotions/create-a-cart-percent-discount-promotion', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/cart-rule-promotions/create-a-cart-percent-discount-rule-promotion'},
{ to: '/docs/commerce-manager/product-experience-manager/variations/', from: '/docs/pxm/products/pxm-product-variations/variations'},
- { to: '/docs/studio/developers/custom-themes/headers-footers', from: '/docs/cx-studio/developers/custom-themes/headers-footers'},
{ to: '/docs/api/merchant-realm-mappings/get-merchant-realm-mapping', from: '/docs/commerce-cloud/authentication/single-sign-on/merchant-realm-mappings/get-merchant-realm-mapping'},
{ to: '/docs/studio/Integrations/Using-the-Facebook-Pixel', from: '/docs/cx-studio/Integrations/Using-the-Facebook-Pixel'},
{ to: '/guides/How-To/Custom-Data/create-a-wishlist-resource', from: '/docs/commerce-cloud/custom-data/create-a-wishlist-resource'},
{ to: '/docs/promotions-builder/promotions-builder-api/item-level-promotions/create-limitation-and-condition-promotion', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/item-rule-promotions/create-limitation-and-condition-rule-promotion'},
{ to: '/docs/studio/design/Design-&-Styles/Using-your-Style-Guide', from: '/docs/cx-studio/design/Design-&-Styles/Using-your-Style-Guide'},
- { to: '/docs/studio/developers/e-commerce/cart-and-drawer-soon', from: '/docs/cx-studio/developers/e-commerce/cart-and-drawer-soon'},
- { to: '/docs/studio/design/Header-and-Footer/Adding-&-Removing-Header-Dropdowns', from: '/docs/cx-studio/design/Header-and-Footer/Adding-&-Removing-Header-Dropdowns'},
+ { to: '/docs/studio/developers/tags/cart-and-drawer-soon', from: '/docs/cx-studio/developers/e-commerce/cart-and-drawer-soon'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Adding-&-Removing-Header-Dropdowns', from: '/docs/cx-studio/design/Header-and-Footer/Adding-&-Removing-Header-Dropdowns'},
{ to: '/docs/studio/Integrations/Integrating-Mailchimp', from: '/docs/cx-studio/Integrations/Integrating-Mailchimp'},
{ to: '/docs/studio/content/Forms-&-Contacts/Warning-when-using-email-less-form', from: '/docs/cx-studio/content/Forms-&-Contacts/Warning-when-using-email-less-form'},
{ to: '/docs/api/personal-data/post-erasure-request', from: '/docs/commerce-cloud/personal-data/personal-data-erasure-requests-api/create-personal-data-erasure-request'},
@@ -751,7 +750,7 @@ const config = {
{ to: '/changelog/Studio-Release-Notes/2022/Release-137-April-4-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-137-April-4-2022'},
{ to: '/docs/studio/Integrations/Adding-HTML-CSS-or-JavaScript-to-all-your-pages', from: '/docs/cx-studio/Integrations/Adding-HTML-CSS-or-JavaScript-to-all-your-pages'},
{ to: '/docs/promotions-builder/promotions-builder-api/action-limitations/create-limitations-and-exclusion-rule-promotion', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/action-limitations/create-limitations-and-exclusion-rule-promotion'},
- { to: '/docs/studio/developers/components/header-and-footer', from: '/docs/cx-studio/developers/components/header-and-footer'},
+ { to: '/docs/studio/developers/tags/header-and-footer', from: '/docs/cx-studio/developers/components/header-and-footer'},
{ to: '/docs/authentication/single-sign-on/user-authentication-password-profiles-api/update-a-user-authentication-password-profile', from: '/docs/commerce-cloud/authentication/single-sign-on/user-authentication-password-profiles-api/update-a-user-authentication-password-profile'},
{ to: '/docs/authentication/single-sign-on/user-authentication-password-profiles-api/create-a-user-authentication-password-profile', from: '/docs/commerce-cloud/authentication/single-sign-on/user-authentication-password-profiles-api/create-a-user-authentication-password-profile'},
{ to: '/docs/authentication/single-sign-on/user-authentication-password-profiles-api/password-profile-overview', from: '/docs/commerce-cloud/authentication/single-sign-on/user-authentication-password-profiles-api/password-profile-overview'},
@@ -784,7 +783,7 @@ const config = {
{ to: '/docs/promotions-builder/promotions-builder-api/promotions-builder-management/get-a-promotions-builder-by-id', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/rule-promotions-management/get-rule-promotions'},
{ to: '/docs/studio/Shopify/Using-Add-to-Cart-Buttons', from: '/docs/cx-studio/Shopify/Using-Add-to-Cart-Buttons'},
{ to: '/docs/promotions-builder/promotions-builder-api/promotions-builder-management/get-a-promotions-builder-by-id', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/rule-promotions-management/get-a-rule-promotion-by-id'},
- { to: '/docs/studio/design/Header-and-Footer/Header-Formatting-Options', from: '/docs/cx-studio/design/Header-and-Footer/Header-Formatting-Options'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Header-Formatting-Options', from: '/docs/cx-studio/design/Header-and-Footer/Header-Formatting-Options'},
{ to: '/docs/authentication/single-sign-on/user-authentication-password-profiles-api/delete-a-user-authentication-password-profile', from: '/docs/commerce-cloud/authentication/single-sign-on/user-authentication-password-profiles-api/delete-a-user-authentication-password-profile'},
{ to: '/docs/promotions-builder/promotions-builder-codes/delete-multiple-rule-promotion-codes', from: '/docs/commerce-cloud/rule-promotions/rule-promotion-codes/delete-multiple-rule-promotion-codes'},
{ to: '/docs/studio/content/advanced-page-editing/Managing-Redirects', from: '/docs/cx-studio/content/advanced-page-editing/Managing-Redirects'},
@@ -806,7 +805,7 @@ const config = {
{ to: '/docs/studio/Insights/Activity', from: '/docs/cx-studio/Insights/Activity'},
{ to: '/docs/studio/developers/tags/box', from: '/docs/cx-studio/developers/tags/box'},
{ to: '/docs/commerce-manager/subscriptions/subscription-plans/deleting-plans', from: '/docs/subscriptions/subscription-plans/deleting-plans'},
- { to: '/docs/studio/developers/custom-themes/custom-components', from: '/docs/cx-studio/developers/custom-themes/custom-components'},
+ { to: '/docs/studio/developers/tags/actions', from: '/docs/cx-studio/developers/custom-themes/custom-components'},
{ to: '/docs/studio/design/Design-&-Styles/Adjusting-Quotation-Mark-Styling', from: '/docs/cx-studio/design/Design-&-Styles/Adjusting-Quotation-Mark-Styling'},
{ to: '/docs/studio/content/advanced-page-editing/Using-Conditional-Content', from: '/docs/cx-studio/content/advanced-page-editing/Using-Conditional-Content'},
{ to: '/changelog/Studio-Release-Notes/2022/Release-140-May-9-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-140-May-9-2022'},
@@ -836,11 +835,11 @@ const config = {
{ to: '/docs/authentication/single-sign-on/authentication-realm-api/get-all-authentication-realms', from: '/docs/commerce-cloud/authentication/single-sign-on/authentication-realm-api/get-all-authentication-realms'},
{ to: '/docs/authentication/single-sign-on/openid-connect-profiles-api/get-an-oidc-profile', from: '/docs/commerce-cloud/authentication/single-sign-on/openid-connect-profiles-api/get-an-oidc-profile'},
{ to: '/docs/studio/Integrations/Integrating-yotpo', from: '/docs/cx-studio/Integrations/Integrating-yotpo'},
- { to: '/docs/studio/design/Header-and-Footer/How-to-make-my-header-transparent', from: '/docs/cx-studio/design/Header-and-Footer/How-to-make-my-header-transparent'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/How-to-make-my-header-transparent', from: '/docs/cx-studio/design/Header-and-Footer/How-to-make-my-header-transparent'},
{ to: '/guides/How-To/paymentgateways/integrate-applepay-with-swift', from: '/docs/commerce-cloud/payments/payments-developer/integrate-applepay-with-swift'},
{ to: '/docs/studio/content/Basic-Page-Editing/Deleting-a-Page', from: '/docs/cx-studio/content/Basic-Page-Editing/Deleting-a-Page'},
{ to: '/docs/api/application-keys/application-keys-introduction', from: '/docs/commerce-cloud/authentication/application-keys/application-keys-overview'},
- { to: '/docs/studio/developers/e-commerce/product', from: '/docs/cx-studio/developers/e-commerce/product'},
+ { to: '/docs/studio/developers/tags/product', from: '/docs/cx-studio/developers/e-commerce/product'},
{ to: '/docs/authentication/single-sign-on/user-authentication-info-api/delete-a-user-authentication-info', from: '/docs/commerce-cloud/authentication/single-sign-on/user-authentication-info-api/delete-a-user-authentication-info'},
{ to: '/docs/promotions-builder/promotions-builder-api/promotions-builder-management/delete-a-promotions-builder', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/rule-promotions-management/delete-a-rule-promotion'},
{ to: '/docs/studio/developers/tags/actions', from: '/docs/cx-studio/developers/tags/actions'},
@@ -862,10 +861,10 @@ const config = {
{ to: '/docs/commerce-manager/subscriptions/offerings/deleting-offerings', from: '/docs/subscriptions/offerings/deleting-offerings'},
{ to: '/docs/studio/Shopify/Shopify-Media', from: '/docs/cx-studio/Shopify/Shopify-Media'},
{ to: '/docs/studio/content/Blog-Management/Adding-tags-to-blog-posts', from: '/docs/cx-studio/content/Blog-Management/Adding-tags-to-blog-posts'},
- { to: '/docs/studio/developers/components', from: '/docs/cx-studio/developers/components'},
+ { to: '/docs/studio/developers', from: '/docs/cx-studio/developers/components'},
{ to: '/docs/studio/content/Basic-Page-Editing/Understanding-page-structure', from: '/docs/cx-studio/content/Basic-Page-Editing/Understanding-page-structure'},
- { to: '/docs/studio/developers/utility/generator', from: '/docs/cx-studio/developers/utility/generator'},
- { to: '/docs/studio/developers/e-commerce/product-options', from: '/docs/cx-studio/developers/e-commerce/product-options'},
+ { to: '/docs/studio/developers/tags/generator', from: '/docs/cx-studio/developers/utility/generator'},
+ { to: '/docs/studio/developers/tags/product-options', from: '/docs/cx-studio/developers/e-commerce/product-options'},
{ to: '/docs/promotions-builder/promotions-builder-api/item-level-promotions/create-a-mixed-of-cart-and-item-percent-discount', from: '/docs/commerce-cloud/rule-promotions/rule-promotions-api/item-rule-promotions/create-a-mixed-of-cart-and-item-percent-discount'},
{ to: '/docs/authentication/Tokens/implicit-token', from: '/docs/commerce-cloud/authentication/Tokens/implicit-token'},
{ to: '/docs/api/personal-data/get-logs-ttl', from: '/docs/commerce-cloud/personal-data/logs-ttl-settings/get-logs-ttl-settings'},
@@ -880,7 +879,7 @@ const config = {
{ to: '/docs/studio/Integrations/Integrating-reCAPTCHA', from: '/docs/cx-studio/Integrations/Integrating-reCAPTCHA'},
{ to: '/docs/commerce-manager/subscriptions/overview', from: '/docs/subscriptions/overview'},
{ to: '/docs/studio/content/Forms-&-Contacts/Enabling-notifications-for-new-leads', from: '/docs/cx-studio/content/Forms-&-Contacts/Enabling-notifications-for-new-leads'},
- { to: '/docs/studio/developers/components/section', from: '/docs/cx-studio/developers/components/section'},
+ { to: '/docs/studio/developers/tags/section', from: '/docs/cx-studio/developers/components/section'},
{ to: '/guides/How-To/Subscriptions/subscription-models/subscribe-save', from: '/docs/subscriptions/subscription-models/subscribe-save'},
{ to: '/docs/authentication/Tokens/account-management-authentication-token', from: '/docs/commerce-cloud/authentication/Tokens/account-management-authentication-token'},
{ to: '/docs/authentication/single-sign-on/customer-authentication-settings/get-customer-authentication-settings', from: '/docs/commerce-cloud/authentication/single-sign-on/customer-authentication-settings/get-customer-authentication-settings'},
@@ -927,9 +926,9 @@ const config = {
{ to: '/guides/How-To/orders/send-order-confirmations', from: '/docs/commerce-cloud/orders/send-order-confirmations'},
{ to: '/changelog/Studio-Release-Notes/2022/Release-150-September-12-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-150-September-12-2022'},
{ to: '/guides/How-To/Personal-Data/erase-personal-data', from: '/docs/commerce-cloud/personal-data/erase-personal-data'},
- { to: '/docs/studio/design/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page', from: '/docs/cx-studio/design/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page', from: '/docs/cx-studio/design/Header-and-Footer/Adjusting-the-Header-color-of-a-Landing-page'},
{ to: '/docs/studio/Integrations/Stock-Media-Integrations', from: '/docs/cx-studio/Integrations/Stock-Media-Integrations'},
- { to: '/docs/studio/developers/e-commerce/product-price', from: '/docs/cx-studio/developers/e-commerce/product-price'},
+ { to: '/docs/studio/developers/tags/product-price', from: '/docs/cx-studio/developers/e-commerce/product-price'},
{ to: '/docs/api/integrations/get-integration', from: '/docs/commerce-cloud/integrations/integrations-api/get-an-integration'},
{ to: '/docs/api/integrations/get-integration', from: '/docs/commerce-cloud/integrations/integrations-api/get-all-integrations'},
{ to: '/docs/commerce-manager/product-experience-manager/jobs/', from: '/docs/pxm/jobs-api/jobs'},
@@ -947,7 +946,7 @@ const config = {
{ to: '/docs/studio/content/Blog-Management/Adding-a-dividing-line-to-a-blog-post', from: '/docs/cx-studio/content/Blog-Management/Adding-a-dividing-line-to-a-blog-post'},
{ to: '/docs/studio/content/Dynamic-Pages-&-Databases/Data-Driven-Content', from: '/docs/cx-studio/content/Dynamic-Pages-&-Databases/Data-Driven-Content'},
{ to: '/docs/ship-groups/shipping-groups/shipping-groups-api/get-cart-shipping-groups', from: '/docs/commerce-cloud/shipping-groups/shipping-groups-api/get-cart-shipping-groups'},
- { to: '/docs/studio/developers/utility/jsonparser', from: '/docs/cx-studio/developers/utility/jsonparser'},
+ { to: '/docs/studio/developers/tags/jsonparser', from: '/docs/cx-studio/developers/utility/jsonparser'},
{ to: '/docs/commerce-manager/subscriptions/products/creating-products', from: '/docs/subscriptions/products/creating-products'},
{ to: '/docs/commerce-manager/promotions-standard/cart-level-promotions/cart-level-percentage-discount', from: '/docs/commerce-cloud/promotions/promotions-cm/cart-level-promotions/cart-level-percentage-discount'},
{ to: '/guides/How-To/paymentgateways/implement-manual-gateways', from: '/docs/commerce-cloud/payments/payments-developer/implement-manual-gateways'},
@@ -981,7 +980,7 @@ const config = {
{ to: '/docs/studio/Settings/account-management/Updating-your-credit-card', from: '/docs/cx-studio/Settings/account-management/Updating-your-credit-card'},
{ to: '/docs/commerce-manager/product-experience-manager/hierarchies/overview', from: '/docs/pxm/hierarchies/hierarchies-cm/overview'},
{ to: '/guides/How-To/Accounts/authenticate-using-passwordless-authentication', from: '/docs/commerce-cloud/accounts/authenticate-using-passwordless-authentication'},
- { to: '/docs/studio/design/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size', from: '/docs/cx-studio/design/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size', from: '/docs/cx-studio/design/Header-and-Footer/Adjusting-Header-&-Footer-Logo-Size'},
{ to: '/docs/studio/Shopify/Managing-the-URLs-of-Shopify-Landing-Pages', from: '/docs/cx-studio/Shopify/Managing-the-URLs-of-Shopify-Landing-Pages'},
{ to: '/docs/commerce-manager/product-experience-manager/Products/overview', from: '/docs/pxm/products/pxm-products-commerce-manager/overview'},
{ to: '/docs/commerce-manager/promotions-standard/cart-level-promotions/cart-level-fixed-discount', from: '/docs/commerce-cloud/promotions/promotions-cm/cart-level-promotions/cart-level-fixed-discount'},
@@ -1033,7 +1032,7 @@ const config = {
{ to: '/docs/api/pxm/products/get-all-product-tags', from: '/docs/pxm/products/ep-pxm-products-api/get-product-tags'},
{ to: '/changelog/Studio-Release-Notes/2022/Release-144-July-4-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-144-July-4-2022'},
{ to: '/changelog/Studio-Release-Notes/2022/Release-144-July-4-2022', from: '/docs/cx-studio/Release-Notes/2022/Release-146-July-26-2022'},
- { to: '/docs/studio/developers/e-commerce/product-inventory', from: '/docs/cx-studio/developers/e-commerce/product-inventory'},
+ { to: '/docs/studio/developers/tags/product-inventory', from: '/docs/cx-studio/developers/e-commerce/product-inventory'},
{ to: '/docs/api/promotions/promotions-standard-introduction', from: '/docs/commerce-cloud/promotions/promotions-overview'},
{ to: '/docs/api/pxm/pricebooks/price-book-modifiers', from: '/docs/pxm/pricebooks/pxm-pricebooks-modifiers/create-a-price-modifier'},
{ to: '/docs/api/promotions/get-all-promotions', from: '/docs/commerce-cloud/promotions/promotion-management/get-a-promotion'},
@@ -1106,7 +1105,7 @@ const config = {
{ to: '/docs/api/pxm/inventory/get-stock-for-multiple-products', from: '/docs/pxm/inventories/get-multiple-stocks'},
{ to: '/docs/studio/developers/tags/plaintext', from: '/docs/cx-studio/developers/tags/plaintext'},
{ to: '/guides/How-To/paymentgateways/generate-cardconnect-token', from: '/docs/commerce-cloud/payments/payments-developer/generate-cardconnect-token'},
- { to: '/docs/studio/design/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation', from: '/docs/cx-studio/design/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation'},
+ { to: '/docs/studio/design/layouts/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation', from: '/docs/cx-studio/design/Header-and-Footer/Adding-links-to-your-Header-&-Footer-Navigation'},
{ to: '/guides/How-To/paymentgateways/generate-cybersource-keys-tokens', from: '/docs/commerce-cloud/payments/payments-developer/generate-cybersource-keys-tokens'},
{ to: '/docs/api/commerce-extensions', from: '/docs/commerce-cloud/commerce-extensions/commerce-extension-in-cm'},
{ to: '/docs/api/pxm/products/create-hierarchy', from: '/docs/pxm/hierarchies/hierarchies-cm/creating_hierarchies'},