Skip to content
Twilight React Playground
ثيم رائدaren

FixedBanner

componentBeginnerserverbrowserlive demo

A single linked banner image, with a smaller image for phones and an eager-loading option for a banner at the top.

import { FixedBanner } from '@salla.sa/twilight-theme-engine/components/home';

In plain words

One wide picture that links somewhere, such as a sale banner. The block can carry a second, smaller picture for phones, which the browser picks below 768px.

Set priority for a banner at the very top of the page: the browser then loads it first instead of waiting.

Signature

const FixedBanner: React.MemoExoticComponent<(props: {
  data: {
    image: { url: string; alt?: string; small_url?: string };
    url?: string;      // '#'
    title?: string;    // alt text when image.alt is empty
    [key: string]: unknown;
  };
  priority?: boolean;  // false
}) => JSX.Element | null>

Try it live

This store's own fixed-banner image, drawn by FixedBanner. Below it, the attributes the img element got.Try this: tick priority: loading becomes eager and fetchpriority high. Then narrow the window below 768px to get the small image.
Storefront canvas · ar · RTL

Loading the home page blocks…

Controls
priorityA top-level prop, not a field of data.
Empty links to #.
Used as alt text when the image has none.
What a theme writes
import { FixedBanner } from '@salla.sa/twilight-theme-engine/components/home';

export function HeroBanner() {
  return (
    <FixedBanner
      data={{
        image: { url: '/banner.jpg', small_url: '/banner-mobile.jpg' },
        url: '/offers',
        title: 'Summer sale',
      }}
    />
  );
}

Example

app/components/home/Hero.tsx
import { FixedBanner } from '@salla.sa/twilight-theme-engine/components/home';

export function Hero() {
  return (
    <FixedBanner
      priority
      data={{
        image: { url: '/banners/sale.webp', small_url: '/banners/sale-mobile.webp' },
        url: '/offers',
        title: 'End of season sale',
      }}
    />
  );
}

How it behaves

  • Markup: .container > engine Link.banner.banner--fixed > <picture> with a (max-width: 767px) source for small_url > <img width="1200" height="300"> with object-fit: contain.

  • priority gives loading="eager", fetchpriority="high" and decoding="sync"; otherwise loading="lazy" and decoding="async".

  • The alt text is image.alt when not blank, else title, else "fixed banner".

Gotchas

  • priority is a prop of its own here, but HomeComponentRenderer passes priority inside data. A banner the home page renders is therefore always lazy, even at the top; render the first banner yourself, or register a small wrapper that passes priority={data.priority}.

  • Without image.url it renders nothing.

Related

HomeComponentRenderer

Draws one home page block from its API data: finds its registered component, wraps it in an error boundary, and defers it until visible.

ParallaxBackground

A full-width picture behind a centered title and an optional call-to-action link, with an optional dark overlay.

Source and docs