[object Object]

← back to Dw Theme Live Signin Split

Re-target sign-in split to the PROMO ANNOUNCEMENT BAR (pxs-announcement-bar)

f3cd81ce04ca85f6a1c807b8a74cfdb6371dc177 · 2026-08-31 10:23:52 -0700 · Steve Abrams

Steve clarified 'top banner' = the promo announcement strip above the header,
NOT the header person-icon chrome.

- sections/pxs-announcement-bar.liquid: bar is now a flex CONTAINER (was one <a>),
  holding the promo text (unchanged setting-driven behavior + break gating) PLUS two
  entry points: 'Trade Sign In' -> /pages/trade-only-benefits (relative, direct nav,
  bypasses modal) and 'Retail Login' -> data-dw-signin (opens retail-only modal).
  New schema settings: show_signin_entrypoints, trade_link_text, retail_link_text.
  All existing settings/schema preserved (show_announcement, home_only, text, mobile
  text, link, colors). Renders on mobile (bar shows on mobile) + desktop.
- sections/header.liquid: REVERTED to live baseline (person-icon back to original
  account behavior/label; no Trade Sign In text link in header chrome).
- snippets/mobile-nav.liquid: REVERTED to live baseline (account link back to original).
- snippets/dw-signin-modal.liquid: KEPT (retail-only modal is the Retail Login target).

Verified locally: liquid balanced, schema+header-group JSON valid, both links present,
trade href relative + correct, retail data-dw-signin matches modal's delegated selector,
promo-text settings intact, modal JS node --check passes. NOT pushed (Steve-gated).

Files touched

Diff

commit f3cd81ce04ca85f6a1c807b8a74cfdb6371dc177
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 31 10:23:52 2026 -0700

    Re-target sign-in split to the PROMO ANNOUNCEMENT BAR (pxs-announcement-bar)
    
    Steve clarified 'top banner' = the promo announcement strip above the header,
    NOT the header person-icon chrome.
    
    - sections/pxs-announcement-bar.liquid: bar is now a flex CONTAINER (was one <a>),
      holding the promo text (unchanged setting-driven behavior + break gating) PLUS two
      entry points: 'Trade Sign In' -> /pages/trade-only-benefits (relative, direct nav,
      bypasses modal) and 'Retail Login' -> data-dw-signin (opens retail-only modal).
      New schema settings: show_signin_entrypoints, trade_link_text, retail_link_text.
      All existing settings/schema preserved (show_announcement, home_only, text, mobile
      text, link, colors). Renders on mobile (bar shows on mobile) + desktop.
    - sections/header.liquid: REVERTED to live baseline (person-icon back to original
      account behavior/label; no Trade Sign In text link in header chrome).
    - snippets/mobile-nav.liquid: REVERTED to live baseline (account link back to original).
    - snippets/dw-signin-modal.liquid: KEPT (retail-only modal is the Retail Login target).
    
    Verified locally: liquid balanced, schema+header-group JSON valid, both links present,
    trade href relative + correct, retail data-dw-signin matches modal's delegated selector,
    promo-text settings intact, modal JS node --check passes. NOT pushed (Steve-gated).
---
 sections/header.liquid               |   7 +--
 sections/pxs-announcement-bar.liquid | 109 ++++++++++++++++++++++++++++++-----
 snippets/mobile-nav.liquid           |   2 +-
 3 files changed, 96 insertions(+), 22 deletions(-)

diff --git a/sections/header.liquid b/sections/header.liquid
index 5e880e4..ea5bf13 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -1,8 +1,6 @@
 <style>
   .main-header .header-content-right .customer-links{ display:inline-flex !important; align-items:center; position:relative; margin:0; }
   .main-header .header-content-right .customer-links > .header-icon-link{ display:inline-flex; align-items:center; }
-  .main-header .header-content-right .customer-links > .dw-trade-signin-link{ display:inline-flex; align-items:center; font-family:Lora,serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#26241f; text-decoration:none; white-space:nowrap; margin-right:14px; border-right:1px solid #e0dcd2; padding-right:14px; }
-  .main-header .header-content-right .customer-links > .dw-trade-signin-link:hover{ color:#b08212; }
   .dw-mobile-search{ display:none; }
   /* Mobile header: logo row, full-width search row, then a clean icon row below; hamburger top-right */
   @media(max-width:749px){
@@ -330,10 +328,7 @@
                 </ul>
               </div>
             {% else %}
-              {%- comment -%} Trade Sign In — routes STRAIGHT to the trade benefits page (bypasses the retail modal). {%- endcomment -%}
-              <a class="dw-trade-signin-link" href="/pages/trade-only-benefits" aria-label="Trade Sign In" title="Trade Sign In">Trade Sign In</a>
-              {%- comment -%} Retail Login — person icon opens the retail-only sign-in modal (data-dw-signin). {%- endcomment -%}
-              <a class="customer-login-link header-icon-link" href="{{ routes.account_login_url }}" data-dw-signin aria-label="Retail Login" title="Retail Login">{% render 'icons', id: 'person' %}</a>
+              <a class="customer-login-link header-icon-link" href="{{ routes.account_login_url }}" data-dw-signin aria-label="{{ 'layout.header.account' | t }}" title="{{ 'layout.header.account' | t }}">{% render 'icons', id: 'person' %}</a>
             {% endif %}
           </div>
         {% endif %}
diff --git a/sections/pxs-announcement-bar.liquid b/sections/pxs-announcement-bar.liquid
index 44c092b..f52a966 100644
--- a/sections/pxs-announcement-bar.liquid
+++ b/sections/pxs-announcement-bar.liquid
@@ -24,30 +24,85 @@
   {% break %}
 {% endunless %}
 
-<a
-  class="pxs-announcement-bar"
+{%- comment -%}
+  DW sign-in split — the bar is a flex CONTAINER (not one <a>), so the promo text and the two
+  entry points are independent. The promo text keeps its existing setting-driven behavior; if
+  the merchant set announcement_link it still links (retail #dw-signin by default). The two
+  entry points are appended as bar content, gated by show_signin_entrypoints.
+    - Trade Sign In  -> /pages/trade-only-benefits  (relative, direct nav, bypasses the modal)
+    - Retail Login   -> data-dw-signin              (opens the retail-only sign-in modal)
+{%- endcomment -%}
+
+<div
+  class="pxs-announcement-bar pxs-announcement-bar--split"
   style="
     color: {{ section.settings.announcement_color }};
     background-color: {{ section.settings.announcement_background }}
   "
-  {% if section.settings.announcement_link != blank %}
-    href="{{ section.settings.announcement_link }}"
-  {% endif %}
 >
-  {% if section.settings.announcement_text_mobile != blank %}
-    <span class="pxs-announcement-bar-text-mobile">
-      {{ section.settings.announcement_text_mobile | escape }}
+  {%- if section.settings.announcement_link != blank -%}
+    <a class="pxs-announcement-bar-promo" href="{{ section.settings.announcement_link }}" style="color: {{ section.settings.announcement_color }};">
+      {% if section.settings.announcement_text_mobile != blank %}
+        <span class="pxs-announcement-bar-text-mobile">{{ section.settings.announcement_text_mobile | escape }}</span>
+      {% endif %}
+      {% if section.settings.announcement_text != blank %}
+        <span class="pxs-announcement-bar-text-desktop">{{ section.settings.announcement_text | escape }}</span>
+      {% endif %}
+    </a>
+  {%- else -%}
+    <span class="pxs-announcement-bar-promo">
+      {% if section.settings.announcement_text_mobile != blank %}
+        <span class="pxs-announcement-bar-text-mobile">{{ section.settings.announcement_text_mobile | escape }}</span>
+      {% endif %}
+      {% if section.settings.announcement_text != blank %}
+        <span class="pxs-announcement-bar-text-desktop">{{ section.settings.announcement_text | escape }}</span>
+      {% endif %}
     </span>
-  {% endif %}
+  {%- endif -%}
 
-  {% if section.settings.announcement_text != blank %}
-    <span class="pxs-announcement-bar-text-desktop">
-      {{ section.settings.announcement_text | escape }}
+  {%- if section.settings.show_signin_entrypoints -%}
+    <span class="pxs-announcement-bar-signin" role="group" aria-label="Sign in">
+      <a
+        class="pxs-ab-link pxs-ab-link--trade"
+        href="/pages/trade-only-benefits"
+        style="color: {{ section.settings.announcement_color }};"
+        aria-label="Trade Sign In"
+      >{{ section.settings.trade_link_text | default: 'Trade Sign In' | escape }}</a>
+      <span class="pxs-ab-sep" aria-hidden="true">|</span>
+      <a
+        class="pxs-ab-link pxs-ab-link--retail"
+        href="{{ routes.account_login_url }}"
+        data-dw-signin
+        style="color: {{ section.settings.announcement_color }};"
+        aria-label="Retail Login — existing customers sign in, new customers create an account; retail accounts receive 3 lifetime complimentary samples"
+        title="Existing customer? Sign in. New here? Create an account. Retail accounts receive 3 lifetime complimentary samples."
+      >{{ section.settings.retail_link_text | default: 'Retail Login' | escape }}</a>
     </span>
-  {% endif %}
-</a>
-
+  {%- endif -%}
+</div>
 
+<style>
+  .pxs-announcement-bar--split{
+    display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
+    text-align:center;
+  }
+  .pxs-announcement-bar--split .pxs-announcement-bar-promo{
+    text-decoration:none;
+  }
+  .pxs-announcement-bar-signin{
+    display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
+    font-family:Lora,serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
+  }
+  .pxs-announcement-bar-signin .pxs-ab-link{
+    text-decoration:none; cursor:pointer; opacity:.92;
+  }
+  .pxs-announcement-bar-signin .pxs-ab-link:hover{ opacity:1; text-decoration:underline; }
+  .pxs-announcement-bar-signin .pxs-ab-sep{ opacity:.5; }
+  @media(max-width:749px){
+    .pxs-announcement-bar--split{ gap:8px; }
+    .pxs-announcement-bar-signin{ font-size:.7rem; letter-spacing:.04em; gap:7px; }
+  }
+</style>
 
 {% schema %}
 {
@@ -94,6 +149,30 @@
       "type": "color",
       "label": "Background color",
       "default": "#000000"
+    },
+    {
+      "type": "header",
+      "content": "Sign-in entry points"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_signin_entrypoints",
+      "label": "Show Trade Sign In + Retail Login links in the bar",
+      "default": true
+    },
+    {
+      "id": "trade_link_text",
+      "type": "text",
+      "label": "Trade link text",
+      "default": "Trade Sign In",
+      "info": "Routes directly to /pages/trade-only-benefits (bypasses the retail modal)."
+    },
+    {
+      "id": "retail_link_text",
+      "type": "text",
+      "label": "Retail link text",
+      "default": "Retail Login",
+      "info": "Opens the retail-only sign-in modal."
     }
   ]
 }
diff --git a/snippets/mobile-nav.liquid b/snippets/mobile-nav.liquid
index a1bb99a..50a22c5 100644
--- a/snippets/mobile-nav.liquid
+++ b/snippets/mobile-nav.liquid
@@ -127,7 +127,7 @@
         </li>
       {% else %}
         <li class="mobile-link">
-          <a class="customer-login-link" href="{{ routes.account_login_url }}" data-dw-signin>Retail Login</a>
+          <a class="customer-login-link" href="{{ routes.account_login_url }}">{{ 'layout.header.account' | t }}</a>
         </li>
       {% endif %}
     {% endif %}

← ec4d13e snapshot: LIVE pxs-announcement-bar.liquid + header-group.js  ·  back to Dw Theme Live Signin Split  ·  TK-11020: retarget to real live target (snippets/dw-samples- 757b499 →