diff --git a/addons/html_builder/static/src/core/building_blocks/builder_row.js b/addons/html_builder/static/src/core/building_blocks/builder_row.js
index ff34acff0b382..24b60d0df9291 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_row.js
+++ b/addons/html_builder/static/src/core/building_blocks/builder_row.js
@@ -15,6 +15,7 @@ export class BuilderRow extends Component {
         ...basicContainerBuilderComponentProps,
         label: { type: String, optional: true },
         tooltip: { type: String, optional: true },
+        className: { type: String, optional: true },
         slots: { type: Object, optional: true },
         level: { type: Number, optional: true },
         expand: { type: Boolean, optional: true },
@@ -51,6 +52,10 @@ export class BuilderRow extends Component {
         return this.props.level ? `o_we_sublevel_${this.props.level}` : "";
     }
 
+    getClass() {
+        return [this.getLevelClass(), this.props.className].filter((x) => x).join(" ");
+    }
+
     toggleCollapseContent() {
         this.state.expanded = !this.state.expanded;
     }
diff --git a/addons/html_builder/static/src/core/building_blocks/builder_row.xml b/addons/html_builder/static/src/core/building_blocks/builder_row.xml
index 412d834a503fd..e20a573b227ad 100644
--- a/addons/html_builder/static/src/core/building_blocks/builder_row.xml
+++ b/addons/html_builder/static/src/core/building_blocks/builder_row.xml
@@ -3,7 +3,7 @@
 
 <t t-name="html_builder.BuilderRow">
     <BuilderComponent>
-        <div class="d-flex position-relative p-1 px-2 ps-3 hb-row" t-att-class="this.getLevelClass()" t-ref="root" t-att-data-label="props.label">
+        <div class="d-flex position-relative p-1 px-2 ps-3 hb-row" t-att-class="this.getClass()" t-ref="root" t-att-data-label="props.label">
             <button t-ref="collapse"
                     class="o_we_collapse_toggler pt-1 d-none" t-att-class="{ 'active': state.expanded }"
                     title="Toggle more options"
diff --git a/addons/website_sale/static/src/website_builder/products_list_page_option.xml b/addons/website_sale/static/src/website_builder/products_list_page_option.xml
index fdb3f505ee8e7..bc7b129071d40 100644
--- a/addons/website_sale/static/src/website_builder/products_list_page_option.xml
+++ b/addons/website_sale/static/src/website_builder/products_list_page_option.xml
@@ -1,129 +1,283 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
+<!-- TODO AGAU: reimplement navigation improvements from commit 328c241fa58976bd5029dc526789113a88a333f2 -->
+
 <t t-name="website_sale.ProductsListPageOption">
-<BuilderRow label.translate="Layout">
-    <BuilderSelect action="'websiteConfig'">
-        <BuilderSelectItem id="'grid_view_opt'" actionParam="{views: []}">Grid</BuilderSelectItem>
-        <BuilderSelectItem actionParam="{views: ['website_sale.products_list_view']}">List</BuilderSelectItem>
-    </BuilderSelect>
-</BuilderRow>
-
-<BuilderRow label.translate="Size" applyTo="'#o_wsale_products_grid'" level="1">
-    <BuilderNumberInput action="'setPpg'" step="1"/>
-    <t t-if="this.isActiveItem('grid_view_opt')">
-        <span class="mx-2">by</span>
-        <BuilderButtonGroup action="'setPpr'">
-            <BuilderButton actionValue="2">2</BuilderButton>
-            <BuilderButton actionValue="3">3</BuilderButton>
-            <BuilderButton actionValue="4">4</BuilderButton>
+    <BuilderRow label.translate="Content Width" className="'o_wsale_editor_section'">
+        <BuilderButtonGroup action="'websiteConfig'">
+            <BuilderButton
+                    title.translate="Regular"
+                    classAction="'container'"
+                    actionParam="{views: []}"
+                    iconImg="'/website/static/src/img/snippets_options/content_width_normal.svg'"
+            />
+            <BuilderButton
+                    title.translate="Full"
+                    classAction="'container-fluid o_wsale_page_fluid'"
+                    actionParam="{views: ['website_sale.shop_fullwidth']}"
+                    iconImg="'/website/static/src/img/snippets_options/content_width_full.svg'"
+            />
         </BuilderButtonGroup>
-    </t>
-</BuilderRow>
-
-<BuilderRow label.translate="Gap" level="1">
-    <BuilderRange
-        styleAction="'--o-wsale-products-grid-gap'"
-        action="'setGap'"
-        min="0"
-        max="28"
-        unit="'px'"
-        displayRangeValue="true"/>
-</BuilderRow>
-
-<BuilderRow label.translate="Style" level="1">
-    <BuilderSelect action="'websiteConfig'">
-        <BuilderSelectItem classAction="''" actionParam="{views: []}">Default</BuilderSelectItem>
-        <BuilderSelectItem classAction="'o_wsale_design_cards'" actionParam="{views: ['website_sale.products_design_card']}">Cards</BuilderSelectItem>
-        <BuilderSelectItem classAction="'o_wsale_design_thumbs'" actionParam="{views: ['website_sale.products_design_thumbs']}">Thumbnails</BuilderSelectItem>
-        <BuilderSelectItem classAction="'o_wsale_design_grid'" actionParam="{views: ['website_sale.products_design_grid']}">Grid</BuilderSelectItem>
-    </BuilderSelect>
-</BuilderRow>
-
-<BuilderRow label.translate="Images Size" level="1">
-    <BuilderSelect action="'websiteConfig'">
-        <BuilderSelectItem classAction="'o_wsale_context_thumb_4_3'" actionParam="{views: ['website_sale.products_thumb_4_3']}">Landscape (4/3)</BuilderSelectItem>
-        <BuilderSelectItem classAction="''" actionParam="{views: []}">Default (1/1)</BuilderSelectItem>
-        <BuilderSelectItem classAction="'o_wsale_context_thumb_4_5'" actionParam="{views: ['website_sale.products_thumb_4_5']}">Portrait (4/5)</BuilderSelectItem>
-        <BuilderSelectItem classAction="'o_wsale_context_thumb_2_3'" actionParam="{views: ['website_sale.products_thumb_2_3']}">Vertical (2/3)</BuilderSelectItem>
-    </BuilderSelect>
-</BuilderRow>
-
-<BuilderRow label.translate="Fill" level="2">
-    <BuilderButtonGroup action="'websiteConfig'">
-        <BuilderButton
-            classAction="''"
-            actionParam="{views: []}"
-            iconImg="'/website/static/src/img/snippets_options/content_width_normal.svg'">
-        </BuilderButton>
-        <BuilderButton
-            id="'thumb_cover'"
-            classAction="'o_wsale_context_thumb_cover'"
-            actionParam="{views: ['website_sale.products_thumb_cover']}"
-            iconImg="'/website/static/src/img/snippets_options/content_width_full.svg'">
-        </BuilderButton>
-    </BuilderButtonGroup>
-</BuilderRow>
+    </BuilderRow>
 
-<BuilderContext action="'websiteConfig'">
-    <BuilderRow label.translate="Search Bar">
-        <BuilderCheckbox actionParam="{views: ['website_sale.search']}"/>
+    <BuilderRow label.translate="Layout" className="'o_wsale_editor_section'">
+        <BuilderButtonGroup action="'websiteConfig'">
+            <BuilderButton
+                title.translate="Catalog of products"
+                id="'grid_view_opt'"
+                classAction="'o_wsale_layout_catalog'"
+                actionParam="{views: []}"
+                icon="'oi-apps'"
+            />
+            <BuilderButton
+                title.translate="List of products"
+                classAction="'o_wsale_layout_list'"
+                actionParam="{views: ['website_sale.products_list_view']}"
+                icon="'oi-view-list'"
+            />
+        </BuilderButtonGroup>
     </BuilderRow>
 
-    <BuilderRow label.translate="Product Description">
-        <BuilderCheckbox actionParam="{views: ['website_sale.products_description']}"/>
+    <BuilderRow label.translate="Size" applyTo="'#o_wsale_products_grid'" level="1">
+        <BuilderNumberInput action="'setPpg'" step="1"/>
+        <t t-if="this.isActiveItem('grid_view_opt')">
+            <span class="mx-2">by</span>
+            <BuilderSelect action="'setPpr'">
+                <BuilderSelectItem actionValue="2">2</BuilderSelectItem>
+                <BuilderSelectItem actionValue="3">3</BuilderSelectItem>
+                <BuilderSelectItem actionValue="4">4</BuilderSelectItem>
+                <BuilderSelectItem actionValue="5">5</BuilderSelectItem>
+            </BuilderSelect>
+        </t>
+    </BuilderRow>
+
+    <BuilderRow t-if="isActiveItem('grid_view_opt')" label.translate="Mobile" level="1">
+        <BuilderSelect action="'websiteConfig'">
+            <BuilderSelectItem actionParam="{views: ['website_sale.products_mobile_cols_single']}">1 Column</BuilderSelectItem>
+            <BuilderSelectItem actionParam="{views: []}">2 Columns</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Gap" level="1">
+        <BuilderRange
+            styleAction="'--o-wsale-products-grid-gap'"
+            action="'setGap'"
+            min="0"
+            max="28"
+            unit="'px'"
+            displayRangeValue="true"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Style" className="'o_wsale_editor_section'">
+        <BuilderSelect action="'reloadComposite'">
+            <t t-set="defaultLabel">Default</t>
+            <t t-set="cardsLabel">Cards</t>
+            <t t-set="thumbnailsLabel">Thumbnails</t>
+            <t t-set="gridLabel">Grid</t>
+            <t t-set="styles" t-value="[
+                {
+                    label: defaultLabel,
+                    className: '',
+                    views: [],
+                    gap: 16,
+                },
+                {
+                    label: cardsLabel,
+                    className: 'o_wsale_design_cards',
+                    views: ['website_sale.products_design_card'],
+                    gap: 16,
+                },
+                {
+                    label: thumbnailsLabel,
+                    className: 'o_wsale_design_thumbs',
+                    views: ['website_sale.products_design_thumbs'],
+                    gap: 16,
+                },
+                {
+                    label: gridLabel,
+                    className: 'o_wsale_design_grid',
+                    views: ['website_sale.products_design_grid'],
+                    gap: 0,
+                },
+            ]"/>
+            <t t-foreach="styles" t-as="style" t-key="style_index">
+                <!-- TODO AGAU: no reload -->
+                <BuilderSelectItem
+                        classAction="style.className"
+                        actionParam="[
+                            {action: 'websiteConfig', actionParam: {views: style.views}},
+                            {action: 'setDefaultGap', actionValue: style.gap + 'px'},
+                        ]"
+                        t-out="style.label"
+                />
+            </t>
+        </BuilderSelect>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Images Size" level="1">
+        <BuilderSelect action="'websiteConfig'">
+            <BuilderSelectItem classAction="'o_wsale_context_thumb_4_3'" actionParam="{views: ['website_sale.products_thumb_4_3']}">Landscape (4/3)</BuilderSelectItem>
+            <BuilderSelectItem classAction="''" actionParam="{views: []}">Default (1/1)</BuilderSelectItem>
+            <BuilderSelectItem classAction="'o_wsale_context_thumb_4_5'" actionParam="{views: ['website_sale.products_thumb_4_5']}">Portrait (4/5)</BuilderSelectItem>
+            <BuilderSelectItem classAction="'o_wsale_context_thumb_2_3'" actionParam="{views: ['website_sale.products_thumb_2_3']}">Vertical (2/3)</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Images Fill" level="2">
+        <BuilderButtonGroup action="'websiteConfig'">
+            <BuilderButton
+                    title.translate="Contain within the box"
+                    classAction="''"
+                    actionParam="{views: []}"
+                    iconImg="'/website/static/src/img/snippets_options/content_width_normal.svg'"
+            />
+            <BuilderButton
+                    title.translate="Always Fill the box"
+                    id="'thumb_cover'"
+                    classAction="'o_wsale_context_thumb_cover'"
+                    actionParam="{views: ['website_sale.products_thumb_cover']}"
+                    iconImg="'/website/static/src/img/snippets_options/content_width_full.svg'"
+            />
+        </BuilderButtonGroup>
     </BuilderRow>
 
-    <BuilderRow label.translate="Categories">
-        <BuilderButton id="'categories_opt'" actionParam="{views: ['website_sale.products_categories']}">Left</BuilderButton>
-        <BuilderButton id="'categories_opt_top'" actionParam="{views: ['website_sale.products_categories_top']}">Top</BuilderButton>
+    <BuilderRow label.translate="Description" level="1">
+    <!--    TODO AGAU: -->
+    <!--     data-wsale-preview-id="website_sale.editor_preview.description"-->
+    <!--     data-wsale-preview-classes="o_wsale_previewing_description"-->
+    <!--     data-wsale-preview-place-after=".oe_product_cart:not(.oe_product_cart_has_description) .o_wsale_products_item_title"-->
+    <!--     data-no-preview="true"-->
+    <!--     data-reload="/"-->
+        <BuilderCheckbox action="'websiteConfig'" actionParam="{views: ['website_sale.products_description']}"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Actions" level="1">
+        <BuilderButton
+                title.translate="Add to Cart"
+                icon="'fa-shopping-cart'"
+                action="'websiteConfig'"
+                actionParam="{views: ['website_sale.products_add_to_cart']}"
+                id="'button_add_to_cart_opt'"
+        />
+        <div class="flex-basis-100"/>
+    </BuilderRow>
+
+    <BuilderRow label.translate="Categories" className="'o_wsale_editor_section'" action="'websiteConfig'">
+    <!--    TODO AGAU:-->
+    <!--        data-wsale-preview-id="website_sale.editor_preview.sidebar"-->
+    <!--        data-wsale-preview-place-before="#o_wsale_container:not(.o_wsale_has_sidebar) #products_grid"-->
+    <!--        data-wsale-preview-classes="o_wsale_previewing_sidebar, o_wsale_has_sidebar"-->
+        <BuilderButton
+                title.translate="Show into Sidebar"
+                id="'categories_opt'"
+                actionParam="{views: ['website_sale.products_categories']}"
+        >Sidebar</BuilderButton>
+
+    <!--    TODO AGAU:-->
+    <!--        data-wsale-preview-id="website_sale.editor_preview.filmstrip"-->
+    <!--        data-wsale-preview-classes="o_wsale_previewing_filmstrip"-->
+    <!--        data-wsale-preview-place-before="#o_wsale_container:not(.o_wsale_has_filmstrip) .products_header"-->
+        <BuilderButton
+                title.translate="Show a filmstrip navigation at the Top"
+                id="'categories_opt_top'"
+                actionParam="{views: ['website_sale.products_categories_top']}"
+        >Top</BuilderButton>
     </BuilderRow>
 
     <BuilderRow t-if="this.isActiveItem('categories_opt')" label.translate="Collapse Category Recursive" level="1">
-        <BuilderCheckbox id="'collapse_category_recursive'" actionParam="{views: ['website_sale.option_collapse_products_categories']}"/>
+        <BuilderCheckbox
+                id="'collapse_category_recursive'"
+                action="'websiteConfig'"
+                actionParam="{views: ['website_sale.option_collapse_products_categories']}"
+        />
     </BuilderRow>
 
-    <BuilderRow label.translate="Attributes">
-        <BuilderButton id="'attributes_opt'" actionParam="{views: ['website_sale.products_attributes']}">Left</BuilderButton>
-        <BuilderButton id="'attributes_opt_top'" actionParam="{views: ['website_sale.products_attributes_top']}">Top</BuilderButton>
+    <BuilderRow t-if="isActiveItem('categories_opt_top')" label.translate="Style" level="1">
+        <BuilderSelect action="'websiteConfig'">
+            <BuilderSelectItem classAction="''" actionParam="{views: []}">Filmstrip - default</BuilderSelectItem>
+        </BuilderSelect>
     </BuilderRow>
-    <t t-if="this.isActiveItem('attributes_opt') or this.isActiveItem('attributes_opt_top')">
-        <BuilderRow label.translate="Price Filter" level="1">
+
+    <BuilderRow label.translate="Filters" className="'o_wsale_editor_section'">
+        <BuilderSelect action="'websiteConfig'">
+            <BuilderSelectItem
+                    title.translate="Hide all filters"
+                    id="'attributes_hide_opt'"
+                    actionParam="{views: []}"
+            >Hide</BuilderSelectItem>
+    <!--        TODO AGAU: -->
+    <!--         data-wsale-preview-id="website_sale.editor_preview.sidebar"-->
+    <!--         data-wsale-preview-place-before="#o_wsale_container:not(.o_wsale_has_sidebar) #products_grid"-->
+    <!--         data-wsale-preview-classes="o_wsale_previewing_sidebar, o_wsale_has_sidebar"-->
+            <BuilderSelectItem
+                    title.translate="Show filters into Sidebar"
+                    id="'attributes_opt'"
+                    actionParam="{views: ['website_sale.products_attributes']}"
+            >Sidebar</BuilderSelectItem>
+        <!-- TODO AGAU: -->
+    <!--        data-wsale-preview-id=""-->
+    <!--        data-wsale-preview-classes="o_wsale_previewing_offcanvas"-->
+            <BuilderSelectItem
+                    title.translate="Render a button to show the Off-screen Menu"
+                    id="'attributes_opt_top'"
+                    actionParam="{views: ['website_sale.products_attributes_top']}"
+            >Off-screen Menu</BuilderSelectItem>
+        </BuilderSelect>
+    </BuilderRow>
+
+    <BuilderContext
+            t-if="isActiveItem('attributes_opt') or isActiveItem('attributes_opt_top')"
+            action="'websiteConfig'"
+    >
+        <BuilderRow label.translate="Price" level="1">
             <BuilderCheckbox actionParam="{views: ['website_sale.filter_products_price']}"/>
         </BuilderRow>
 
-        <BuilderRow label.translate="Product Tags Filter" level="1">
+        <BuilderRow label.translate="Tags" level="1">
             <BuilderCheckbox id="'o_wsale_tags_filter_opt'" actionParam="{views: ['website_sale.filter_products_tags']}"/>
         </BuilderRow>
+    </BuilderContext>
 
-        <t t-set="CollapsibleSidebarViews" t-value="['website_sale.products_categories_list_collapsible', 'website_sale.products_attributes_collapsible']"/>
-        <BuilderRow label.translate="Collapsible Sidebar" level="1">
-            <BuilderCheckbox id="'collapsible_sidebar'" actionParam="{views: CollapsibleSidebarViews}"/>
-        </BuilderRow>
-    </t>
+    <t t-set="CollapsibleSidebarViews" t-value="['website_sale.products_categories_list_collapsible', 'website_sale.products_attributes_collapsible']"/>
+    <BuilderRow
+            t-if="isActiveItem('attributes_opt') or isActiveItem('categories_opt')"
+            label.translate="Collapse sidebar sections"
+            className="'o_wsale_editor_section'"
+    >
+        <BuilderCheckbox
+                id="'collapsible_sidebar'"
+                action="'websiteConfig'"
+                actionParam="{views: CollapsibleSidebarViews}"
+        />
+    </BuilderRow>
 
+    <BuilderRow label.translate="Toolbar" className="'o_wsale_editor_section'" action="'websiteConfig'">
+        <BuilderButton id="'sort_top_opt'" actionParam="{views: ['website_sale.sort']}">Sort by</BuilderButton>
+        <BuilderButton id="'search_top_opt'" actionParam="{views: ['website_sale.search']}">Search</BuilderButton>
+    </BuilderRow>
 
-    <BuilderRow label.translate="Top Bar">
-        <BuilderButton actionParam="{views: ['website_sale.sort']}">Sort by</BuilderButton>
-        <BuilderButton actionParam="{views: ['website_sale.add_grid_or_list_option']}">Layout</BuilderButton>
+    <BuilderRow
+            t-if="isActiveItem('attributes_opt_top') or isActiveItem('search_top_opt') or isActiveItem('sort_top_opt')"
+            label.translate="Floating"
+            tooltip.translate="Floating sticky Toolbar"
+            level="1"
+            action="'websiteConfig'"
+    >
+    <!--    TODO AGAU: -->
+    <!--     data-wsale-preview-id="website_sale.editor_preview.floating_bar"-->
+    <!--     data-wsale-preview-classes="o_wsale_previewing_floating_bar"-->
+    <!--     data-wsale-preview-place-after="#o_wsale_container:not(.o_wsale_has_floating_bar) .o_wsale_products_main_row"-->
+        <BuilderCheckbox actionParam="{views: ['website_sale.floating_bar']}"></BuilderCheckbox>
     </BuilderRow>
-</BuilderContext>
 
-<BuilderRow label.translate="Default Sort">
-    <BuilderSelect action="'setDefaultSort'">
-        <t t-foreach="products_sort_mapping" t-as="queryAndLabel" t-key="queryAndLabel_index">
-            <BuilderSelectItem actionValue="queryAndLabel.query" t-out="queryAndLabel.label"/>
-        </t>
-    </BuilderSelect>
-</BuilderRow>
-
-<BuilderRow label.translate="Buttons">
-    <BuilderButton title.translate="Add to Cart" icon="'fa-shopping-cart'"
-        action="'websiteConfig'"
-        actionParam="{views: ['website_sale.products_add_to_cart']}"
-        id="'button_add_to_cart_opt'"
-    />
-</BuilderRow>
+    <BuilderRow label.translate="Default Sort" level="1" applyTo="'#o_wsale_products_grid'">
+        <BuilderSelect action="'setDefaultSort'">
+            <t t-foreach="products_sort_mapping" t-as="queryAndLabel" t-key="queryAndLabel_index">
+                <BuilderSelectItem actionValue="queryAndLabel.query" t-out="queryAndLabel.label"/>
+            </t>
+        </BuilderSelect>
+    </BuilderRow>
 </t>
 
 </templates>
diff --git a/addons/website_sale/static/src/website_builder/products_list_page_option_plugin.js b/addons/website_sale/static/src/website_builder/products_list_page_option_plugin.js
index 4a008329eb23f..b3967897013a4 100644
--- a/addons/website_sale/static/src/website_builder/products_list_page_option_plugin.js
+++ b/addons/website_sale/static/src/website_builder/products_list_page_option_plugin.js
@@ -6,6 +6,7 @@ import { registry } from "@web/core/registry";
 
 class ProductsListPageOptionPlugin extends Plugin {
     static id = "productsListPageOptionPlugin";
+
     resources = {
         builder_options: [
             {
@@ -46,14 +47,34 @@ class ProductsListPageOptionPlugin extends Plugin {
             },
             setGap: {
                 reload: {},
+                getValue: ({ editingElement }) =>
+                    editingElement.style.getPropertyValue("--o-wsale-products-grid-gap"),
                 apply: ({ value }) => rpc("/shop/config/website", { shop_gap: value }),
             },
+            // TODO AGAU: merge with setGap and perform rpc on save
+            setDefaultGap: {
+                reload: {},
+                isApplied: () => true,
+                apply: ({ editingElement, value }) => {
+                    editingElement.dataset.gap = value;
+                    editingElement.style.setProperty("--o-wsale-products-grid-gap", value + "px");
+                    return rpc("/shop/config/website", { shop_gap: value });
+                },
+            },
             setDefaultSort: {
                 reload: {},
                 isApplied: ({ editingElement, value }) =>
                     editingElement.dataset.defaultSort === value,
                 apply: ({ value }) => rpc("/shop/config/website", { shop_default_sort: value }),
             },
+            // TODO AGAU: does not work when views is empty array
+            // get websiteConfigNoReload() {
+            //     const websiteConfigAction = getAction("websiteConfig");
+            //     return {
+            //         ...websiteConfigAction,
+            //         reload: undefined,
+            //     };
+            // },
         };
     }
 }
diff --git a/addons/website_sale/static/src/website_builder/website_sale.editor.scss b/addons/website_sale/static/src/website_builder/website_sale.editor.scss
index 62c588c07d416..46d5effb9ef60 100644
--- a/addons/website_sale/static/src/website_builder/website_sale.editor.scss
+++ b/addons/website_sale/static/src/website_builder/website_sale.editor.scss
@@ -1,3 +1,19 @@
+.options-container[data-container-title="Products Page"] {
+  > div:first-child { // Title
+    display: none !important;
+  }
+
+  .o_wsale_editor_section {
+    padding-top: map-get($map: $spacers, $key: 2);
+    margin-top: 0;
+
+    > .hb-row-label {
+      font-size: $o-we-sidebar-content-main-title-font-size;
+      color: $o-we-sidebar-content-main-title-color !important;
+    }
+  }
+}
+
 .o_wsale_soptions_menu_sizes {
   align-self: flex-start !important;
 
@@ -34,6 +50,7 @@
       &.selected {
         background-color: transparent;
       }
+
       &.select {
         background-color: #b1d4f1;
       }
@@ -50,3 +67,166 @@
   border-radius: 50%;
 }
 
+// ==================
+// Edit-Mode Previews
+// ==================
+
+body.editor_enable {
+  // Outline the category description box
+  #category_header {
+    &:has(br:first-child:last-child), &:empty {
+      outline: $border-width dashed fade-currentColor(25%);
+
+      &:hover {
+        outline: $border-width * 2 solid $o-we-handles-accent-color;
+      }
+    }
+  }
+
+  // Outline product description boxes
+  .oe_subdescription {
+    div:has(br:first-child:last-child):not(:hover), div:empty:not(:hover) {
+      outline: $border-width dashed fade-currentColor(25%);
+    }
+  }
+}
+
+// ==========================
+// Preview Components (/shop)
+// ==========================
+body.editor_enable:has(.o_wsale_edit_preview_enabled) {
+  // Hide default handles when other elements are highlighted
+  &:has(.o_wsale_previewing_sidebar),
+  &:has(.o_wsale_previewing_filmstrip),
+  &:has(.o_wsale_previewing_offcanvas),
+  &:has(.o_wsale_previewing_description),
+  &:has(.o_wsale_previewing_floating_bar) {
+    .o_handles {
+      visibility: hidden;
+    }
+  }
+
+  @mixin _showcase {
+    z-index: $zindex-tooltip;
+    outline: $border-width * 2 solid $o-we-handles-accent-color;
+  }
+
+  // Sidebar
+  .o_wsale_sidebar_preview {
+    padding: 0;
+    flex: 0 0 25%;
+    min-width: 0;
+    max-width: 0;
+    transform: translateX(-50%);
+    transition: all .2s;
+    opacity: 0;
+  }
+
+  .o_wsale_previewing_sidebar {
+    #products_grid_before {
+      @include _showcase();
+    }
+
+    .o_wsale_sidebar_preview:first-child {
+      @include media-breakpoint-up(lg) {
+        min-width: o-to-rem(240px);
+        max-width: var(--o-wsale-sidebar-maxwidth, 15rem);
+        opacity: 1;
+        transform: translateX(0);
+        @include _showcase();
+      }
+    }
+  }
+
+  // Categories Filmstrip (top)
+  .o_wsale_filmstrip_preview {
+    max-height: 0;
+    padding: 0;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition: all .2s;
+  }
+
+  .o_wsale_previewing_filmstrip {
+    .o_wsale_filmstip_container {
+      @include _showcase();
+    }
+
+    .o_wsale_filmstrip_preview {
+      transform: translateY(0);
+      opacity: 1;
+      max-height: 100px;
+      @include _showcase();
+      outline-offset: 2px;
+    }
+  }
+
+  // Offcanvas
+  .o_wsale_previewing_offcanvas {
+    #o_wsale_offcanvas {
+      visibility: visible;
+      transform: none;
+      box-shadow: $box-shadow-lg;
+      @include _showcase();
+    }
+  }
+
+  // Descriptions
+  .o_wsale_description_preview {
+    opacity: 0;
+    transition: all .2s;
+
+    .placeholder {
+      transform: translateY(-50%);
+      min-height: 0em;
+      transition: all .2s;
+      opacity: .15;
+    }
+  }
+
+  .o_wsale_previewing_description {
+    .oe_product_cart .oe_subdescription {
+      @include _showcase();
+    }
+
+    .o_wsale_description_preview {
+      opacity: 1;
+      outline: $border-width solid $o-we-handles-accent-color;
+      outline-offset: 2px;
+
+      .placeholder {
+        transform: translateY(0);
+        min-height: .4em;
+      }
+    }
+  }
+
+  // Floating Bar
+  .o_wsale_floating_bar_preview {
+    transform: translateY(100%);
+    opacity: 0;
+    transition: all .2s;
+  }
+
+  .products_header {
+    max-height: 100px;
+    overflow: hidden;
+    transition: all .2s;
+  }
+
+  .o_wsale_previewing_floating_bar {
+    #o_wsale_floating_bar {
+      @include _showcase();
+    }
+
+    .products_header {
+      max-height: 0px;
+    }
+
+    .o_wsale_floating_bar_preview {
+      @include _showcase();
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}