From a9fa44b413d42b71e2bd6a6a2afbf936f8e4c829 Mon Sep 17 00:00:00 2001 From: Jo Date: Thu, 26 Sep 2024 17:33:50 +0100 Subject: [PATCH 01/16] first draft --- docs/studio/design/layouts/_category_.json | 4 ++++ docs/studio/design/layouts/overview.mdx | 11 +++++++++++ 2 files changed, 15 insertions(+) create mode 100644 docs/studio/design/layouts/_category_.json create mode 100644 docs/studio/design/layouts/overview.mdx 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/overview.mdx b/docs/studio/design/layouts/overview.mdx new file mode 100644 index 00000000..616c7e5c --- /dev/null +++ b/docs/studio/design/layouts/overview.mdx @@ -0,0 +1,11 @@ +--- +title: Overview +nav_label: Overview +sidebar_position: 5 +--- + +You can use the Layout editor to design elements that make up your pages. Layouts determine how information, visuals, and interactive components are organized to guide visitors through the content and achieve specific goals, such as making a purchase or signing up for an offer. + +Using the Layout editor you can design template layouts that you can apply to your Studio pages, streamlining the process of developing your online storefront, saving time and improving the user experience. + + From 579dec5190f47e3e842ad917ca1c2be1f390d442 Mon Sep 17 00:00:00 2001 From: Jo Date: Fri, 27 Sep 2024 12:19:00 +0100 Subject: [PATCH 02/16] first draft --- ...Styling-for-light-and-dark-backgrounds.mdx | 2 +- docs/studio/design/branding/_category_.json | 4 ++++ docs/studio/design/branding/branding.mdx | 17 ++++++++++++++ .../design/layouts/creating-layouts.mdx | 23 +++++++++++++++++++ docs/studio/design/layouts/overview.mdx | 10 ++++++-- docs/studio/design/layouts/using-layouts.mdx | 23 +++++++++++++++++++ 6 files changed, 76 insertions(+), 3 deletions(-) create mode 100644 docs/studio/design/branding/_category_.json create mode 100644 docs/studio/design/branding/branding.mdx create mode 100644 docs/studio/design/layouts/creating-layouts.mdx create mode 100644 docs/studio/design/layouts/using-layouts.mdx 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..d1435288 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: 5 --- ## How to adjust the elements in a section for light/dark 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..87370c5c --- /dev/null +++ b/docs/studio/design/branding/branding.mdx @@ -0,0 +1,17 @@ +--- +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 either + - **Logo for light backgrounds** + - **Logo for dark backgrounds** + - **Favicon** + - **Social share image** + + to open the Studio Media Editor and add your images. diff --git a/docs/studio/design/layouts/creating-layouts.mdx b/docs/studio/design/layouts/creating-layouts.mdx new file mode 100644 index 00000000..3144c22a --- /dev/null +++ b/docs/studio/design/layouts/creating-layouts.mdx @@ -0,0 +1,23 @@ +--- +title: Creating Layouts +nav_label: Creating Layouts +sidebar_position: 10 +--- + +To access the Layouts Editor: + +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 a layout component from the list. You can choose one of the following: + + | Layout component | Description | + | --- | --- | + | **Single Column Layout** | Content is stacked in a vertical column. This layout is useful for narrow screens sizes, so its commonly used in mobile design or responsive web layouts. | + | **Side Navigation Layout** | A user interface element is placed on the left-hand side of a page with a main content area on the right. It provides a menu that allows users to navigate through the different sections or pages. This layout is useful for helping users access various parts of the storefront while keeping the main content area focused and uncluttered. | + +1. Select **Create layout**. + + + diff --git a/docs/studio/design/layouts/overview.mdx b/docs/studio/design/layouts/overview.mdx index 616c7e5c..b6fff88f 100644 --- a/docs/studio/design/layouts/overview.mdx +++ b/docs/studio/design/layouts/overview.mdx @@ -4,8 +4,14 @@ nav_label: Overview sidebar_position: 5 --- -You can use the Layout editor to design elements that make up your pages. Layouts determine how information, visuals, and interactive components are organized to guide visitors through the content and achieve specific goals, such as making a purchase or signing up for an offer. +You can use the Layout editor to design the structure of your pages. Layouts determine how information, visuals, and interactive components are organized to guide visitors through the content toward specific goals, such as making a purchase or signing up for an offer. + +With the Layout editor, you can create template layouts that you then apply to your Studio pages, streamlining the process of developing your Studio pages, saving time and improving the user experience of your pages. + +When you navigate to **Layouts**, you can see a list of all your current layouts and the number of pages using each one. + +In addition, you can see what layouts are being used on your default pages, and you can change them if you wish. + -Using the Layout editor you can design template layouts that you can apply to your Studio pages, streamlining the process of developing your online storefront, saving time and improving the user experience. diff --git a/docs/studio/design/layouts/using-layouts.mdx b/docs/studio/design/layouts/using-layouts.mdx new file mode 100644 index 00000000..f45c580d --- /dev/null +++ b/docs/studio/design/layouts/using-layouts.mdx @@ -0,0 +1,23 @@ +--- +title: Using Layouts +nav_label: Using Layouts +sidebar_position: 15 +--- + +Once you have created your layouts, you need to apply them to your pages. + +1. From Studio, select **Content**. +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 a layout component from the list. You can choose one of the following: + + | Layout component | Description | + | --- | --- | + | Single Column Layout | Content is stacked in a vertical column. This layout is useful for narrow screens sizes, so its commonly used in mobile design or responsive web layouts. | + | Side Navigation Layout | A user interface element is placed on the left-hand side of a page with a main content area on the right. It provides a menu that allows users to navigate through the different sections or pages. This layout is useful for helping users access various parts of the storefront while keeping the main content area focused and uncluttered. | + +1. Select **Create layout**. + + + From d2d58f498b614c0828cfcff2c63f808ca0e57b8e Mon Sep 17 00:00:00 2001 From: Jo Date: Fri, 27 Sep 2024 12:27:27 +0100 Subject: [PATCH 03/16] first draft --- .../Styling-for-light-and-dark-backgrounds.mdx | 2 +- .../Design-&-Styles/Using-your-Style-Guide.mdx | 2 +- docs/studio/design/layouts/using-layouts.mdx | 17 ++++++----------- 3 files changed, 8 insertions(+), 13 deletions(-) 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 d1435288..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: 5 +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/layouts/using-layouts.mdx b/docs/studio/design/layouts/using-layouts.mdx index f45c580d..63cbb487 100644 --- a/docs/studio/design/layouts/using-layouts.mdx +++ b/docs/studio/design/layouts/using-layouts.mdx @@ -7,17 +7,12 @@ sidebar_position: 15 Once you have created your layouts, you need to apply them to your pages. 1. From Studio, select **Content**. -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 a layout component from the list. You can choose one of the following: - - | Layout component | Description | - | --- | --- | - | Single Column Layout | Content is stacked in a vertical column. This layout is useful for narrow screens sizes, so its commonly used in mobile design or responsive web layouts. | - | Side Navigation Layout | A user interface element is placed on the left-hand side of a page with a main content area on the right. It provides a menu that allows users to navigate through the different sections or pages. This layout is useful for helping users access various parts of the storefront while keeping the main content area focused and uncluttered. | - -1. Select **Create layout**. +1. Select **Website** to view a list of all your pages. +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. Open the page to check that the layout is working correctly. +1. When you are happy with your page, you can publish your page. From 013072b34d29ef546763ec62d8f163dfe7b86e69 Mon Sep 17 00:00:00 2001 From: Jo Date: Tue, 1 Oct 2024 09:05:07 +0100 Subject: [PATCH 04/16] first draft --- docs/studio/design/layouts/overview.mdx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/studio/design/layouts/overview.mdx b/docs/studio/design/layouts/overview.mdx index b6fff88f..6eb08a31 100644 --- a/docs/studio/design/layouts/overview.mdx +++ b/docs/studio/design/layouts/overview.mdx @@ -6,11 +6,22 @@ sidebar_position: 5 You can use the Layout editor to design the structure of your pages. Layouts determine how information, visuals, and interactive components are organized to guide visitors through the content toward specific goals, such as making a purchase or signing up for an offer. -With the Layout editor, you can create template layouts that you then apply to your Studio pages, streamlining the process of developing your Studio pages, saving time and improving the user experience of your pages. +- You create layouts using the Layout component. +- With the Layout editor, you can manage your template layouts. 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. +- You apply your layouts to your pages. + +Layouts streamline the process of developing your Studio pages, saving time and improving your users experience of your pages. + +## Default Layouts + +There are two default layouts. + +| Default Layout | Description | +| --- | --- | +| + -When you navigate to **Layouts**, you can see a list of all your current layouts and the number of pages using each one. -In addition, you can see what layouts are being used on your default pages, and you can change them if you wish. From 5530c838d4aaf40ea44d8fb31f1ea7e3f89b46dd Mon Sep 17 00:00:00 2001 From: Jo Date: Tue, 1 Oct 2024 13:01:16 +0100 Subject: [PATCH 05/16] first draft --- docs/studio/design/layouts/overview.mdx | 5 +- docs/studio/developers/components.mdx | 2 +- docs/studio/developers/components/layout.mdx | 72 +++++++++++++++++++ .../{headers-footers.mdx => layouts.mdx} | 0 docusaurus.config.js | 2 +- 5 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 docs/studio/developers/components/layout.mdx rename docs/studio/developers/custom-themes/{headers-footers.mdx => layouts.mdx} (100%) diff --git a/docs/studio/design/layouts/overview.mdx b/docs/studio/design/layouts/overview.mdx index 6eb08a31..a1a1a154 100644 --- a/docs/studio/design/layouts/overview.mdx +++ b/docs/studio/design/layouts/overview.mdx @@ -7,7 +7,7 @@ sidebar_position: 5 You can use the Layout editor to design the structure of your pages. Layouts determine how information, visuals, and interactive components are organized to guide visitors through the content toward specific goals, such as making a purchase or signing up for an offer. - You create layouts using the Layout component. -- With the Layout editor, you can manage your template layouts. 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. +- With the Layout editor, you can manage your layouts. 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. - You apply your layouts to your pages. Layouts streamline the process of developing your Studio pages, saving time and improving your users experience of your pages. @@ -18,7 +18,8 @@ There are two default layouts. | Default Layout | Description | | --- | --- | -| +| Full header - Full Footer | | +| Minimal header - Minimal footer | | diff --git a/docs/studio/developers/components.mdx b/docs/studio/developers/components.mdx index c6b396b3..f8cd6142 100644 --- a/docs/studio/developers/components.mdx +++ b/docs/studio/developers/components.mdx @@ -1,7 +1,7 @@ --- title: Custom Components nav_label: Custom Components -sidebar_position: 20 +sidebar_position: 1 --- How to customize existing components or add your own. diff --git a/docs/studio/developers/components/layout.mdx b/docs/studio/developers/components/layout.mdx new file mode 100644 index 00000000..cdfa0546 --- /dev/null +++ b/docs/studio/developers/components/layout.mdx @@ -0,0 +1,72 @@ +--- +title: Layout +nav_label: Layout +sidebar_position: 20 +--- + +The `` tag is a wrapper that allows you to create custom page layouts using HTML, CSS, and Javascript. You can use the `` tag in your components. When you create a new component, simply add the `` tag as the outer wrapper for the component. + +## Layout Container + +The `` 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 `` 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. | +| `tagName` | `string` | Optional | Allows the container to be rendered as a specific HTML tag. This is useful for semantic HTML, ensuring headers render as `
` and footers render as `