Overview

Read this first if you have never built a Salla theme.

A Salla React theme is a small web project that decides how one store looks. The server renders your theme into HTML, then the browser takes over so the page feels like an app.

You do not build a storefront from zero. A theme sits on top of the theme engine, the package @salla.sa/twilight-theme-engine. The engine ships a complete, working store. Your theme only describes what is different.

React in one paragraphCopy Anchor Link

React builds pages out of components: functions that return a piece of the page, such as a product card. A component receives props, its inputs. A hook is a function whose name starts with use that a component calls to get something, such as the current cart. Pages render on the server first (SSR, server-side rendering), so customers and search engines get real HTML immediately.

What the engine does for youCopy Anchor Link

• Routing: product, category, cart, blog, account and the other store URLs already exist. See Routes.
• Data: each page loads its products, categories and settings from Salla through the API client.
• Translations and direction: Arabic and English, left-to-right and right-to-left.
• The Salla browser SDK, the cart, login and other store behavior.
• Server rendering and the build setup.

What you ownCopy Anchor Link

• Look and feel: layout, header, footer, colors, fonts. See Styling.
• Components: swap any built-in block or card for your own. See Layout and components.
• Pages: replace a page, or add a new one. See Routes and pages.
• Extra UI: add pieces into marked spots on existing pages. See Hooks and slots.
• Merchant settings: the options merchants can change in the dashboard. See Settings.
• Wording: override translations. See Languages and RTL.

Find your way aroundCopy Anchor Link

The top bar has six sections:

NextCopy Anchor Link

Check which frameworks a theme can run on, then build one in the Quick start.