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

Copyright

componentBeginnerserverbrowserlive demo

The footer's bottom line: a translated "Copyright" label, the current year and the store name linking home.

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

In plain words

The small line at the very bottom of the footer: "Copyright | 2026 Store name", where the store name links to the home page. The word "Copyright" is translated into the page's language.

Signature

const Copyright: LazyExoticComponent<(props: CopyrightProps) => JSX.Element>

// CopyrightProps is not exported
interface CopyrightProps {
  storeName?: string;   // default ''
}

Try it live

Copyright, the line at the bottom of the engine's Footer: a translated label, the year and the store name linking home.Try this: switch the language pill to en: the label is translated, the year and the name are not.
Storefront canvas · ar · RTL

الحقوق محفوظة | 2026 ثيم رائد

Controls
Empty: this store's name, from useStore().
What a theme writes
import { Copyright } from '@salla.sa/twilight-theme-engine/components/layout';
import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';

export function FooterBottom() {
  const store = useStore();
  return (
    <p className="text-sm">
      <Copyright storeName={store.name} />
    </p>
  );
}

Example

app/components/FooterBottom.tsx
import { Copyright } from '@salla.sa/twilight-theme-engine/components/layout';
import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';

export function FooterBottom() {
  const { name } = useStore();
  return (
    <p className="copyright-text text-sm">
      <Copyright storeName={name} />
    </p>
  );
}

How it behaves

  • It renders a fragment, not an element: the blocks.footer.copyright translation, | , the year, and an engine Link to / with the class hover:text-primary around the store name. Wrap it in your own element to style or place it.

  • The year is read from the clock while rendering.

  • Footer renders it as the fallback of its copyright hook slot.

  • It is lazy (code-split).

Gotchas

  • Without storeName the link has no text: an empty anchor that screen readers announce only as "link". Pass the store name.

  • Its source comment says it shows "Copyright | Year StoreName | Powered by Salla". It renders no "Powered by Salla"; add it yourself if you want it.

Related

Footer

The storefront footer: store info, links, contacts, apps, the copyright line and payment icons, from the store's data.

useStore

Reads the current store (name, logo, settings, contacts…) and can refresh it from the Salla SDK.

Source and docs