Common & layout components
Links, images, breadcrumbs, empty states, skeletons, and the header/footer page layout.
Ready-made building blocks every page uses: a Link that works with the router, an Image that picks the right size, loading skeletons, and the MasterLayout that puts the header and footer around each page.
Entries
An anchor that moves between store pages without reloading, adding the language (and, on localhost or the preview host, the store) to the path.
ImageAn img that loads lazily by default and asks the Salla CDN for a resized copy, with optional srcset, aspect ratio and mobile source.
MasterLayoutThe default page frame: header, main content and footer, plus the login, offer and branch pop-ups a storefront needs.
BreadcrumbDraws a page's breadcrumb trail from its loader data, with structured data for search engines, unless the merchant turned breadcrumbs off.
NoContentThe empty-state block: an icon, a message and an optional button, as the engine shows for an empty cart or category.
Page skeletonsLoading placeholders shaped like the home, product, cart, blog and account pages, shown while the next page loads its data.
Skeleton building blocksThe pieces the page skeletons are made of: a pulsing bar, a breadcrumb row, a product card and a product grid.
RenderWhenVisibleShows a placeholder and mounts its children only when the section scrolls near the viewport, then keeps them mounted.
CurrencySymbolShows the Saudi riyal icon for SAR and the plain currency code for any other currency.
ErrorPageA full error screen with a code, a title, a message and a button home; the default router error screen uses it.
HeaderThe storefront header: top bar with search and language, logo, main menu, account and cart, built from the store's data.
FooterThe storefront footer: store info, links, contacts, apps, the copyright line and payment icons, from the store's data.
CopyrightThe footer's bottom line: a translated "Copyright" label, the current year and the store name linking home.
CustomerLayoutThe account area's frame: a breadcrumb band, the account menu sidebar and the page title around each account page.
DeferredDataRenders a fallback until a promise resolves, then calls a render function with the value; React 19's use() in Suspense.
resolveDeferredReturns a promise's value when it is already known to be resolved, and the promise itself otherwise; plain values pass through.
WidgetHeadAn invisible component with the head hook slots and the equal-height GTM push; TwilightProvider already renders it on every page.
pushEqualHeightConfigCopies the store's equal-height product card settings into Google Tag Manager's window.dataLayer; WidgetHead calls it for you.