Trade Theme - Want Sticky Header to have 0.9 transparency on scroll down

Store Design
,

Topic summary

Goal: add ~0.9 transparency to the sticky header on scroll in Shopify’s Trade Theme (v15.0), and optionally reduce menu padding when the logo shrinks.

Progress and approaches:

  • Initial code added to theme.liquid (via BSSCommerce-TA) did not work, possibly due to v15.0 changes. Images and code placement were provided, but the snippet details are unclear.
  • A CSS-only approach was proposed: add a transition to .section-header and set opacity for .scrolled-past-header (a class applied after scrolling). This softens the header without JS.
  • The OP achieved transparency via JS, prefers CSS if padding can also transition.

Padding on scroll:

  • OP wants to reduce menu item padding (e.g., 1.2rem to 1.0rem) when the logo shrinks. Their JS changes only the first item.
  • Guidance: select all items via querySelectorAll, convert NodeList to an array, then iterate to apply style changes within a scroll event. Verify correct class selectors (OP mentions header__menu_item; suggestion references header-wrapper-items).

Status:

  • Transparency solved; padding transition on scroll remains open.
  • No accepted solution marked; further verification of selectors and a CSS-based padding transition are pending.

Notes:

  • Code snippets are central; screenshots show where to edit code.
Summarized with AI on December 26. AI used: gpt-5.
2

Hi @SASD , you can change header’s transparency on scroll down by following these steps:

  1. Navigate to Online store => Themes => Edit code

1.png
1.png1870×921 127 KB

  1. Find theme.liquid file and add this code snippet before closing head tag :

BSSCommerceTA_0-1719066264612.png
BSSCommerceTA_0-1719066264612.png1905×915 63.5 KB

We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution? This can be a reference for other merchants if they have an issue like you.