> ## Documentation Index
> Fetch the complete documentation index at: https://docs.titane-intelligence.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Une sélection sur l'accueil

> Afficher les recommandations de Titane sur votre page d'accueil WooCommerce : une case à cocher, ou le bloc pour choisir l'endroit exact.

export const PRODUITS = {
  serum: {
    nom: "Sérum rééquilibrant niacinamide",
    prix: "24,90 €",
    image: "/images/pure/serum.jpg"
  },
  gel: {
    nom: "Gel nettoyant doux",
    prix: "14,90 €",
    image: "/images/pure/gel-nettoyant.jpg"
  },
  solaire: {
    nom: "Lait frais solaire SPF 50",
    prix: "19,90 €",
    image: "/images/pure/solaire.jpg"
  },
  baume: {
    nom: "Baume lèvres repulpant",
    prix: "8,90 €",
    image: "/images/pure/baume-levres.jpg"
  },
  huile: {
    nom: "Huile corps nourrissante",
    prix: "22,90 €",
    image: "/images/pure/huile-corps.jpg"
  },
  dentifrice: {
    nom: "Dentifrice éclat minéral",
    prix: "6,90 €",
    image: "/images/pure/dentifrice.jpg"
  },
  deodorant: {
    nom: "Déodorant stick néroli blanc",
    prix: "11,90 €",
    image: "/images/pure/deodorant-stick.jpg"
  },
  recharge: {
    nom: "Recharge déodorant roll-on 24 h",
    prix: "7,90 €",
    image: "/images/pure/recharge-roll-on.jpg"
  },
  masque: {
    nom: "Masque stick argile rose",
    prix: "16,90 €",
    image: "/images/pure/masque-stick.jpg"
  },
  duo: {
    nom: "Duo rituel du matin",
    prix: "29,90 €",
    image: "/images/pure/duo-matin.jpg"
  }
};

export const ApercuBloc = ({titre, produits = [], page, bouton}) => <div className="not-prose" style={{
  border: "1px solid rgba(127,127,127,0.25)",
  borderRadius: 14,
  overflow: "hidden",
  margin: "20px 0"
}}>
    <div style={{
  background: "#1C1A16",
  color: "#F7F5F0",
  padding: "12px 18px",
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center"
}}>
      <span style={{
  fontFamily: "Georgia, 'Times New Roman', serif",
  fontSize: 22
}}>pure</span>
      <span style={{
  fontSize: 12,
  opacity: 0.75
}}>{page}</span>
    </div>
    <div style={{
  background: "#F7F5F0",
  color: "#1C1A16",
  padding: "22px 18px"
}}>
      <div style={{
  fontSize: 19,
  fontWeight: 700,
  marginBottom: 14
}}>{titre}</div>
      <div style={{
  display: "grid",
  gridTemplateColumns: `repeat(${Math.min(produits.length, 4) || 1}, minmax(0, 1fr))`,
  gap: 12
}}>
        {produits.map(p => <div key={p.nom}>
            <img src={p.image} alt={p.nom} style={{
  width: "100%",
  aspectRatio: "4 / 5",
  objectFit: "cover",
  borderRadius: 8,
  margin: 0
}} />
            <div style={{
  fontSize: 13,
  fontWeight: 600,
  marginTop: 8,
  lineHeight: 1.35
}}>{p.nom}</div>
            <div style={{
  fontSize: 13,
  marginTop: 2
}}>{p.prix}</div>
            {bouton ? <div style={{
  marginTop: 8,
  fontSize: 12,
  fontWeight: 600,
  border: "1px solid #1C1A16",
  borderRadius: 999,
  padding: "6px 0",
  textAlign: "center"
}}>{bouton}</div> : null}
          </div>)}
      </div>
    </div>
    <div style={{
  padding: "8px 16px",
  fontSize: 12,
  opacity: 0.65
}}>Aperçu d'un bloc de recommandations, marque de démonstration « Pure ».</div>
  </div>;

**L'objectif :** que la page d'accueil montre à chaque client des produits choisis pour lui.

**Temps :** 2 minutes avec la case, 5 minutes avec le bloc.

## Le résultat

<ApercuBloc page="Accueil · Léa est connectée" titre="Recommandé pour vous" produits={[PRODUITS.recharge, PRODUITS.dentifrice, PRODUITS.gel, PRODUITS.baume]} />

## Le plus simple : la case Accueil

<Steps>
  <Step title="Ouvrir les placements">
    **WooCommerce** › **Titane** › onglet **Placements**.
  </Step>

  <Step title="Cocher Accueil">
    Cochez **Accueil**, puis **Enregistrer les placements**.
  </Step>

  <Step title="Vérifier">
    Ouvrez votre page d'accueil : le bloc « Recommandé pour vous » est apparu.
  </Step>
</Steps>

Où le bloc se place dépend de ce que vous avez choisi comme page d'accueil, dans **Réglages** › **Lecture** :

| Votre page d'accueil | Où apparaît le bloc |
| - | - |
| Une page statique | sous le contenu de la page |
| La page Boutique de WooCommerce | au-dessus de la grille de produits |
| Vos derniers articles | après la liste des articles |

<Note>
  Si vous avez déjà ajouté le bloc ou le shortcode Titane à votre page d'accueil, la case n'en ajoute pas un second.
</Note>

## Pour choisir l'endroit exact : le bloc

Avec la case, le bloc se place sous le contenu. Pour le mettre ailleurs, sous votre bannière par exemple, laissez la case décochée et placez le bloc vous-même.

<Steps>
  <Step title="Ouvrir la page d'accueil">
    **Pages** › votre page d'accueil › **Modifier**. Si votre thème est un thème « bloc », passez par **Apparence** › **Éditeur**.
  </Step>

  <Step title="Ajouter le bloc">
    Cliquez **+**, cherchez « Titane » et choisissez **Titane — Recommandations**.
  </Step>

  <Step title="Le régler">
    Dans le panneau **Réglages** du bloc :

    * **Placement** : `home` ;
    * **Nombre de produits** : 4 pour une ligne, 8 pour deux.
  </Step>

  <Step title="Publier">
    Placez le bloc où vous le voulez, puis **Mettre à jour**.
  </Step>
</Steps>

## Avec le shortcode

Si votre page d'accueil est construite avec un constructeur de pages ou un thème classique, collez le shortcode dans un bloc de texte ou un module « shortcode » :

```text theme={null}
[titane_recommendations placement="home" limit="4" heading="Choisis pour vous"]
```

| Réglage | Valeurs | Par défaut |
| - | - | - |
| `placement` | `home`, `product`, `collection`, `cart`, `checkout`, `post_purchase` | `home` |
| `limit` | de 1 à 12 | 4 |
| `heading` | le titre affiché au-dessus des produits | Recommandé pour vous |

<Tip>
  Le shortcode est le seul moyen de **changer le titre** d'un bloc : avec la case ou le bloc de l'éditeur, le titre reste « Recommandé pour vous ».
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.