Skip to content
L-118Layout

Storefront Panel Nav

Lifestyle-store header as a plain, fully editable Etch tree: header > strip (service links, an "Announcement Rotator" wrapper component holding "Announcement Message" instances, region picker) > nav area (bar: menu butto…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

All photos and visual assets used in this preview are sourced from Unsplash.

The system behind it

One pattern, your whole brand.

Storefront Panel Nav reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type
Layout
Category
Footers and headers
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 20

Set on the section, in Etch’s attributes panel. No code needed.

data-theme
creamwhiteink

colours of the strip, bar, panels and drawers

data-accent
accentprimarysecondaryneutral

ACSS colour for counts, badges, the delivery meter and focus accents

data-position
staticsticky

sticky pins the header and hides the demo stage

data-align
centerstart

placement of the primary links on desktop

data-trigger
hoverclick

how desktop panels open (click and keyboard always work)

data-close-delay
numberdefault 80 / 240

ms · hover intent

data-anim
revealfadenone

how panels open

data-duration
numberdefault 420

ms · and

data-easing
smoothspringsnappyeaselinear

or a cubic-bezier · for panels and drawers

data-preview
truefalse

the photo that follows the hovered link in each panel

data-overlay
truefalse

dims the page while a panel is open

data-search
truefalse

the search pill, its panel and the / shortcut

data-wishlist
truefalse

the wishlist link

data-region
truefalse

the region and currency picker

data-announcement
truefalse

the top strip

data-drawer
startend

side the phone menu slides in from

data-scroll-lock
truefalse

locks page scroll while a drawer is open

data-currency
numberdefault €

symbol · and

data-free-shipping
text

amount · for the cart maths

data-stage
truefalse

the demo campaign photo under the header

Component props 5

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Announcement Rotator1 in this pattern · 9 props
PropTypeDefault
interval
number

4500

autoplay
true / false

True

pauseOnHover
true / false

True

effect
text

slide

direction
text

up

duration
number

600

easing
text

smooth

showArrows
true / false

True

label
text

Announcements

Announcement Message3 in this pattern · 5 props
PropTypeDefault
text
text

Free carbon-neutral delivery on orders over €200

icon
text

truck

showLink
true / false

True

linkLabel
text

Details

url
text

#delivery

Panel Link20 in this pattern · 7 props
PropTypeDefault
label
text

Knitwear

url
text

#knitwear

image
text

https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=720

imageAlt
text

Cream open-knit top on a wooden hanger

caption
text

38 styles

showBadge
true / false

False

badge
text

New

Product Card5 in this pattern · 12 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=480

imageAlt
text

Cream open-knit cotton top on a hanger

title
text

Open-knit Cotton Top

url
text

#product

price
text

€89

showCompare
true / false

False

comparePrice
text

€110

showBadge
true / false

False

badge
text

New

showMeta
true / false

True

meta
text

3 colours

layout
text

stacked

Cart Line2 in this pattern · 8 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=240

imageAlt
text

Rust bomber jacket on a hanger

title
text

Rust Bomber Jacket

url
text

#product

showVariant
true / false

True

variant
text

Rust, size M

price
number

129

qty
number

1

Included in Pro From €39 a year, with all 753 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan