Woo · Hero with shop filters

A shop hero over a darkened photo: the H1, a white bar with three shop filters (category, size, color) and Show products, which opens the shop already filtered; a row of benefits below.

Full-page views: desktop, phone and dark mode

At 1440px wide.

At 390px wide.

With your site in dark mode.

See it live: Woo · Hero with shop filters on fancybricks.co — the live preview, and the button that copies it.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Woo · Hero with shop filters
  Container
    Hero   (FBK Hero)
      Hero · Photo (background, decorative)
      Intro   (FBK Intro)
      Filters bar
        Filters · Category
        Filters · Size
        Filters · Color
        Filters · Show products
      Benefits
        Benefit · Free shipping in Colombia over $80   (FBK Icon item)
        Benefit · 30-day returns   (FBK Icon item)
        Benefit · Secure checkout   (FBK Icon item)
        Benefit · Help from real people   (FBK Icon item)
    Filters · Target (hidden)
      Filters · Products (hidden)
        Filters · Product loop (hidden)
          Filters · Product name

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Hero (FBK Hero) › Properties: Style group: Layer, Text colors · Layout group: Height, Content position, Width · Motion group: Effect, Time per photo.
3. Select Intro (FBK Intro) › Properties: Eyebrow, Hide eyebrow, Title, Title level, Lead, Hide lead · Style group: Eyebrow style, Highlight, Title size, Accent line · Layout group: Alignment, Layout, Background, Spacing · Motion group: Reveal in slider.
4. Select Benefit · Free shipping in Colombia over $80, Benefit · 30-day returns, Benefit · Secure checkout (+1 more) (FBK Icon item) › Properties: Icon, Title, Title tag, Text · Show or hide group: Hide icon, Hide text · Style group: Layout, Look, Tone, Shape, Size, Alignment, HTML tag, Background.
5. Select Filters · Category, Filters · Size, Filters · Color › Content › Target query and Filter source.
6. Select Filters · Product loop (hidden) (query loop) › Query: post type, number of posts, order and filters.

Requirements

• WooCommerce. Needs WooCommerce active, with the products/fields this template queries already set up.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• Turn on Bricks > Settings > Performance > Query filters (the filters need its index; save this page once in the builder so Bricks builds it).
• The filters point at Filters · Product loop (hidden), a query loop nobody sees (Bricks needs a query on the page). Show products is a Filter - Submit with Redirect to /shop/: change it to your shop page.
• The shop reads the choice from the URL by the filters' URL names (Filter > URL parameter): _cat, _size and _color. Give the filters of your shop page the same names (as Woo · Shop with filters does).
• Size and Color are the product attributes pa_size and pa_color: point them at yours (Filter > Taxonomy).
• Replace the background photo (at least 1600 px wide; decoration, empty alt) and the benefits (FBK Icon item).

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-intro.
• 767px and below — .fbk-heroshopf, .fbk-hero, .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

This section is dark on purpose (class fbk-section--dark), so it looks the same whether your site is in light or dark mode.

How the library follows your site's color scheme: Dark mode and preview.

Replaces

• Hero filter from Fancy Bricks 2.0

What happened to the old libraries, and what to do with pages already built with them: Migrating from 1.0/2.0.