# Overview (https://docs.salla.dev/twilight/react/recipes)



Open a recipe when you know the job. Each one has the same shape: a goal, the steps with a complete working example, a check that it worked, and the traps that cost people an afternoon. The code is shortened from the reference theme.

New here? Read [How it works](https://docs.salla.dev/twilight/react/start/how-it-works) and [Quick start](https://docs.salla.dev/twilight/react/start/quick-start) first.

## Change what the engine already shows [#change-what-the-engine-already-shows]

Start with the smallest change that does the job.

<Card title="Add content to a slot" href="/recipes/add-content-to-a-slot">
  Inject a banner or badge at a named point, no forking.
</Card>

<Card title="Replace the product card" href="/recipes/replace-the-product-card">
  One card design everywhere products are listed.
</Card>

<Card title="Fork a built-in route" href="/recipes/fork-a-built-in-route">
  Keep the engine's data, render your own page.
</Card>

## Add something new [#add-something-new]

<Card title="Add a home block" href="/recipes/add-a-home-block">
  A section merchants can place on the home page.
</Card>

<Card title="Add a page" href="/recipes/add-a-page">
  Serve a new URL such as /faq.
</Card>

<Card title="Add translation keys" href="/recipes/add-translation-keys">
  Arabic and English strings for your theme.
</Card>

## React in the browser [#react-in-the-browser]

<Card title="React to cart events" href="/recipes/react-to-cart-events">
  Run code when the cart changes.
</Card>

<Card title="Track page views" href="/recipes/track-page-views">
  Send a view on every client-side navigation.
</Card>

<Card title="Run app code on a page" href="/recipes/run-app-code-on-a-page">
  Run snippet code on every page of a kind with 

  `page::view`

  .
</Card>