<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Archives des prix specifiques prestashop - st9ph.fr</title>
	<atom:link href="https://st9ph.fr/tag/prix-specifiques-prestashop/feed/" rel="self" type="application/rss+xml" />
	<link>https://st9ph.fr/tag/prix-specifiques-prestashop/</link>
	<description>la boite à outils numériques</description>
	<lastBuildDate>Mon, 13 Apr 2026 07:29:08 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://st9ph.fr/wp-content/uploads/2026/02/cropped-ico-fav-32x32.png</url>
	<title>Archives des prix specifiques prestashop - st9ph.fr</title>
	<link>https://st9ph.fr/tag/prix-specifiques-prestashop/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">199087513</site>	<item>
		<title>Prestashop &#124; La Fiche Produit par l&#8217;exemple</title>
		<link>https://st9ph.fr/prestashop-la-fiche-produit/</link>
					<comments>https://st9ph.fr/prestashop-la-fiche-produit/#respond</comments>
		
		<dc:creator><![CDATA[St9ph]]></dc:creator>
		<pubDate>Fri, 16 Jan 2026 21:44:19 +0000</pubDate>
				<category><![CDATA[PrestaShop]]></category>
		<category><![CDATA[🛠️ création de sites]]></category>
		<category><![CDATA[🌐 public]]></category>
		<category><![CDATA[déclinaisons prestashop]]></category>
		<category><![CDATA[prix specifiques prestashop]]></category>
		<category><![CDATA[tuto fiche produit prestashop]]></category>
		<category><![CDATA[tva prix prestashop]]></category>
		<guid isPermaLink="false">https://st9ph.fr/?p=32746</guid>

					<description><![CDATA[<p>PrestaShop &#124; La Fiche Produit 👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve technique, la création ou modification d&#8217;une fiche produit est un incontournable de l&#8217;examen E5B du BTS NDRC. Les deux autres blocs de questions étant : ⏱️ Vous devrez répartir votre temps (et donc vos points) entre ces trois blocs. Sur une épreuve de 40 ... <a title="Prestashop &#124; La Fiche Produit par l&#8217;exemple" class="read-more" href="https://st9ph.fr/prestashop-la-fiche-produit/" aria-label="En savoir plus sur Prestashop &#124; La Fiche Produit par l&#8217;exemple">Lire la suite</a></p>
<p>L’article <a href="https://st9ph.fr/prestashop-la-fiche-produit/">Prestashop | La Fiche Produit par l&#8217;exemple</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-80041ad0 wp-block-group-is-layout-flex">


<p class="has-medium-font-size"><strong>PrestaShop</strong></p>



<p class="has-accent-color has-text-color has-link-color has-x-large-font-size wp-elements-755afc86b2978d41e5b3abc95c613507"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-contrast-color">|</mark> La Fiche Produit</p>


</div>



<figure class="wp-block-audio"><audio controls src="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_17-01-2026_at_10_28_33_on_January_17th_2026.mp3"></audio><figcaption class="wp-element-caption">🎧 Ecouter l&#8217;introduction audio</figcaption></figure>



<p class="has-medium-font-size">👉🏻 1er bloc d&#8217;évaluation de l&#8217;épreuve technique, la <strong>création ou modification d&#8217;une fiche produit</strong> est un <strong>incontournable de l&#8217;examen </strong>E5B du BTS NDRC.</p>



<p><strong>Les deux autres blocs</strong> de questions étant : </p>



<ul class="wp-block-list">
<li>2️⃣ <strong>Manipulations à l&#8217;intérieur de la boutique</strong> (paramétrer le carrousel, l&#8217;apparence du site, une promotion sur un rayon, une réassurance &#8230;) </li>



<li>3️⃣ <strong>le SAV</strong> (traiter une demande client) </li>
</ul>



<p class="has-base-2-background-color has-background">⏱️ Vous devrez <strong>répartir votre temps </strong>(et donc vos points) <strong>entre ces trois blocs.</strong> Sur une épreuve de <strong>40 minutes</strong>, <strong>vous en aurez donc 13 pour réaliser toutes les manipulations de cet article </strong>et aller chercher <strong>les 6 à 7 points sur 20 </strong>de ce bloc.</p>



<p class="has-text-align-center has-medium-font-size">C&#8217;est chaud !🔥 Et il faut donc s&#8217;entrainer au maximum :</p>



<ul class="wp-block-list">
<li>Vous trouverez <a href="https://st9ph.fr/exos-prestashop/" target="_blank" rel="noreferrer noopener">sur cette page</a> une <strong>série d&#8217;exercices d&#8217;application</strong> classés par difficulté</li>



<li>Vous pouvez voir sur <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener">cette boutique démo</a><strong> <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener"></a>le résultat escompté</strong> de ces exercices</li>
</ul>



<p>ℹ️ Cet article englobe aussi des aspects de ☝️concepts (<strong>légalité de la EShop</strong>) en remplacement de cette <a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2961/preview/pdf/5747" target="_blank" rel="noreferrer noopener">fiche ressource</a> pour la préparation de l&#8217;épreuve écrite E5A (compétence 3).</p>



<!-- =====================================================
     BADGE DE LECTURE + BADGE "DÉJÀ LU"
     - % de lecture en temps réel
     - Devient vert à 75 %
     - Mémorisé en session (déjà lu)
     ===================================================== -->

<!-- ✅ STRUCTURE HTML DU BADGE -->
<div id="readBadge">
  📖 Lecture : 0 %
</div>

<style>
/* ===============================
   STYLE DU BADGE
   =============================== */
#readBadge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #111;
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 9999;
}

/* Badge visible */
#readBadge.show {
  opacity: 1;
  transform: translateY(0);
}

/* Badge vert = article lu */
#readBadge.read {
  background: #188038;
}
</style>

<script>
/* ===============================
   LOGIQUE JAVASCRIPT
   =============================== */
(function () {

  const badge = document.getElementById("readBadge");

  // ✅ Clé unique par page (URL)
  const storageKey = "articleLu_" + window.location.pathname;

  // ✅ Si déjà lu dans la session
  if (sessionStorage.getItem(storageKey)) {
    badge.classList.add("show", "read");
    badge.innerText = "✅ Article déjà lu";
    return; // on ne recalcule plus le scroll
  }

  let badgeShown = false;
  let articleMarkedAsRead = false;

  window.addEventListener("scroll", function () {

    const scrollTop = window.scrollY;
    const docHeight = document.body.scrollHeight - window.innerHeight;
    const percent = Math.round((scrollTop / docHeight) * 100);

    // Mise à jour du texte
    badge.innerText = "📖 Lecture : " + percent + " %";

    // Affichage du badge dès 10 %
    if (percent >= 10 && !badgeShown) {
      badge.classList.add("show");
      badgeShown = true;
    }

    // ✅ Article considéré comme lu à 75 %
    if (percent >= 75 && !articleMarkedAsRead) {
      badge.classList.add("read");
      badge.innerText = "✅ Article lu à " + percent + " %";
      sessionStorage.setItem(storageKey, "true");
      articleMarkedAsRead = true;
    }

  });

})();
</script>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img decoding="async" width="233" height="211" src="https://st9ph.fr/wp-content/uploads/2025/12/IA.png" alt="" class="wp-image-31733" style="width:79px;height:auto"/></figure>
</div>


<p class="has-small-font-size">Part d&#8217;IA /5 dans cet article</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<div class="wp-block-columns has-base-2-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-6bffa562-bd8f-476f-8885-ffba543304c2">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-0"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-1"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-6bffa562-bd8f-476f-8885-ffba543304c2-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">♨️ Sources</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-953cec45-3e6f-422b-8592-e666a7cfbdb7">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-0"><rect height="150" width="150" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-1"><rect height="150" width="75" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-953cec45-3e6f-422b-8592-e666a7cfbdb7-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">🖼️ Images</div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div style="gap: 20px; " class="ub-star-rating ub-star-rating-text-top ub-star-rating-align-left wp-block-ub-star-rating-block" id="ub-star-rating-84f3a636-c4a8-421c-9d7c-e8630dad43c9">
			<div class="ub-star-outer-container" style="justify-content: flex-start; ">
				<div class="ub-star-inner-container"><div class=""><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-0"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star0" mask="url(#ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-0)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-1"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star1" mask="url(#ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-1)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-2"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star2" mask="url(#ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-2)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-3"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star3" mask="url(#ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-3)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewbox="0 0 150 150">
			<defs><mask id="ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-4"><rect height="150" width="0" y="0" x="0" fill="#fff"></rect></mask></defs> <path fill="none" stroke-width="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path><path class="star" id="star4" mask="url(#ub_star_rating_filter-84f3a636-c4a8-421c-9d7c-e8630dad43c9-4)" fill="#ffb901" strokewidth="2.5" d="m0.75,56.89914l56.02207,0l17.31126,-56.14914l17.31126,56.14914l56.02206,0l-45.32273,34.70168l17.31215,56.14914l-45.32274,-34.70262l-45.32274,34.70262l17.31215,-56.14914l-45.32274,-34.70168z" stroke="#ffb901"></path>
			</svg></div></div>
			</div><div class="ub-review-text" style="text-align: left; ">✒️Contenu</div>
		</div></div>
</div>
</div>
</div>



<p class="has-text-align-center has-small-font-size">Il est possible que les termes ou les aperçus d&#8217;écran diffèrent entre votre BO et le mien notamment au niveau des noms de labels car j&#8217;utilise une version multilingue du CMS et les noms restent parfois en anglais.</p>



<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex">
<p>⏱️Temps de lecture :</p>


<div class="wp-elements-2660b74cdd79da9184a09a62f3b8f226 wp-block-post-time-to-read has-text-color has-accent-color">53–80 minutes</div>


<p>|</p>


<div class="wp-block-post-time-to-read">12 526 mots</div>


<p>|</p>



<p class="has-accent-color has-text-color has-link-color wp-elements-f8515b49564e2f8ad2c183e4ed182d7c">🗓️ dernière modification le</p>


<div class="has-link-color wp-block-post-date__modified-date wp-elements-c7e6b51b55b0dff84108436fc6f3823e wp-block-post-date has-text-color has-accent-color"><time datetime="2026-04-13T09:29:08+02:00">13 avril  2026</time></div></div>


				<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-b4ee5d2e      uagb-toc__collapse--list"
					data-scroll= "1"
					data-offset= "30"
					style=""
				>
				<div class="uagb-toc__wrap">
						<div class="uagb-toc__title">
							plan du tuto :						</div>
												<div class="uagb-toc__loader"></div>										<div class="uagb-toc__list-wrap uagb-toc__list-hidden">
						<ol class="uagb-toc__list"><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#lexemple-fil-rouge" class="uagb-toc-link__trigger">L&#039;Exemple &quot;fil rouge&quot;</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#magnifique-sweat-panda" class="uagb-toc-link__trigger">Magnifique Sweat Panda</a></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#onglet-description" class="uagb-toc-link__trigger">Onglet Description</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#11-les-visuels-du-produit" class="uagb-toc-link__trigger">🔹1.1 |les visuels du produit</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#12-récapitulatif-description" class="uagb-toc-link__trigger">🔹1.2 |Récapitulatif &amp; Description</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#13-catégories" class="uagb-toc-link__trigger">🔹1.3 |Catégories</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#14-marque" class="uagb-toc-link__trigger">🔹1.4 |Marque</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#15-produits-associés" class="uagb-toc-link__trigger">🔹1.5 |Produits associés</a></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#longlet-détails" class="uagb-toc-link__trigger">l&#039;Onglet Détails</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#21-références" class="uagb-toc-link__trigger">🔹2.1 |Références</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#22-caractéristiques" class="uagb-toc-link__trigger">🔹2.2 |Caractéristiques</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#23-fichiers-joints" class="uagb-toc-link__trigger">🔹2.3 |Fichiers joints</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#24-etat-du-produit" class="uagb-toc-link__trigger">🔹2.4 |Etat du produit</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#25-personnalisation" class="uagb-toc-link__trigger">🔹2.5 |Personnalisation</a></li></ul></li></ul></li></ul></li><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#3-déclinaisons" class="uagb-toc-link__trigger">3️⃣| Déclinaisons</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-1-créer-une-valeur-ou-tout-un-attribut-de-déclinaison" class="uagb-toc-link__trigger">3-1 | créer une valeur ou tout un attribut de déclinaison</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#pull-marin-homme" class="uagb-toc-link__trigger">Pull marin homme</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#cadre-panda" class="uagb-toc-link__trigger">Cadre Panda</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#3-2-générer-et-paramétrer-les-déclinaisons" class="uagb-toc-link__trigger">3-2 | Générer et paramétrer les déclinaisons</a></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#4-livraison" class="uagb-toc-link__trigger">4️⃣| Livraison</a><li class="uagb-toc__list uagb-toc__list--expandable"><span class="list-open" role="button" tabindex="0" aria-expanded="true"></span><a href="#5-prix" class="uagb-toc-link__trigger">5️⃣| Prix</a><ul class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-1-les-taux-de-tva-que-vous-devez-connaitre" class="uagb-toc-link__trigger">5-1 | Les taux de TVA que vous devez connaitre</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-2-etablissement-du-prix-normal" class="uagb-toc-link__trigger">5-2 | Etablissement du prix normal</a><li class="uagb-toc__list"><li class="uagb-toc__list "><a href="#5-3-etablissement-dun-prix-spécifique-promo" class="uagb-toc-link__trigger">5-3 | Etablissement d&#039;un prix spécifique (promo)</a></li></ul></li></ul></li></ul></li></ul></li></ul></li><li class="uagb-toc__list "><a href="#6-référencement-seo" class="uagb-toc-link__trigger">6️⃣| Référencement &#8211; SEO</a><li class="uagb-toc__list "><a href="#7-options" class="uagb-toc-link__trigger">7️⃣| Options</a><li class="uagb-toc__list "><a href="#aller-à-la-seconde-partie-manipuler-la-boutique" class="uagb-toc-link__trigger">Aller à la seconde partie | manipuler la boutique ➡️</a></ul></ul></ul></ul></ul></ol>					</div>
									</div>
				</div>
			


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.chapter-title {
  display: flex;
  align-items: stretch;
  margin: 1.8rem 0;
}

/* Numéro */
.chapter-number {
  background: #1e73be;
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
}

/* Contenu */
.chapter-content {
  padding: 0.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid #1e73be;
}

/* H2 avec logo */
.chapter-content h2 {
  margin: 0;
  font-size: 2.05rem;
  font-weight: 700;
  color: #1e73be;
  display: flex;
  align-items: center;
  gap: 0.6rem; /* espace logo / texte */
}

/* Logo carré */
.chapter-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Sous-titre */
.chapter-subtitle {
  margin-top: 0.35rem;
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
}
</style>

<div class="chapter-title">
  <div class="chapter-number">0</div>
  <div class="chapter-content">
    <h2>
      <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png"
           alt=""
           class="chapter-icon">
      L&#8217;Exemple &#8220;fil rouge&#8221;
    </h2>
    <p class="chapter-subtitle">le magnifique sweat panda femme</p>
  </div>
</div>



<p class="callout vert">👕 Durant tout le déroulé de cet article, je prendrais <strong>l&#8217;exemple d&#8217;un produit que nous allons construire pendant mon exposé</strong>. Un magnifique Sweat-Shirt de la marque Panda de notre collection de vêtements Femme.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-video"><video autoplay loop muted src="https://boutiq.st9ph.fr/img/cms/sweat2w-final.mp4" playsinline></video></figure>
</div>
</div>


<div style="min-height: 285px;; " class="ub_image_slider swiper-container wp-block-ub-image-slider" id="ub_image_slider_d393e517-f601-4177-8f05-1775e885f960" data-swiper-data='{"speed":300,"spaceBetween":20,"slidesPerView":3,"loop":true,"pagination":{"el": ".swiper-pagination" , "type": "bullets", "clickable":true},"navigation": {"nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}, "keyboard": { "enabled": true }, "effect": "slide","simulateTouch":false}'>
            <div class="swiper-wrapper"><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/2situ.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/camel.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/camel-situ.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/noir.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure><figure class="swiper-slide">
                <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/noir-situ.jpg" alt="" style="height: 250px;; ">
                <figcaption class="ub_image_slider_image_caption"></figcaption>
            </figure></div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
        </div>


<!-- Bouton principal -->
<button id="uxMenuBtn" style="
  position: fixed;
  right: 14px;
  bottom: 40%;
  padding: 12px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  font-size: 18px;
">
  ☰
</button>

<!-- Menu -->
<div id="uxMenu" style="
  display:none;
  position: fixed;
  right: 14px;
  bottom: 48%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 10000;
  font-family: Arial, sans-serif;
">
  <button class="uxItem" data-popup="sources">📚 Sources</button>
  <button class="uxItem" data-popup="methodo">🧑‍🎓NDRC</button>
  <button class="uxItem" data-popup="glossary">📘 Glossaire</button>
</div>

<!-- Overlay -->
<div id="uxOverlay" style="
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.55);
  z-index:10001;
"></div>

<!-- POPUPS -->

<div class="uxPopup" id="sources" data-title="📚 Sources UX mobile">
<ul>
<li><strong>Nano Banana de Google Gemini</strong> – personnages d&#8217;illustration, des fiches produits et image en avant</li>
<li><strong>Prestashop</strong> – Saas dans sa version V9 pour les manipulations</li>
<li><strong>Ministère de l&#8217;économie et des finances publiques</strong> – règles de TVA</li>
</ul>
</div>

<div class="uxPopup" id="methodo" data-title="🧑‍🎓 NDRC">
<p>Cet article est à visée de 🖥️ l&#8217;épreuve technique E5B.</p>
<ul>
<li>Savoir concevoir un produit simple ou avec déclinaisons</li>
<li>savoir ajouter des caractéristiques, des attributs et ajouter des valeurs ad hoc</li>
<li>Savoir faire la promotion d&#8217;un produit</li>
<li>Savoir référencer un produit</li>
</ul>
<p>Quelques apports compétence 🛒 E-Commerce : Taux de TVA, marge commerciale</p>
</div>

<div class="uxPopup" id="glossary" data-title="📘 Glossaire UX mobile">
<ul>
<li><strong>caractéristique</strong> : spécificité d&#8217;un produit quelles que soient ses variantes</li>
<li><strong>attribut ou déclinaison</strong> : spécificité variable d&#8217;un produit (pointure, couleur &#8230;)</li>
<li><strong>prix d&#8217;achat</strong> : pour le marchand cad le prix fournisseur en HT</li>
<li><strong>Image de couverture</strong> : celle que le visiteur verra en 1er en arrivant sur la fiche produit</li>
</ul>
</div>

<!-- Style popup -->
<style>
.uxItem {
  display: block;
  padding: 10px 16px;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #111;        /* ✅ TEXTE VISIBLE */
  font-size: 14px;
}

.uxItem:hover {
  background: #f0f0f0;
}
.uxItem:hover { background:#f0f0f0; }

.uxPopup {
  display:none;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:90%;
  max-width:560px;
  max-height:80%;
  padding:24px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  z-index:10002;
  overflow-y:auto;
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu {
    display: none !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}
</style>
<style>
@media (max-width: 768px) {
  #uxMenuBtn,
  #uxMenu,
  #uxOverlay,
  .uxPopup {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    display: none !important;
  }
}
</style>

<script>
(function () {

  // === DÉSACTIVATION MOBILE ===
  if (window.innerWidth <= 768) {
    return; // on ne fait RIEN sur mobile
  }

  // === RÉFÉRENCES ===
  const menuBtn = document.getElementById("uxMenuBtn");
  const menu = document.getElementById("uxMenu");
  const overlay = document.getElementById("uxOverlay");
  const popups = document.querySelectorAll(".uxPopup");

  if (!menuBtn || !menu || !overlay) return;

  // === OUVERTURE / FERMETURE MENU ===
  menuBtn.addEventListener("click", () => {
    menu.style.display = menu.style.display === "block" ? "none" : "block";
  });

  // === OUVERTURE POPUPS ===
  document.querySelectorAll(".uxItem").forEach(btn => {
    btn.addEventListener("click", () => {
      popups.forEach(p => p.style.display = "none");
      const target = document.getElementById(btn.dataset.popup);
      if (target) target.style.display = "block";
      overlay.style.display = "block";
      menu.style.display = "none";
    });
  });

  // === FERMETURE OVERLAY ===
  overlay.addEventListener("click", () => {
    popups.forEach(p => p.style.display = "none");
    overlay.style.display = "none";
  });

})();
</script>



</script>
<script>
(function () {
  if (window.innerWidth <= 768) {
    const uxPanel = document.querySelector('.ux-panel');
    if (uxPanel) {
      uxPanel.remove();
    }
  }
})();
</script>



<p class="has-medium-font-size"> 👍 Il est chouette, nan ?</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Commencez par <strong>télécharger ces visuels </strong>:</li>
</ul>



<div class="wp-block-file"><a id="wp-block-file--media-2b49b188-aaee-4b80-9039-7cc14515aa80" href="https://st9ph.fr/wp-content/uploads/2026/01/sweatPanda.zip">sweatPanda</a><a href="https://st9ph.fr/wp-content/uploads/2026/01/sweatPanda.zip" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-2b49b188-aaee-4b80-9039-7cc14515aa80">Télécharger</a></div>
</div>



<p>On voit que c'est un produit avec <strong>déclinaisons de couleurs.</strong> Mais on l'a aussi <strong>en plusieurs tailles</strong>. Nos consignes sont dans le tableau ci-dessous :</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Item</th><th>Spécificité</th><th>Item</th><th>Spécificité</th></tr></thead><tbody><tr><td>Rayon(s)</td><td>vêtements - Femme</td><td>repassage</td><td>Non</td></tr><tr><td>Marque</td><td>Panda Store</td><td>Lavage</td><td>30° (délicat)</td></tr><tr><td>Tailles</td><td>S, L, M, XL</td><td>Séchage machine</td><td>Non</td></tr><tr><td>Couleur(s)</td><td>Noir - Camel (à créer)</td><td>Origine</td><td>Chine</td></tr><tr><td>Stocks</td><td>10 pc de chaque taille dans les deux couleurs</td><td>Norme CE</td><td>Oui</td></tr><tr><td>Composition</td><td>100% coton</td><td>Prix d'achat <br>Marge Com mini</td><td>6,00 €HT<br>8,00 €HT</td></tr></tbody></table></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-medium-font-size">👀 Voir <strong>le produit fini</strong>  :</p>



<ul class="wp-block-list">
<li>En cliquant sur la fiche 👉🏻</li>



<li>Ou en <strong>flashant le QR Code</strong> 👇🏻</li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img fetchpriority="high" decoding="async" width="490" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14.png" alt="" class="wp-image-33077" style="width:183px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14.png 490w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/qrcode_boutiq.st9ph.fr-14-150x150.png 150w" sizes="(max-width: 490px) 100vw, 490px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/32-90-magnifique-sweat-panda.html#/1-taille-s/12-couleur-camel" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/72-product_main/magnifique-sweat-panda.jpg" alt="Magnifique Sweat Panda" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">Magnifique Sweat Panda</h3>
        <div class="ps-product-price">17,95 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p class="has-text-align-right"></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%"></div>
</div>



<p class="has-medium-font-size">🖥️ On y va ?</p>



<ul class="wp-block-list">
<li>Depuis le BO de votre CMS Prestashop,<strong> Catalogue &gt; produits</strong></li>
</ul>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Ajouter un nouveau produit</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" width="213" height="27" src="https://st9ph.fr/wp-content/uploads/2026/01/image-126.png" alt="" class="wp-image-32760"/></figure>
</div>



<p></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="363" height="191" src="https://st9ph.fr/wp-content/uploads/2026/01/image-127.png" alt="" class="wp-image-32763" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-127.png 363w, https://st9ph.fr/wp-content/uploads/2026/01/image-127-300x158.png 300w" sizes="auto, (max-width: 363px) 100vw, 363px" /></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Le CMS vous donne le choix entre :</p>



<ul class="wp-block-list">
<li>un <strong>produit simple</strong> (basique) sans variantes</li>



<li>un p<strong>roduit déclinable</strong> (en taille, en couleurs ...)</li>



<li>un <strong>pack de</strong> plusieurs <strong>produits</strong> (lot)</li>



<li>Un<strong> produit dématérialisé</strong> (livre électronique, logiciel, billet de spectacle ...)</li>
</ul>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur : </li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="281" height="27" src="https://st9ph.fr/wp-content/uploads/2026/01/image-128.png" alt="" class="wp-image-32764"/></figure>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" width="213" height="27" src="https://st9ph.fr/wp-content/uploads/2026/01/image-126.png" alt="" class="wp-image-32760"/></figure>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Inscrivez le nom de votre produit <strong>dans la zone "article"</strong></li>
</ul>



<p class="has-background" style="background-color:#f2cece">⚠️ On va faire à présent <strong>quelque chose qui ne se fait jamais </strong>mais qu'il vaut mieux faire dès maintenant pour ne pas l'oublier quand vous aurez fini votre fiche : <strong>le publier directement !</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="480" height="132" src="https://st9ph.fr/wp-content/uploads/2026/01/image-129.png" alt="" class="wp-image-32769" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-129.png 480w, https://st9ph.fr/wp-content/uploads/2026/01/image-129-300x83.png 300w" sizes="auto, (max-width: 480px) 100vw, 480px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="125" height="37" src="https://st9ph.fr/wp-content/uploads/2026/01/image-130.png" alt="" class="wp-image-32770"/></figure>
</div>
</div>



<ul class="wp-block-list">
<li>Cliquer sur le bouton radio <strong>Offline &gt; Online</strong></li>
</ul>



<p class="has-base-2-background-color has-background"><strong>On ne fait jamais cela en vérité </strong>car <strong>votre produit, qui n'est encore qu'un brouillon, va se retrouver visible dans votre boutique en ligne</strong> ! Seulement, <strong>si vous oubliez à la fin, c'est - 4 pts</strong> (sur un total de 6 ou 7 à prendre). C'est pourquoi<strong> je vous invite à prendre cette petite liberté</strong>.</p>



<p></p>



<!-- DÉBUT TITRE CHAPITRE -->
<style>
.chapter-title { display: flex; align-items: stretch; margin: 1.7rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chapter-number { background: #1e73be; color: #fff; font-weight: 700; font-size: 2.8rem; padding: 0 1.1rem; display: flex; align-items: center; justify-content: center; }
.chapter-content { padding: 1.3rem 1.5rem; width: 100%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.chapter-points { margin: 0; padding-left: 0; list-style: none; }
.chapter-points li { margin-bottom: 0.35rem; color: #444; font-size: 0.95rem; line-height: 1.45; }
.chapter-points li::before { content: "🔹 "; }
</style>

<div class="chapter-title">
  <div class="chapter-number">1</div>
  <div class="chapter-content">
    <div class="chapter-heading">
      <a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
        <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png" alt="Logo">
      </a>
      <h2>Onglet Description</h2>
    </div>
    <ul class="chapter-points"><li>Visuels du produit</li><li>Récapitulatif & description</li><li>Catégories</li><li>Marques</li><li>Produits associés</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p class="callout bleu">ℹ️ Il s'appelle peut-être encore "<strong>Essentiel</strong>" si vous n'êtes pas passé(e) à la version 9.</p>



<p class="has-small-font-size">⚠️ Attention, la V9 est est la version installée pour l'examen</p>



<p class="has-text-align-center has-base-2-background-color has-background">C'est ici qu'on va pouvoir faire <strong>les réglages "de base"</strong>.</p>



<h3 class="wp-block-heading" id="0-11-l-es-visuels-du-produit-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.1 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt="">l<strong>es visuels du produit</strong></h3>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur la zone image (centrale) :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="56" height="47" src="https://st9ph.fr/wp-content/uploads/2026/01/image-131.png" alt="" class="wp-image-32772"/></figure>
</div>



<p>📂 Une <strong>boite de dialogue </strong>s'ouvre pour vous demander où sont <strong>les images à uploader</strong></p>



<ul class="wp-block-list">
<li><strong>Recherchez les fichiers dézippés</strong></li>



<li><strong>Cliquez sur chacun</strong> en maintenant la touche <strong>CTRL</strong></li>



<li>cliquez sur <strong>ouvrir</strong></li>
</ul>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-132.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<p>Par défaut, il y'a <strong>deux restrictions</strong> :</p>



<ul class="wp-block-list">
<li>vos visuels doivent être <strong>au format .jpg ou .png</strong></li>



<li>l<strong>e poids</strong> de chaque visuel doit être<strong> &lt;= 2 Mo</strong></li>
</ul>



<p class="callout jaune">🖥️ Ce sera le cas <strong>le jour de l'épreuve</strong> mais on ne vous fera pas la blague de <strong>vous donner des fichiers au mauvais format ou trop lourds </strong>(enfin, j'espère, ce ne serait pas très drôle).</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-133.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Commençons par légender nos images pour le référencement Google Images :</p>



<ul class="wp-block-list">
<li>cliquer sur un visuel</li>



<li>tapez <strong>l'information clé</strong></li>



<li><strong>Enregistrer</strong></li>
</ul>



<p class="callout vert">🔑 L'information clé, c'est : <strong>le nom du produit </strong>+ <strong>son rayon </strong>+ <strong>le nom de votre boutique</strong></p>



<p></p>
</div>
</div>



<p class="has-text-align-center has-accent-color has-text-color has-link-color wp-elements-353e68d30a04d2127649e5fa7f07a1ad">Il faut savoir que vous n'aurez <strong>pas de balise Alt</strong> (comme dans WordPress) et que <strong>le seul moyen</strong> que vous avez <strong>de référencer votre produit</strong> en recherche d'images <strong>sera la légende</strong>.</p>



<p class="has-base-2-background-color has-background">Ainsi : "<em>Sweat femme", "Boutique St9ph", "marque Panda</em>" tapés <strong>en mots clé</strong> pourront <strong>renvoyer vers ce produit</strong>.</p>



<ul class="wp-block-list">
<li><strong>copier-coller</strong> cette légende <strong>sur toutes les images</strong></li>
</ul>



<p class="callout bleu">👉 Vous avez remarqué aussi la case à cocher "<strong>utiliser comme image de couverture</strong>". Elle sert à <strong>définir quel est le premier visuel </strong>que le visiteur verra quand il arrivera <strong>sur la fiche produit</strong>.</p>



<p class="callout bleu">ℹ️ Il n'est <strong>pas obligatoire de faire figurer des visuels</strong> sur une fiche produit mais cela paraitrait vraiment bizarre qu'il n'y en ait pas, vu que c'est un élément indispensable. </p>



<p class="callout bleu has-medium-font-size">Sachez aussi que :</p>



<ul class="wp-block-list">
<li>si <strong>des éléments photographiés <mark style="background-color:rgba(0, 0, 0, 0);color:#bd2b2b" class="has-inline-color">ne font pas partie du produit</mark>,</strong> vous devez l'indiquer "<em>tel élément vendu séparément</em>"</li>



<li>si <mark style="background-color:rgba(0, 0, 0, 0);color:#dd2e2e" class="has-inline-color">l<strong>'aspect du produit peut changer</strong></mark> (selon les arrivages), vous devez indiquer "<em>images non contractuelles</em>", "<em>couleurs selon arrivages</em>" ...</li>



<li>les <mark style="background-color:rgba(0, 0, 0, 0);color:#d63d3d" class="has-inline-color">photos <strong>ne représentant qu'une partie </strong></mark><strong>des déclinaisons</strong>, vous devez préciser "<em>tel élément en option</em>" ou "<em>modèle photographié : telle option</em>"</li>
</ul>



<p class="has-small-font-size">Si je n'avais pas de visuels pour le pull Camel, par exemple, j'indiquerai "disponible aussi en couleur Camel" sur le visuel noir. Ca peut arriver, parfois, que les fournisseurs n'aient pas eu le temps de faire un shooting pour une nouvelle couleur de leur produit.</p>



<h3 class="wp-block-heading" id="1-12-r%C3%A9capitulatif-amp-description-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.2 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Récapitulatif &amp; Description</strong></h3>



<p>⚠️ Attention, <strong>on confond souvent les deux</strong> :</p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 256 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-f2834054-048c-45d0-9fc1-8a38417f5447">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 256 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-8ac5068e-6b28-41ad-9f00-b3bd5c39fb24">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 512"><path fill="var(--accent)" d="M160 64c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64C-.5 111.2-4.4 131 5.4 145.8s29.7 18.7 44.4 8.9L96 123.8V416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H160V64z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Le récapitulatif</strong> (ou "Summary"), c'est<strong> l'argumentaire de vente </strong>de votre, produit, votre call to action, la zone<strong> juste au dessus du bouton "ajouter au panier"</strong>.</span>
			</div>
			
		</li>
</ul>


<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="894" height="258" src="https://st9ph.fr/wp-content/uploads/2026/01/image-134.png" alt="" class="wp-image-32782" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-134.png 894w, https://st9ph.fr/wp-content/uploads/2026/01/image-134-300x87.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-134-768x222.png 768w" sizes="auto, (max-width: 894px) 100vw, 894px" /></figure>



<p class="has-base-2-background-color has-background">Ici, j'ai volontairement forcé vers le "too much" mais l'objectif et de fa<strong>ire comprendre à votre correcteur que vous avez compris à quoi sert cette zone</strong>. Si vous êtes maladroit(e) ou si vous exagérez, ça ne vous enlèvera pas de points et cela nous fera juste sourire !</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-135.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>⚠️ Attention aussi <strong>à ne pas raconter votre vie non plus </strong>(800 caractères max) et il y'a une règle en or<strong> : le bouton "ajouter au panier" doit rester visible sans scroller</strong>. Donc, plus vous serez long, plus vous risquez de la faire descendre dans la page.</p>



<p>👉 <strong>Emoji bienvenus</strong> (Touches <strong>Windows </strong>+ <strong>POINT</strong>) - Vous serez sur un PC 🖥️ Windows</p>



<p class="has-base-background-color has-background">Bon, pour l'instant, il est gratuit et en rupture de stock mais c'est parce qu'on a pas encore renseigné tout cela !</p>
</div>
</div>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-7c4d63b3-9bdf-4c1f-a5c7-9403232d51d2">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 320 512&quot;&gt;&lt;path fill=&quot;%23ar(--accent)&quot; d=&quot;M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-078d7f23-716b-41ea-893e-4a628f03b3a7">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="var(--accent)" d="M142.9 96c-21.5 0-42.2 8.5-57.4 23.8L54.6 150.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L40.2 74.5C67.5 47.3 104.4 32 142.9 32C223 32 288 97 288 177.1c0 38.5-15.3 75.4-42.5 102.6L109.3 416H288c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L200.2 234.5c15.2-15.2 23.8-35.9 23.8-57.4c0-44.8-36.3-81.1-81.1-81.1z"></path></svg>
				</span>
				<span class="ub_list_item_text">La <strong>description</strong> ce sont les <strong>informations de levée de doute</strong> : la taille, le poids, les dimensions ... tout ce qui peut faire que<strong> le client prêt à ajouter au panier </strong>ne se demande plus s'il ne sera pas trop juste, trop lourd, trop grand ...</span>
			</div>
			
		</li>
</ul>


<p class="has-base-2-background-color has-background">⚠️ Attention encore, certaines informations seront <strong>mieux mises en valeur en caractéristiques </strong>(ce sera même parfois explicitement demandé) mais nous verrons cela plus tard parce que <strong>c'est dans l'onglet suivant</strong></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>On vous donnera parfois <strong>des pictogrammes </strong>pour certaines informations :</p>



<ul class="wp-block-list">
<li>Ici, <strong>concernant les vêtements</strong> : les conditions de repassage, de lavage, de séchage (comme sur le panneau ci-contre) </li>



<li>pour les <strong>produits électroniques</strong> : des pictogrammes sur la tension, les ondes, la résistance ...</li>



<li>Pour <strong>les plats préparés </strong>: les temps, modes et températures de réchauffage ....</li>
</ul>



<p></p>



<p>Si ces pictogrammes sont fournis, vous pouvez<strong> les inclure par le pictogramme image </strong>de la barre d'outils :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="290" height="84" src="https://st9ph.fr/wp-content/uploads/2026/01/image-137.png" alt="" class="wp-image-32787"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-136.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-138.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Sur <a href="https://boutiq.st9ph.fr/20-40-pull-panda.html#/1-taille-s/7-couleur-beige" target="_blank" rel="noreferrer noopener">ce produit</a>, par exemple, les pictogrammes permettent <strong>mieux que des mots </strong>d'indiquer les précautions d'emploi.</p>



<p class="has-base-2-background-color has-background">On est jamais trop prudent avec les clients tatillons (il y'en a) et j'ai préfère quand même <strong>l'écrire en toutes lettres </strong>en dessous !</p>



<p>👉 Pour notre Sweat, pas de questions à se poser, <strong>nous n'avons pas de picto</strong>, donc : o<strong>n écrit tout à la main</strong> ... enfin, au clavier !</p>



<p class="has-medium-font-size"><em>Reprenons le tableau :</em></p>
</div>
</div>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Item</th><th>Spécificité</th><th>Item</th><th>Spécificité</th></tr></thead><tbody><tr><td>Rayon(s) <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">catégorie</mark></td><td><s>vêtements - Femme</s></td><td>repassage <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Non</td></tr><tr><td>Marque <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Marque</mark></td><td><s>Panda Store</s></td><td>Lavage <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>30° (délicat)</td></tr><tr><td>Tailles <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">déclinaisons</mark></td><td><s>S, L, M, XL</s></td><td>Séchage machine <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Non</td></tr><tr><td>Couleur(s) <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">déclinaisons</mark></td><td><s>Noir - Camel (à créer)</s></td><td>Origine <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Chine</td></tr><tr><td>Stocks <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">déclinaisons</mark></td><td><s>10 pc de chaque taille dans les deux couleurs</s></td><td>Norme CE <mark style="background-color:rgba(0, 0, 0, 0);color:#468049" class="has-inline-color"><strong>oui</strong></mark></td><td>Oui</td></tr><tr><td>Composition <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">caractéristique</mark></td><td><s>100% coton</s></td><td>Prix d'achat <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Prix</mark><br>Marge Com mini</td><td><s>6,00 €HT<br>8,00 €HT</s></td></tr></tbody></table></figure>



<p class="callout bleu">J'ai barré les infos qui concernent les autres sections (on aurait pu garder la composition si on voulait) et indiqué <strong>à laquelle on allait les affecter <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">en bleu</mark>.</strong> Il nous reste donc 5 infos à noter :</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-140.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="606" height="282" src="https://st9ph.fr/wp-content/uploads/2026/01/image-139.png" alt="" class="wp-image-32790" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-139.png 606w, https://st9ph.fr/wp-content/uploads/2026/01/image-139-300x140.png 300w" sizes="auto, (max-width: 606px) 100vw, 606px" /></figure>



<p>ℹ️ Pour "norme CE", j'ai joué avec le nuancier qu'on obtient en cliquant sur le <span style="text-decoration: underline;"><strong>A</strong></span> souligné</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Pour l'instant, ça donne cela 👉</p>



<p class="has-base-2-background-color has-background">Vous pouvez <strong>jouer avec les outils de la barre,</strong> faire un tableau (mais c'est un peu galère) et tout ce que vous jugez utile <strong>mais ne perdez pas de temps</strong>.</p>



<p>Par contre : <strong>interdiction de mettre des headers</strong> (vous détruiriez la structure de la boutique)</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-141.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<p>🎬 L'ajout de vidéos peut aussi éviter de longues explications et doper l'envie d'ajout au panier :</p>



<figure class="wp-block-video"><video height="602" style="aspect-ratio: 1018 / 602;" width="1018" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/boucle-bambou.mp4" playsinline></video><figcaption class="wp-element-caption">🌐 url de la vidéo : https://st9ph.fr/wp-content/uploads/2026/01/boucle-bambou.mp4</figcaption></figure>



<p>👉🏻 un icone dans la barre d'outils vous permet de rechercher une vidéo <strong>dans votre médiathèque</strong> ou de faire un lien vers <strong>une vidéo extérieure</strong>.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="643" height="168" src="https://st9ph.fr/wp-content/uploads/2026/01/image-391.png" alt="" class="wp-image-36792" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-391.png 643w, https://st9ph.fr/wp-content/uploads/2026/01/image-391-300x78.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-391-640x168.png 640w" sizes="auto, (max-width: 643px) 100vw, 643px" /></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Ici, il suffit de coller l'url que vous trouverez en légende de la vidéo ci-dessus dans la zone source 👉🏻</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="382" height="300" src="https://st9ph.fr/wp-content/uploads/2026/01/image-393.png" alt="" class="wp-image-36794" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-393.png 382w, https://st9ph.fr/wp-content/uploads/2026/01/image-393-300x236.png 300w" sizes="auto, (max-width: 382px) 100vw, 382px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="454" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-392.png" alt="" class="wp-image-36793" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-392.png 454w, https://st9ph.fr/wp-content/uploads/2026/01/image-392-300x196.png 300w" sizes="auto, (max-width: 454px) 100vw, 454px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="2-13-cat%C3%A9gories-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.3 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Catégories</strong></h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>Ce sont en fait<strong> les rayons virtuels </strong>de votre Eshop et c'est à vous de dire dans lesquels vous voulez suspendre ce magnifique Sweat.</p>



<p class="has-base-2-background-color has-background">Par défaut, <strong>le nouveau produit se classe dans "Accueil"</strong>, cad qu'on le verra dans <strong>le bloc nouveautés </strong>le temps qu'il sera nouveau (et s'il est toujours activé) puis qu'il risque de disparaitre dans la masse.</p>



<ul class="wp-block-list">
<li><strong>Cocher</strong> (en plus) ☑️ <strong>Vêtements </strong>et  ☑️ <strong>Femmes</strong></li>



<li><strong>Enregistrer</strong></li>
</ul>



<p>J'ai gardé, pour ma part, dans <a href="https://boutiq.st9ph.fr/" target="_blank" rel="noreferrer noopener">la boutique d'entrainement</a>, <strong>la même architecture que sur le modèle par défaut</strong> (quand vous installez Prestashop avec les exemples de produits).</p>



<p></p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="328" height="436" src="https://st9ph.fr/wp-content/uploads/2026/01/image-142.png" alt="" class="wp-image-32794" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-142.png 328w, https://st9ph.fr/wp-content/uploads/2026/01/image-142-226x300.png 226w" sizes="auto, (max-width: 328px) 100vw, 328px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="3-14-marque-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.4 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Marque</strong></h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="248" height="237" src="https://st9ph.fr/wp-content/uploads/2026/01/image-143.png" alt="" class="wp-image-32795"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>On peut vous demander <strong>d'inscrire la marque ce produit</strong>.</p>



<ul class="wp-block-list">
<li><strong>Si elle existe déjà,</strong> il suffit de la choisir dans la liste</li>



<li><strong>Si elle n'existe pas,</strong> il faudra la créer (mais ce sera dans un autre tuto) ➡️<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_blank" rel="noreferrer noopener"> ici pour les pressés</a> (section 3-3)</li>
</ul>



<p class="has-base-2-background-color has-background">ℹ️ Vous trouverez aussi sur la page d'exemples de <a href="https://st9ph.fr/exos-prestashop/" target="_blank" rel="noreferrer noopener">produits à créer</a> <strong>tout le matériel pour créer la marque Panda Store</strong></p>



<p>👉 Prestashop génère automatiquement une page regroupant <strong>tous les produits d'une marque </strong>quand on clique sur le logo de celle-ci.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="771" height="189" src="https://st9ph.fr/wp-content/uploads/2026/01/image-144.png" alt="" class="wp-image-32796" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-144.png 771w, https://st9ph.fr/wp-content/uploads/2026/01/image-144-300x74.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-144-768x188.png 768w" sizes="auto, (max-width: 771px) 100vw, 771px" /><figcaption class="wp-element-caption">Résultat en front office</figcaption></figure>
</div>
</div>



<p class="has-base-2-background-color has-background">C'est <strong>un plus pour votre boutique </strong>et cela peut<strong> doper vos ventes sur cette marque</strong>. A terme, cela peut permettre de <strong>négocier plus fermement avec votre fournisseur</strong> si votre volume augmente.</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-145.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<h3 class="wp-block-heading" id="4-15-produits-associ%C3%A9s-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">1.5 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Produits associés</strong></h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-background-color has-background">Il s'agit de <strong>proposer un rebond de bas de page </strong>"<em>vous aimerez aussi</em>" permettant au visiteur de se "rabattre" sur <strong>des produits équivalents </strong>ci celui-là ne lui plait finalement pas tant que cela.</p>



<p>👉Etant sur le Maket st9ph, j'ai l'embarras du choix pour les produits Panda Store mais si vous êtes <strong>sur le modèle de base</strong> dans votre boutique, vous devez au moins avoir <strong>le "Pull imprimé colibri"</strong> dans le rayon femme.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-146.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-video"><video height="444" style="aspect-ratio: 404 / 444;" width="404" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-000253.mp4" playsinline></video></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<ul class="wp-block-list">
<li>🔎 <strong>Taper les 1ères lettres</strong> du produit à associer</li>



<li><strong>Sélectionner </strong>le produit <strong>dans la liste </strong>(cliquer)</li>
</ul>



<p>☑️ Le produit est associé !</p>



<ul class="wp-block-list">
<li>répéter l'opération avec les autres (éventuellement)</li>
</ul>



<p class="has-base-2-background-color has-background"><strong>Deux à quatre,</strong> c'est bien, et seulement si ils ont <strong>une vraie similitude avec le produit</strong>. Là, je tente ma chance avec les produits qui ont<strong> le même motif</strong> (sans être forcément tous des vêtements).</p>
</div>
</div>



<p>⬇️ Ca donne ça :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1007" height="584" src="https://st9ph.fr/wp-content/uploads/2026/01/image-147.png" alt="" class="wp-image-32820" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-147.png 1007w, https://st9ph.fr/wp-content/uploads/2026/01/image-147-300x174.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-147-768x445.png 768w" sizes="auto, (max-width: 1007px) 100vw, 1007px" /></figure>



<p class="has-base-2-background-color has-background">👉 Faites le syst<strong>ématiquement, même si ce n'est pas demandé</strong> dans le sujet. C'est comme l'impasse évitée en fin d'article WordPress, <strong>ça va de soi</strong>.</p>



<!-- DÉBUT TITRE CHAPITRE -->
<style>
.chapter-title { display: flex; align-items: stretch; margin: 1.7rem 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.chapter-number { background: #1e73be; color: #fff; font-weight: 700; font-size: 2.8rem; padding: 0 1.1rem; display: flex; align-items: center; justify-content: center; }
.chapter-content { padding: 1.3rem 1.5rem; width: 100%; }
.chapter-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.chapter-logo { width: 42px; height: 42px; flex-shrink: 0; display:block; }
.chapter-logo img { width: 100%; height: 100%; object-fit: contain; }
.chapter-content h2 { margin: 0; font-size: 2.1rem; font-weight: 700; color: #1e73be; }
.chapter-points { margin: 0; padding-left: 0; list-style: none; }
.chapter-points li { margin-bottom: 0.35rem; color: #444; font-size: 0.95rem; line-height: 1.45; }
.chapter-points li::before { content: "🔹 "; }
</style>

<div class="chapter-title">
  <div class="chapter-number">2</div>
  <div class="chapter-content">
    <div class="chapter-heading">
      <a class="chapter-logo" href="https://st9ph.fr" target="_blank" rel="noopener">
        <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-ico-sansTxt.png" alt="Logo">
      </a>
      <h2>l'Onglet Détails</h2>
    </div>
    <ul class="chapter-points"><li>Références</li><li>Caractéristiques</li><li>Fichiers joints</li><li>Etat du produit</li><li>Personnalisation</li></ul>
  </div>
</div>
<!-- FIN TITRE CHAPITRE -->



<p>On retrouve ici un certains nombre d'<strong>attributs du produit</strong> qui étaient dans la <strong>section option</strong> dans les versions précédentes. du CMS</p>



<h3 class="wp-block-heading" id="5-21-r%C3%A9f%C3%A9rences-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.1 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Références</strong></h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Indispensable à votre <strong>gestion de stock,</strong> la référence vous est <strong>donnée par votre fournisseur</strong> et figure <strong>sur l'étiquette de chaque produit</strong>.</p>



<p class="has-text-align-center callout bleu">ℹ️ Sur un produit déclinable, rien ne sert de l'inscrire dans la section détail puisqu'<strong>elle dépendra des déclinaisons </strong>(légèrement différente pour chacune)</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-148.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<p>Sinon, on l'aurait saisie ici  👉</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="203" height="79" src="https://st9ph.fr/wp-content/uploads/2026/01/image-149.png" alt="" class="wp-image-32826"/></figure>
</div>
</div>
</div>



<p class="callout rouge">⚠️ Attention, dans cette même zone, aux <strong>codes ISBN, GTIN et MPN</strong> qui sont normés. Vos produits ne passeront pas <strong>les douanes</strong> ou seront <strong>invendables dans certains pays </strong>s'ils ne sont pas renseignés correctement.</p>



<p>🖥️ On ne vous embêtera pas avec cela <strong>à l'épreuve technique</strong> mais pour votre véritable commerce, ce sera important. Pour ceux qui en ont besoin le site <a href="https://www.activebarcode.com/fr/codes/" target="_blank" rel="noreferrer noopener">Active Barecode </a>est très complet à ce sujet.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-2-background-color has-background">Idem pour <strong>les codes barres</strong> qui sont indispensables à votre CRM de <strong>gestion de stock</strong> et à <strong>l'encaissement </strong>en SVP.</p>



<p>ℹ️ Juste pour info, les <strong>zones de code EAN ou JAN</strong>, c'est aussi ici qu'on les renseigne. 👉</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="415" height="160" src="https://st9ph.fr/wp-content/uploads/2026/01/image-150.png" alt="" class="wp-image-32828" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-150.png 415w, https://st9ph.fr/wp-content/uploads/2026/01/image-150-300x116.png 300w" sizes="auto, (max-width: 415px) 100vw, 415px" /></figure>
</div>
</div>



<h3 class="wp-block-heading" id="6-22-caract%C3%A9ristiques-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.2 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Caractéristiques</strong></h3>



<p>C'est ici qu'on peut mettre en valeur certaines spécificités de notre produit. Ca donnera cela dans la section "fiche technique". 👇</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="771" height="127" src="https://st9ph.fr/wp-content/uploads/2026/01/image-152.png" alt="" class="wp-image-32832" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-152.png 771w, https://st9ph.fr/wp-content/uploads/2026/01/image-152-300x49.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-152-768x127.png 768w" sizes="auto, (max-width: 771px) 100vw, 771px" /></figure>



<ul class="wp-block-list">
<li>Cliquez sur <strong>la liste déroulante</strong> des <strong>caractéristiques</strong></li>



<li>Recherchez la valeur "<strong>composition</strong>" et "<strong>cliquez</strong>" dessus</li>



<li>Cliquez sur <strong>la liste déroulante</strong> des <strong>valeurs</strong> de caractéristiques (juste à côté)</li>



<li>Recherchez la valeur "<strong>coton</strong>" et <strong>cliquez </strong>dessus</li>
</ul>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-151.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<ul class="wp-block-list">
<li>cilquez sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="239" height="53" src="https://st9ph.fr/wp-content/uploads/2026/01/image-153.png" alt="" class="wp-image-32833"/></figure>



<p class="has-text-align-center has-base-2-background-color has-background">⚠️ <strong>On oublie souvent cette dernière étape </strong> et on se retrouve à avoir fait la manipulation pour rien !</p>
</div>
</div>



<p>👀 <strong>Vérifiez</strong> juste en dessous que la caractéristique a bien été<strong> prise en compte</strong> :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="873" height="103" src="https://st9ph.fr/wp-content/uploads/2026/01/image-154.png" alt="" class="wp-image-32834" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-154.png 873w, https://st9ph.fr/wp-content/uploads/2026/01/image-154-300x35.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-154-768x91.png 768w" sizes="auto, (max-width: 873px) 100vw, 873px" /></figure>



<p>C'était<strong> le cas le plus simple </strong>mais il peut arriver que vous ayez besoin  :</p>



<ul class="wp-block-list">
<li>d'une <strong>valeur </strong>qui n'existe pas (dans le sujet, par exemple,  on demande "100 % coton")</li>



<li>d'une <strong>caractéristique </strong>qui n'existe pas</li>
</ul>



<p class="has-medium-font-size">🔵 Saisir une valeur personnalisée</p>



<p>Cest un choix dans la zone valeur comme sur la démo animée ci-dessous :</p>



<figure class="wp-block-video"><video height="284" style="aspect-ratio: 1128 / 284;" width="1128" controls src="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-104641.mp4"></video></figure>



<p></p>



<p class="has-medium-font-size">🔵 Saisir une nouvelle caractéristique</p>



<p><strong>On les confond souvent avec des attributs </strong>(de déclinaisons). <strong>Petit rappel</strong> :</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-contrast-2-color has-text-color has-link-color wp-elements-b7a415e3122db67a9f821d2bfb6add7b">➡️ Une <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">caractéristique</mark></strong> définit <strong>l'ensemble du produit,</strong> quelles que soient les variantes qu'il comporte.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="446" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-155.png" alt="" class="wp-image-32836" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-155.png 446w, https://st9ph.fr/wp-content/uploads/2026/01/image-155-300x199.png 300w" sizes="auto, (max-width: 446px) 100vw, 446px" /></figure>



<p class="has-text-align-center has-base-2-background-color has-background">Cette chaussure est en cuir, <strong>quelle que soit la pointure choisie</strong>.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>➡️ Un <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">attribut </mark></strong>est <strong>une variante, une déclinaison</strong> d'un même produit (taille, couleur ...)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="442" height="259" src="https://st9ph.fr/wp-content/uploads/2026/01/image-156.png" alt="" class="wp-image-32837" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-156.png 442w, https://st9ph.fr/wp-content/uploads/2026/01/image-156-300x176.png 300w" sizes="auto, (max-width: 442px) 100vw, 442px" /></figure>



<p class="has-text-align-center has-base-2-background-color has-background"><strong>La couleur </strong>de cette même chaussure <strong>est variable</strong>, c'est donc <strong>un attribut de déclinaison</strong></p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👉 C'est dans <strong>Catalogue </strong>&gt; <strong>Attributs et caractéristiques</strong> &gt; onglet <strong>Caractéristiques </strong>que cela ce passe.</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="556" height="149" src="https://st9ph.fr/wp-content/uploads/2026/01/image-157.png" alt="" class="wp-image-32844" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-157.png 556w, https://st9ph.fr/wp-content/uploads/2026/01/image-157-300x80.png 300w" sizes="auto, (max-width: 556px) 100vw, 556px" /></figure>
</div>
</div>



<p>Imaginons que nous voulions créer une caractéristique "<strong>forme</strong>" pour informer du type de Sweat que nous vendons.</p>



<p class="has-base-2-background-color has-background">😒 Bon, c'est vrai que <strong>ça se voit sur les photos </strong>mais je manque d'inspiration ! A part la compo, je ne vois pas trop ce qu'un vêtement de ce genre peut avoir comme spécificité remarquable. Ca m'apprendra à mieux choisir mes exemples !</p>



<p>🕸️ J'ai <strong>fouillé un peu sur la toile </strong>pour voir, et si on rentre dans cette considération, on voit qu<strong>'il y'a le choix</strong> (et je ne les ai pas toutes mises en illustration) !</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-159.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<p>👉 On ne va  pas les faire toutes, gardons juste "Mock" (celle qui nous intéresse), "Square" et "Crowl"</p>



<p class="has-base-2-background-color has-background">🖇️On mettra tout à l'heure <strong>toutes les autres </strong>dans un "<strong>guide des formes</strong>" qu'on <strong>joindra en pdf</strong> au produit.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="278" height="33" src="https://st9ph.fr/wp-content/uploads/2026/01/image-158.png" alt="" class="wp-image-32845"/></figure>
</div>



<ul class="wp-block-list">
<li>Indiquer "<strong>Forme</strong>" dans les zones<strong> Nom et Titre</strong></li>



<li>Cliquer sur <strong>Enregistrer</strong></li>
</ul>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="277" height="63" src="https://st9ph.fr/wp-content/uploads/2026/01/image-160.png" alt="" class="wp-image-32848"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>ℹ️ La Zone <strong>URL </strong>et le<strong> bouton radio d'indexation</strong> est spécifique au filtre du <strong>module navigation à facettes </strong>(pas au programme).</p>
</div>
</div>



<p class="has-base-2-background-color has-background">Juste pour les curieux, c'est un moyen d<strong>'améliorer l'url en la rendant différente selon les options </strong>choisies pour le produit. C'est <strong>utile pour les déclinaisons </strong>(meilleur suivi en stats) mais <strong>je ne vois pas l'intérêt pour les caractéristiques</strong>, vu que l<strong>e produit a toujours les mêmes</strong>. Mais il y'en a surement un puisque l'option existe.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Ajoutons </strong>maintenant<strong> des valeurs</strong> :</p>



<ul class="wp-block-list">
<li>Cliquez sur "<strong>Formes</strong>"</li>
</ul>



<p class="has-base-2-background-color has-background">Vous devriez voir <strong>une nouvelle caractéristique</strong> "forme" dans la liste. <em>Elles sont par ordre alphabétique</em>. 👉</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="474" height="275" src="https://st9ph.fr/wp-content/uploads/2026/01/image-161.png" alt="" class="wp-image-32849" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-161.png 474w, https://st9ph.fr/wp-content/uploads/2026/01/image-161-300x174.png 300w" sizes="auto, (max-width: 474px) 100vw, 474px" /></figure>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="217" height="31" src="https://st9ph.fr/wp-content/uploads/2026/01/image-162.png" alt="" class="wp-image-32850"/></figure>
</div>



<p></p>



<ul class="wp-block-list">
<li>Dans la zone <strong>Valeur</strong>, tapez "<strong>Mock</strong>"</li>
</ul>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="298" height="29" src="https://st9ph.fr/wp-content/uploads/2026/01/image-163.png" alt="" class="wp-image-32852"/></figure>
</div>



<p>➰ <strong>répéter l'opératio</strong>n pour ""<strong>Square</strong>" et "<strong>Crowl</strong>" (sauf que pour le dernier, ce sera seulement "<strong>Enregistrer</strong>")</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="378" height="196" src="https://st9ph.fr/wp-content/uploads/2026/01/image-164.png" alt="" class="wp-image-32853" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-164.png 378w, https://st9ph.fr/wp-content/uploads/2026/01/image-164-300x156.png 300w" sizes="auto, (max-width: 378px) 100vw, 378px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p> 👈 Le résultat si tout c'est bien passé</p>



<p><strong>Retournons </strong>maintenant <strong>à notre fiche produit</strong> pour l'appliquer :</p>



<ul class="wp-block-list">
<li>Catalogue &gt; produit &gt; Magnifique Sweat Panda &gt; <strong>onglet Détails</strong></li>
</ul>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p class="has-text-align-right has-base-2-background-color has-background">Notre caractéristique est présente et <strong>en déroulant la liste des valeurs,</strong> on peut choisir la forme souhaitée.👉</p>



<ul class="wp-block-list">
<li>Cliquez sur "<strong>Mock</strong>"</li>



<li>Cliquez sur "<strong>Ajouter la caractéristique</strong>"</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-165.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<h3 class="wp-block-heading" id="7-23-fichiers-joints-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.3 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Fichiers joints</strong></h3>



<p>🖇️ Très utile pour<strong> les notices de montage</strong> ou de prise en main, <strong>les catalogues "hors ligne" </strong>et <strong>les certificats</strong>, la pièce jointe, <strong>téléchargeable sans avoir besoin de commander le produit</strong> peut constituer aussi un élément de <strong>levée de doute,</strong> une <strong>valeur ajoutée</strong> à votre produit.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p class="has-base-2-background-color has-background">il sera <strong>obligatoirement au format "PDF" </strong>(Portable Document Format") car celui lui assurera<strong> la garantie de pouvoir être ouvert par n'importe quel OS</strong> (Windows, OS X, IOS, Androïd, Linux ...) puis qu'<strong>il est universel</strong>.</p>
</div>
</div>



<p>👉 Nous allons, pour notre part, joindre un PDF du "guide des formes" pour aider nos clients à comprendre ce que le terme "Mock" présent sur notre fiche produit signifie.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li><strong>Téléchargez </strong>le guide</li>
</ul>



<div data-wp-interactive="core/file" class="wp-block-file"><object data-wp-bind--hidden="!state.hasPdfPreview" hidden class="wp-block-file__embed" data="https://st9ph.fr/wp-content/uploads/2026/01/guide-des-formes2.pdf" type="application/pdf" style="width:100%;height:200px" aria-label="Contenu embarqué guide-des-formes2."></object><a id="wp-block-file--media-c1c33b4c-2a7c-499a-8a97-b6950361e580" href="https://st9ph.fr/wp-content/uploads/2026/01/guide-des-formes2.pdf">guide-des-formes2</a><a href="https://st9ph.fr/wp-content/uploads/2026/01/guide-des-formes2.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-c1c33b4c-2a7c-499a-8a97-b6950361e580">Télécharger</a></div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="182" height="44" src="https://st9ph.fr/wp-content/uploads/2026/01/image-166.png" alt="" class="wp-image-32857"/></figure>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<ul class="wp-block-list">
<li>renseignez <strong>un nom de fichier</strong> (c'est ce que lira le client)</li>



<li>Entrez éventuellement<strong> une description</strong></li>



<li>Cliquez sur <strong>Parcourir</strong> pour <strong>rechercher le PDF</strong> (que vous aurez préalablement pris le soin de dézipper)</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="590" height="319" src="https://st9ph.fr/wp-content/uploads/2026/01/image-167.png" alt="" class="wp-image-32858" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-167.png 590w, https://st9ph.fr/wp-content/uploads/2026/01/image-167-300x162.png 300w" sizes="auto, (max-width: 590px) 100vw, 590px" /></figure>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="88" height="30" src="https://st9ph.fr/wp-content/uploads/2026/01/image-168.png" alt="" class="wp-image-32859"/></figure>
</div>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="866" height="83" src="https://st9ph.fr/wp-content/uploads/2026/01/image-169.png" alt="" class="wp-image-32860" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-169.png 866w, https://st9ph.fr/wp-content/uploads/2026/01/image-169-300x29.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-169-768x74.png 768w" sizes="auto, (max-width: 866px) 100vw, 866px" /></figure>
</div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p><strong>En front Office</strong> : vous verrez apparaitre <strong>une section "téléchargement"</strong> sous la fiche technique.</p>



<p class="has-base-2-background-color has-background">Vous pouvez également <strong>fournir un lien dans le descriptif</strong> si vous le souhaitez, ou <strong>indiquer qu'il figure dans la zone "téléchargement"</strong>.</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="282" height="203" src="https://st9ph.fr/wp-content/uploads/2026/01/image-170.png" alt="" class="wp-image-32861"/></figure>
</div>
</div>



<h3 class="wp-block-heading" id="8-24-etat-du-produit-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.4 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Etat du produit</strong></h3>



<p>Vous pouvez choisir entre trois états : Neuf (par défaut) - Reconditionné et Utilisé.</p>



<p>C'est <strong>assez décevant</strong>, en fait, pour deux raisons :</p>



<ol class="wp-block-list">
<li>cela <strong>n'apparait que dans la zone "détail du produit" </strong>et cela n'empêche pas <strong>le sticker "neuf</strong>" de s'afficher sur la vignette du produit ! Prestashop confond "nouveauté" (de la boutique" et "Neuf").<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_blank" rel="noreferrer noopener"> Cet article traite de ce sujet </a>(chapitre 3).</li>



<li>"<strong>Utilisé</strong>" sonne bizarre (on devrait dire "<strong>occasion</strong>"). Voyez aussi le lien précédent pour voir <strong>comment modifier les intitulés du modèle</strong>.</li>
</ol>



<p>Bon, tout cela <strong>n'est pas au programme de l'examen</strong> mais sachez que :</p>



<ul class="wp-block-list">
<li>Un <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">produit reconditionné</mark></strong> a été <strong>vérifié par le vendeur</strong>. Il est généralement <strong>accompagné d'une garantie</strong>. </li>



<li>Le<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"> <strong>produit d'occasion</strong></mark><strong>,</strong> lui, est <strong>vendu "dans l'état"</strong>, même si l<strong>e commerçant engage sa responsabilité</strong> s'il n'est pas sincère sur l'état réel du produit.</li>
</ul>



<div>
<h3 class="wp-block-heading" id="9-25-personnalisation-" style="font-size:28px">🔹<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">2.5 |</mark></strong><img loading="lazy" decoding="async" width="25" height="30" class="wp-image-34820" style="width: 25px;" src="https://st9ph.fr/wp-content/uploads/2026/02/st9ph-mini.jpg" alt=""><strong>Personnalisation</strong></h3>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="384" height="401" src="https://st9ph.fr/wp-content/uploads/2026/01/image-171.png" alt="" class="wp-image-32862" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-171.png 384w, https://st9ph.fr/wp-content/uploads/2026/01/image-171-287x300.png 287w" sizes="auto, (max-width: 384px) 100vw, 384px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center">Imaginons que nous vendons <strong>un produit personnalisable </strong>comme le T-Shirt de la photo. </p>



<p class="has-text-align-center has-base-2-background-color has-background">C'est ici que cela se passe pour que le client <strong>nous indique quel prénom il veut dessus</strong> (ou autre chose: "Papa", "Papy Louis" ..., ce qu'on veut.</p>



<ul class="wp-block-list">
<li>Cliquer sur "<strong>ajouter un champ de personnalisation</strong>"</li>



<li>Choisissez entre "<strong>Texte</strong>" et "<strong>Fichier</strong>" (si vous voulez leur donner la possibilité d'insérer une image à la place d'un texte.)</li>
</ul>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="766" height="131" src="https://st9ph.fr/wp-content/uploads/2026/01/image-172.png" alt="" class="wp-image-32863" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-172.png 766w, https://st9ph.fr/wp-content/uploads/2026/01/image-172-300x51.png 300w" sizes="auto, (max-width: 766px) 100vw, 766px" /></figure>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Renseignez <strong>l'étiquette</strong> que vous souhaitez , ici "<strong><em>Votre prénom :</em></strong>"</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">Elle permet de faire comprendre au client qui commande que c'est là qu'il doit l'écrire) comme sur cet aperçu  en front office : 👉</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="523" height="314" src="https://st9ph.fr/wp-content/uploads/2026/01/image-173.png" alt="" class="wp-image-32864" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-173.png 523w, https://st9ph.fr/wp-content/uploads/2026/01/image-173-300x180.png 300w" sizes="auto, (max-width: 523px) 100vw, 523px" /></figure>
</div>
</div>



<p>La personnalisation aura <strong>une incidence sur les délais de livraison habituelle</strong> de nos transporteurs. <strong>Pensez à le préciser</strong>.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="544" height="266" src="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png" alt="" class="wp-image-32866" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png 544w, https://st9ph.fr/wp-content/uploads/2026/01/image-174-300x147.png 300w" sizes="auto, (max-width: 544px) 100vw, 544px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>rendez vous dans <strong>l'onglet "livraison"</strong></li>



<li>Cliquez sur "<strong>délai spécifique pour ce produit</strong>"</li>



<li><strong>renseignez le délai </strong>que vous garantissez.</li>
</ul>



<p></p>



<p class="has-text-align-center has-base-2-background-color has-background">😒 Vous allez <strong>engendrer du mécontentement</strong> si vous omettez cette précision !</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Pensez bien aussi à choisir au moins "<strong>My Career</strong>" (pour l'examen) mais<strong> le mieux et de les cochez tous </strong>(ou d'utliser le bouton "tous les transporteurs"</li>
</ul>



<p></p>



<p>On obtiendra <strong>ce résultat dans le tunnel d'achat </strong>(mais précisez le quand même dans le Summary /  Récapitulatif pour éviter les déceptions (et, donc, les abandons de panier). 👇</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="583" height="243" src="https://st9ph.fr/wp-content/uploads/2026/01/image-175.png" alt="" class="wp-image-32868" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-175.png 583w, https://st9ph.fr/wp-content/uploads/2026/01/image-175-300x125.png 300w" sizes="auto, (max-width: 583px) 100vw, 583px" /></figure>
</div>
</div>



<p>Dès <strong>le bouton ajout au panier</strong> :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="573" height="116" src="https://st9ph.fr/wp-content/uploads/2026/01/image-177.png" alt="" class="wp-image-32870" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-177.png 573w, https://st9ph.fr/wp-content/uploads/2026/01/image-177-300x61.png 300w" sizes="auto, (max-width: 573px) 100vw, 573px" /></figure>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-3282d99eaaa85ef2eb18c9b0ff69fd77" id="10-3%EF%B8%8F%E2%83%A3-d%C3%A9clinaisons">3️⃣| Déclinaisons</h2>


<div class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-d0bed57b-3d6d-4b01-8ade-df47b08d04d8" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title" style=""></div>
				
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#0-11-l-es-visuels-du-produit-" style="">🔹1.1 |les visuels du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#1-12-r%C3%A9capitulatif-amp-description-" style="">🔹1.2 |Récapitulatif &amp; Description</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#2-13-cat%C3%A9gories-" style="">🔹1.3 |Catégories</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#3-14-marque-" style="">🔹1.4 |Marque</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#4-15-produits-associ%C3%A9s-" style="">🔹1.5 |Produits associés</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#5-21-r%C3%A9f%C3%A9rences-" style="">🔹2.1 |Références</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#6-22-caract%C3%A9ristiques-" style="">🔹2.2 |Caractéristiques</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#7-23-fichiers-joints-" style="">🔹2.3 |Fichiers joints</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#8-24-etat-du-produit-" style="">🔹2.4 |Etat du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#9-25-personnalisation-" style="">🔹2.5 |Personnalisation</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#11-3-1-cr%C3%A9er-une-valeur-ou-tout-un-attribut-de-d%C3%A9clinaison-" style="">3-1 | créer une valeur ou tout un attribut de déclinaison</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#12-3-2-g%C3%A9n%C3%A9rer-et-param%C3%A9trer-les-d%C3%A9clinaison-s" style="">3-2 | Générer et paramétrer les déclinaisons</a></li></ul>
			</div>
		</div></div>


<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<p>Un produit déclinable, c'est :</p>



<ul class="wp-block-list">
<li><strong>des visuels à répartir</strong> selon les déclinaisons</li>



<li>des<strong> références spécifiques pour chaque</strong> déclinaison</li>



<li>Des<strong> stocks à définir </strong>pour chaque déclinaison</li>



<li>parfois <strong>des attributs</strong> de valeurs et / ou des déclinaisons <strong>à créer</strong></li>



<li>Parfois <strong>des impacts sur le prix</strong> (ceux à options ou de plus grand gabarit étant forcément<strong> plus onéreux</strong>)</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">On a de la chance pour ce produit, on a juste les <strong>visuels</strong> à répartir, les <strong>stocks</strong>, les <strong>références </strong>et la <strong>couleur </strong>Camel<strong> à créer </strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="512" height="527" src="https://st9ph.fr/wp-content/uploads/2026/01/image-178.png" alt="" class="wp-image-32872" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-178.png 512w, https://st9ph.fr/wp-content/uploads/2026/01/image-178-291x300.png 291w" sizes="auto, (max-width: 512px) 100vw, 512px" /></figure>



<p>👉 On a même <strong>une image </strong>qui sera <strong>dans les deux couleurs</strong>, celles avec les deux jeunes femmes.</p>
</div>
</div>



<p>➡️ Commençons par <strong>créer la valeur de couleur </strong>qui nous manque</p>



<h3 class="wp-block-heading" id="11-3-1-cr%C3%A9er-une-valeur-ou-tout-un-attribut-de-d%C3%A9clinaison-">3-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">créer une valeur ou tout un attribut de déclinaison</mark></h3>



<p class="has-medium-font-size">🔵 Une valeur dans un attribut déjà existant</p>



<ul class="wp-block-list">
<li>Catalogue &gt;<strong> Attributs et caractéristiques </strong></li>
</ul>



<p>👉 (restez sur l'onglet "<strong>Attributs</strong>") </p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li> cliquez sur <strong>Couleurs </strong>&gt;</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="157" height="29" src="https://st9ph.fr/wp-content/uploads/2026/01/image-180.png" alt="" class="wp-image-32876" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-180.png 157w, https://st9ph.fr/wp-content/uploads/2026/01/image-180-150x29.png 150w" sizes="auto, (max-width: 157px) 100vw, 157px" /></figure>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-181.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Donnez un nom à votre nouvelle couleur (pour nous "Camel")</li>



<li>Cliquez sur le symbole couleur pour obtenir le nuancier</li>



<li>définissez votre couleur</li>
</ul>



<p></p>



<p class="has-base-2-background-color has-background">Pour nous, c'est une sorte de marron. Mais "Camel", ça fait mieux. Si vous n'êtes pas inspiré(e), vous pouvez<strong> jouer sur la gamme chromatique RGB</strong> (Red, Green, Blue) et faire comme moi<strong> (193, 154, 107)</strong> <strong>en tapant</strong> directement <strong>les valeurs dans les cases</strong>.</p>



<p></p>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="88" height="30" src="https://st9ph.fr/wp-content/uploads/2026/01/image-168.png" alt="" class="wp-image-32859"/></figure>
</div>



<p class="has-medium-font-size">🔵 un attribut de déclinaison</p>



<p>On peut aussi être amené à <strong>créer un nouvel attribut</strong></p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Attributs et Caractéristiques &gt; (onglet)<strong> attributs</strong></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="202" height="26" src="https://st9ph.fr/wp-content/uploads/2026/01/image-182.png" alt="" class="wp-image-32880"/></figure>
</div>



<p>Il y'a t<strong>rois types d'attributs</strong> :</p>



<ul class="wp-block-list">
<li>les<strong> listes déroulantes</strong> (pour des valeurs nombreuses comme nos tailles)</li>



<li>les<strong> images ou textures </strong>(pour les couleurs ou les valeurs qu'il est plus facile de visualiser que de décrire)</li>



<li>Le<strong> bouton radio </strong>(dit aussi bouléen : oui / non, avec / sans, portrait / paysage ...)</li>
</ul>


<div class="ub-styled-box ub-number-box wp-block-ub-styled-box" id="ub-styled-box-1e086111-43da-445d-9278-99e504a23ce8">
<div class="ub-number-panel" style="border-color: #000000; " id="ub-styled-box-numbered-box-column-5b330180-fdbd-4fb9-b092-db932bd31e99">
			<div class="ub-number-container" style="background-color: #adcbe6; ">
				<p class="ub-number-display" style="color: #000000; ">1</p>
			</div>
			<p class="ub-number-box-title" style="text-align: center; ">listes déroulantes</p>
			<div class="ub-number-box-body" style="text-align: left; ">

<p class="has-text-align-center">pour des <strong>valeurs nombreuses </strong>(comme nos tailles ou des pointures)</p>



<figure class="wp-block-video"><video height="278" style="aspect-ratio: 474 / 278" width="474" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/liste.mp4" playsinline></video></figure>

</div>
		</div>

<div class="ub-number-panel" style="border-color: #000000; " id="ub-styled-box-numbered-box-column-37e55bba-c7c4-44ee-86b4-14227aaf24ff">
			<div class="ub-number-container" style="background-color: #adcbe6; ">
				<p class="ub-number-display" style="color: #000000; ">2</p>
			</div>
			<p class="ub-number-box-title" style="text-align: center; ">Couleurs ou textures</p>
			<div class="ub-number-box-body" style="text-align: left; ">

<p class="has-text-align-center">pour <strong>les couleurs </strong>ou les valeurs <strong>qu'il est plus facile de visualiser</strong> que de décrire</p>



<figure class="wp-block-video"><video height="90" style="aspect-ratio: 182 / 90" width="182" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/couleurs.mp4" playsinline></video></figure>

</div>
		</div>

<div class="ub-number-panel" style="border-color: #000000; " id="ub-styled-box-numbered-box-column-20e5a8d8-3154-4de4-8a5a-66fa4bf991ed">
			<div class="ub-number-container" style="background-color: #adcbe6; ">
				<p class="ub-number-display" style="color: #000000; ">3</p>
			</div>
			<p class="ub-number-box-title" style="text-align: center; ">Bouton radio</p>
			<div class="ub-number-box-body" style="text-align: left; ">

<p class="has-text-align-center">dit aussi bouléen quand c'est <strong>l'un ou l'autre </strong> : oui / non, avec / sans, portrait / paysage ...</p>



<figure class="wp-block-video"><video height="76" style="aspect-ratio: 262 / 76" width="262" autoplay loop muted src="https://st9ph.fr/wp-content/uploads/2026/01/radioBouton.mp4" playsinline></video></figure>

</div>
		</div>
</div>


<p>🔵 Cas des textures dans une déclinaison "Couleurs et textures"</p>



<p>Il faudra prévoir des <strong>images petites</strong>, telles des icones (<strong>idéalement, 150 x 150 pixels</strong>)</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-186-1024x250.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<p>🖥️ Vous avez <strong>2 exemples</strong><a href="https://st9ph.fr/exos-prestashop/" target="_blank" rel="noreferrer noopener"> sur la page des exercices</a> : le <strong>pull marin homme</strong> et le <strong>cadre Panda</strong></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="567" height="116" src="https://st9ph.fr/wp-content/uploads/2026/01/image-187.png" alt="" class="wp-image-32888" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-187.png 567w, https://st9ph.fr/wp-content/uploads/2026/01/image-187-300x61.png 300w" sizes="auto, (max-width: 567px) 100vw, 567px" /></figure>



<p class="has-medium-font-size">👇🏻 Voir ces produits finis dans la boutique pédagogique :</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/30-82-pull-marin-homme.html#/1-taille-s/44-rayures-banc_bleu" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/60-product_main/pull-marin-homme.jpg" alt="Pull marin homme" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">Pull marin homme</h3>
        <div class="ps-product-price">24,50 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<style>
.ps-product-card { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; width: 100%; max-width: 300px; margin: 20px auto; font-family: 'Segoe UI', sans-serif; transition: box-shadow 0.3s ease; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.ps-product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ps-product-image-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: #f5f5f5; }
.ps-product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ps-product-card:hover .ps-product-image { transform: scale(1.05); }
.ps-wishlist-icon { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ps-wishlist-icon svg { width: 20px; height: 20px; fill: #7a7a7a; transition: fill 0.2s; }
.ps-wishlist-icon:hover { background: #fff; transform: scale(1.1); }
.ps-wishlist-icon:hover svg { fill: #ff4848; }
.ps-product-rating { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 2; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 20px; }
.ps-star { color: #ffd700; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ps-product-content { padding: 15px; text-align: center; background: #fff; }
.ps-product-name { font-size: 15px; color: #333; margin: 0 0 10px 0; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 42px; }
.ps-product-price { font-size: 18px; font-weight: 700; color: #25B9D7; margin: 0 0 15px 0; }
.ps-product-btn { background-color: #25B9D7; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; text-decoration: none; box-sizing: border-box; }
.ps-product-btn:hover { background-color: #1fa3c0; color: #fff; }
.ps-product-btn svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 768px) { .ps-product-card { max-width: 100%; } }
</style>
<!-- DÉBUT VIGNETTE PRODUIT -->
<a href="https://boutiq.st9ph.fr/29-74-cadre-panda.html#/42-cadre-bois" target="_blank" class="ps-product-card">
    <div class="ps-product-image-wrapper">
        <img decoding="async" src="https://boutiq.st9ph.fr/59-product_main/cadre-panda.jpg" alt="Cadre Panda" class="ps-product-image">
        <div class="ps-wishlist-icon" title="Ajouter aux favoris" onclick="event.preventDefault(); event.stopPropagation(); alert('Fonctionnalité liste d\'envie à connecter.');">
            <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </div>
        <div class="ps-product-rating">
            <span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span><span class="ps-star">★</span>
        </div>
    </div>
    <div class="ps-product-content">
        <h3 class="ps-product-name">Cadre Panda</h3>
        <div class="ps-product-price">9,50 €</div>
        <div class="ps-product-btn">
            Voir dans la boutique
            <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </div>
    </div>
</a>
<!-- FIN VIGNETTE PRODUIT -->
</div>
</div>



<p>➡️ Nous allons pouvoir maintenant <strong>générer nos déclinaisons</strong></p>



<h3 class="wp-block-heading" id="12-3-2-g%C3%A9n%C3%A9rer-et-param%C3%A9trer-les-d%C3%A9clinaison-s">3-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Générer et paramétrer les déclinaison</mark>s</h3>



<p><strong>Il nous en faut 8</strong> en fait (2 couleurs x 4 tailles)</p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-179.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<p>Sur le schéma ci-dessus, j'ai défini <strong>une référence qui varie d'une lettre</strong> à chaque déclinaison <strong>(la taille + l'initiale de la couleur</strong>) et j'ai relié les images à chaque déclinaison pour ne pas en oublier. C'est mon pense-bête !</p>



<p class="has-base-2-background-color has-background">ℹ️ Dans la réalité, on recopiera juste <strong>celles données par le fournisseur</strong> mais lors de l'épreuve, ce sera <strong>à vous d'en inventer</strong>.</p>



<p class="has-medium-font-size">🔵Générer les déclinaisons</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="158" height="35" src="https://st9ph.fr/wp-content/uploads/2026/01/image-188.png" alt="" class="wp-image-32891"/></figure>
</div>



<ul class="wp-block-list">
<li>Générer les déclinaisons en choisissant à la fois<strong> les attributs de couleurs </strong>et <strong>de taille</strong> comme dans la vidéo ci-dessous :</li>
</ul>



<figure class="wp-block-video"><video height="622" style="aspect-ratio: 918 / 622;" width="918" controls src="https://st9ph.fr/wp-content/uploads/2026/01/decli.mp4"></video></figure>



<p>Pour l'instant, <strong>toutes s'affichent avec la même vignette Camel</strong> mais, pas de panique, on va arranger cela :</p>



<p class="has-medium-font-size">🔵Paramétrer les déclinaisons</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>Cliquez sur <strong>la case à cocher </strong>à côté de (8/8) pour <strong>sélectionner toutes les déclinaisons</strong></li>



<li>Cliquez sur "<strong>actions groupées</strong>" ("bulk actions" sur mon aperçu, mon CMS est en anglais)</li>



<li>Choisissez "<strong>modifier 8 déclinaisons"</strong></li>
</ul>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-189.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<p>Vous arrivez sur un panneau où vous allez pouvoir faire des réglages directement sur les 8 :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="831" height="460" src="https://st9ph.fr/wp-content/uploads/2026/01/image-190.png" alt="" class="wp-image-32893" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-190.png 831w, https://st9ph.fr/wp-content/uploads/2026/01/image-190-300x166.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-190-768x425.png 768w" sizes="auto, (max-width: 831px) 100vw, 831px" /></figure>



<ul class="wp-block-list">
<li>Cliquez sur <strong>Stocks</strong></li>



<li>Activez le bouton radio des "<strong>Modifier la quantité</strong>"</li>



<li>Saisir "<strong>10</strong>" (ou utiliser le sélecteur mais c'est plus long)</li>



<li>👀 Contrôlez l'affichage  0 -&gt; <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">10</mark></li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="829" height="149" src="https://st9ph.fr/wp-content/uploads/2026/01/image-191.png" alt="" class="wp-image-32894" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-191.png 829w, https://st9ph.fr/wp-content/uploads/2026/01/image-191-300x54.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-191-768x138.png 768w" sizes="auto, (max-width: 829px) 100vw, 829px" /></figure>



<ul class="wp-block-list">
<li>Cliquer sur <strong>"Appliquer à 8 déclinaisons</strong>"</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="801" height="228" src="https://st9ph.fr/wp-content/uploads/2026/01/image-192.png" alt="" class="wp-image-32895" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-192.png 801w, https://st9ph.fr/wp-content/uploads/2026/01/image-192-300x85.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-192-768x219.png 768w" sizes="auto, (max-width: 801px) 100vw, 801px" /></figure>



<ul class="wp-block-list">
<li>Cliquer sur <strong>"Fermer</strong>"</li>
</ul>



<p>Pour les images, on va faire pareil mais en deux temps :</p>



<ul class="wp-block-list">
<li>Cliquez sur la<strong> case à cocher </strong>à côté des<strong> 4 déclinaisons Camel</strong> (une sur deux)</li>



<li>Cliquez sur "<strong>actions groupées</strong>" </li>



<li>Choisissez "<strong>modifier 4 déclinaisons</strong>"</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="822" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-193.png" alt="" class="wp-image-32896" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-193.png 822w, https://st9ph.fr/wp-content/uploads/2026/01/image-193-300x108.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-193-768x277.png 768w" sizes="auto, (max-width: 822px) 100vw, 822px" /></figure>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="213" height="30" src="https://st9ph.fr/wp-content/uploads/2026/01/image-194.png" alt="" class="wp-image-32897"/></figure>
</div>



<ul class="wp-block-list">
<li><strong>Renouveler l'opération avec les 4 noires</strong></li>
</ul>



<p>👉 Le résultat est maintenant <strong>plus visuel</strong></p>



<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-196.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->



<ul class="wp-block-list">
<li><strong>Modifiez les références</strong> selon votre souhait (pour moi SWPANDA + Taille + initiale couleur)</li>
</ul>



<p class="has-base-2-background-color has-background">👀 Vous avez du remarquer la zone <strong>"impact sur le prix</strong>". C'est là que vous allez<strong> entrer la différence</strong> de prix  (<mark style="background-color:rgba(0, 0, 0, 0);color:#b52828" class="has-inline-color">et non pas le nouveau prix</mark>) <strong>en Hors Taxes</strong>, de <strong>certaines déclinaisons</strong> (avec ou sons tiroir, plaqué or ou or massif ...) <strong>par rapport aux autres</strong>.</p>



<p><strong>Notre produit actuel n'en a pas besoin</strong>, toutes les déclinaisons seront au même prix, quelles que soient la taille et la couleur du Sweat</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong>Notre fiche produit</strong> commence à prendre forme !</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="490" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/image-200.png" alt="" class="wp-image-32903" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-200.png 490w, https://st9ph.fr/wp-content/uploads/2026/01/image-200-300x300.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-200-150x150.png 150w" sizes="auto, (max-width: 490px) 100vw, 490px" /></figure>



<p class="has-text-align-center">La voir sur votre mobile en <strong>flashant le QR </strong>code ou <a href="https://boutiq.st9ph.fr/32-90-magnifique-sweat-panda.html#/1-taille-s/12-couleur-camel" target="_blank" rel="noreferrer noopener">dans un nouvel onglet</a></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-197.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>On voit <strong>le sélecteur de tailles </strong>dans la fiche produit (et pas sur la vignette d'aperçu)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="479" height="167" src="https://st9ph.fr/wp-content/uploads/2026/01/image-198.png" alt="" class="wp-image-32901" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-198.png 479w, https://st9ph.fr/wp-content/uploads/2026/01/image-198-300x105.png 300w" sizes="auto, (max-width: 479px) 100vw, 479px" /></figure>



<p>On voit aussi les que <strong>les images</strong> ont bien été filtrées :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="409" height="155" src="https://st9ph.fr/wp-content/uploads/2026/01/image-199.png" alt="" class="wp-image-32902" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-199.png 409w, https://st9ph.fr/wp-content/uploads/2026/01/image-199-300x114.png 300w" sizes="auto, (max-width: 409px) 100vw, 409px" /></figure>
</div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-f4678328e511a1a50ed46db4b2c5f28e" id="13-4%EF%B8%8F%E2%83%A3-livraison">4️⃣| Livraison</h2>



<p>C'est ici qu'on peut paramétrer les <strong>conditions d'expédition</strong>, les <strong>délais </strong>ou <strong>surcouts </strong>éventuels, le <strong>choix des transporteurs </strong>...</p>



<p class="has-base-2-background-color has-background">🤨<strong> Pourquoi choisir un transporteur plus qu'un autre </strong>? Déjà, parce que certains d'entre eux ne livreront pas dans <strong>certains périmètres</strong> (DOM, international hors UE ...), <strong>certaines marchandises </strong>(comme celles qui sont encombrantes ou qui nécessitent un camion frigorifiques) ou parce que <strong>leurs tarifs sont moins avantageux</strong> pour certaine gammes de produits (c'est souvent une question logistique de proximité des dépôts).</p>



<p>Ci-dessous, les dimensions et poids d'un produit serviront à ceux de vos transporteurs qui vous <strong>facturent au volume ou au poids</strong> :</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="153" src="https://st9ph.fr/wp-content/uploads/2026/01/image-201-1024x153.png" alt="" class="wp-image-32916" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-201-1024x153.png 1024w, https://st9ph.fr/wp-content/uploads/2026/01/image-201-300x45.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-201-768x115.png 768w, https://st9ph.fr/wp-content/uploads/2026/01/image-201.png 1099w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>On a vu aussi plus haut que <strong>des délais spécifiques</strong> pouvaient s'appliquer dans certains cas (personnalisation, encombrement ...)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="544" height="266" src="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png" alt="" class="wp-image-32866" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-174.png 544w, https://st9ph.fr/wp-content/uploads/2026/01/image-174-300x147.png 300w" sizes="auto, (max-width: 544px) 100vw, 544px" /></figure>



<p class="has-base-2-background-color has-background">👉 Pensez aussi à <strong>définir le délai quand le produit est épuisé</strong> (si vous autorisez la commande avec un stock à zéro). Cela dépendra de <strong>votre roulement</strong> pour les produits qui sont <strong>réapprovisionnés avec une régularité fiable</strong>.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="372" height="266" src="https://st9ph.fr/wp-content/uploads/2026/01/image-202.png" alt="" class="wp-image-32919" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-202.png 372w, https://st9ph.fr/wp-content/uploads/2026/01/image-202-300x215.png 300w" sizes="auto, (max-width: 372px) 100vw, 372px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Certains transporteurs appliqueront <strong>des frais supplémentaires </strong>pour certains produits (par rapport à leurs tarifs habituels)</p>



<p class="has-base-2-background-color has-background">📦 Hors encombrement et poids définis plus hauts et calculés en fonction de leur importance, il peut s'agir de produits dont le <strong>conditionnement </strong>est <strong>plus délicat </strong>(fragile) ou qui sollicitent <strong>un circuit de réapprovisionnement plus ardu</strong> (sur commande, dépôts plus lointains ...).</p>



<p></p>
</div>
</div>



<p>On verra comment <strong>paramétrer les transporteurs </strong>dans l'article qui traite de la 2nd partie de l'évaluation.</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-11de8b76a412644aba43c7a5dde993e1" id="14-5%EF%B8%8F%E2%83%A3-prix">5️⃣| Prix</h2>


<div class="wp-block-ub-table-of-contents-block ub_table-of-contents" id="ub_table-of-contents-c3b43b4c-f98d-4571-9d75-b3c849ca9641" data-linktodivider="false" data-showtext="show" data-hidetext="hide" data-scrolltype="auto" data-enablesmoothscroll="false" data-initiallyhideonmobile="false" data-initiallyshow="true"><div class="ub_table-of-contents-header-container" style="">
			<div class="ub_table-of-contents-header" style="text-align: left; ">
				<div class="ub_table-of-contents-title" style=""></div>
				
			</div>
		</div><div class="ub_table-of-contents-extra-container" style="">
			<div class="ub_table-of-contents-container ub_table-of-contents-1-column ">
				<ul style=""><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#0-11-l-es-visuels-du-produit-" style="">🔹1.1 |les visuels du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#1-12-r%C3%A9capitulatif-amp-description-" style="">🔹1.2 |Récapitulatif &amp; Description</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#2-13-cat%C3%A9gories-" style="">🔹1.3 |Catégories</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#3-14-marque-" style="">🔹1.4 |Marque</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#4-15-produits-associ%C3%A9s-" style="">🔹1.5 |Produits associés</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#5-21-r%C3%A9f%C3%A9rences-" style="">🔹2.1 |Références</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#6-22-caract%C3%A9ristiques-" style="">🔹2.2 |Caractéristiques</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#7-23-fichiers-joints-" style="">🔹2.3 |Fichiers joints</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#8-24-etat-du-produit-" style="">🔹2.4 |Etat du produit</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#9-25-personnalisation-" style="">🔹2.5 |Personnalisation</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#15-5-1-les-taux-de-tva-que-vous-devez-connaitre-" style="">5-1 | Les taux de TVA que vous devez connaitre</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#16-5-2-etablissement-du-prix-normal-" style="">5-2 | Etablissement du prix normal</a></li><li style=""><a href="https://st9ph.fr/prestashop-la-fiche-produit/#17-5-3-etablissement-dun-prix-sp%C3%A9cifique-promo-" style="">5-3 | Etablissement d'un prix spécifique (promo)</a></li></ul>
			</div>
		</div></div>


<h3 class="wp-block-heading" id="15-5-1-les-taux-de-tva-que-vous-devez-connaitre-">5-1 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color"><strong>Les taux de TVA </strong>que vous devez connaitre</mark></h3>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="289" height="411" src="https://st9ph.fr/wp-content/uploads/2026/01/tva20.png" alt="" class="wp-image-32920" style="aspect-ratio:0.7031777339469647;width:136px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/tva20.png 289w, https://st9ph.fr/wp-content/uploads/2026/01/tva20-211x300.png 211w" sizes="auto, (max-width: 289px) 100vw, 289px" /></figure>
</div>


<p class="has-small-font-size"><a href="http://www.legifrance.gouv.fr/affichCode.do?idSectionTA=LEGISCTA000006191854&amp;cidTexte=LEGITEXT000006069577" target="_blank" rel="noreferrer noopener">art. 278 du code général des impôts</a></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"> la <strong>majorité des ventes de biens et des prestations de services</strong> : il s'applique à <strong>tous les produits</strong> ou services <strong>pour lesquels</strong> aucun <strong>autre taux n'est expressément prévu.</strong></p>



<p class="has-text-align-center has-text-color has-link-color wp-elements-cecc40fcda85dfe679047d6528f4ae65" style="color:#b72c2c">C'est <strong>le taux par défaut </strong>de vos produits si vous ne changez pas.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2026/01/boutiq2.jpg" alt="" class="wp-image-32365" srcset="https://st9ph.fr/wp-content/uploads/2026/01/boutiq2.jpg 1024w, https://st9ph.fr/wp-content/uploads/2026/01/boutiq2-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/boutiq2-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2026/01/boutiq2-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="289" height="411" src="https://st9ph.fr/wp-content/uploads/2026/01/tva10.png" alt="" class="wp-image-32921" style="aspect-ratio:0.7031777339469647;width:133px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/tva10.png 289w, https://st9ph.fr/wp-content/uploads/2026/01/tva10-211x300.png 211w" sizes="auto, (max-width: 289px) 100vw, 289px" /></figure>
</div>


<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<p class="has-small-font-size"><a href="http://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=233F38C0A735CAA6C8313B23DDDADCF6.tpdjo14v_1?idArticle=LEGIARTI000026295994&amp;cidTexte=LEGITEXT000006069577">art. 278 bis</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000026950047&amp;cidTexte=LEGITEXT000006069577">278 quater</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000030021766&amp;cidTexte=LEGITEXT000006069577">278 sexies A</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000030022042&amp;cidTexte=LEGITEXT000006069577">278 septies</a>&nbsp;et&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=1992169D74B4352D3290592B22D76AB1.tpdila12v_3?idArticle=LEGIARTI000030061519&amp;cidTexte=LEGITEXT000006069577">art. 279</a>&nbsp;du CGI</p>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong> produits agricoles</strong> non transformés,  <strong>bois de chauffage</strong>, <strong>travaux d'amélioration du logement </strong>qui ne bénéficient pas du taux de 5,5%, certaines <strong>prestations de logement </strong>et de <strong>camping</strong>,  <strong>foires et salons</strong>,<strong> jeux et manèges forains,</strong> droits d'entrée des <strong>musées</strong>, <strong>zoo</strong>, <strong>monuments</strong>, <strong> transports de voyageurs</strong>, traitement des <strong>déchets</strong>, à la <strong>restauration</strong>.</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="605" height="643" src="https://st9ph.fr/wp-content/uploads/2025/12/image-88.png" alt="" class="wp-image-31705" srcset="https://st9ph.fr/wp-content/uploads/2025/12/image-88.png 605w, https://st9ph.fr/wp-content/uploads/2025/12/image-88-282x300.png 282w" sizes="auto, (max-width: 605px) 100vw, 605px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full is-resized"><img loading="lazy" decoding="async" width="289" height="411" src="https://st9ph.fr/wp-content/uploads/2026/01/tva55.png" alt="" class="wp-image-32922" style="aspect-ratio:0.7031777339469647;width:133px;height:auto" srcset="https://st9ph.fr/wp-content/uploads/2026/01/tva55.png 289w, https://st9ph.fr/wp-content/uploads/2026/01/tva55-211x300.png 211w" sizes="auto, (max-width: 289px) 100vw, 289px" /></figure>
</div>


<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<p class="has-small-font-size"><a href="https://www.legifrance.gouv.fr/affichCode.do;jsessionid=F1C0E67036CEC46A7C83A57171EECC55.tpdila19v_1?idSectionTA=LEGISCTA000006191654&amp;cidTexte=LEGITEXT000006069577">art. 278-0 bis et 278-0 bis A</a>,&nbsp;<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do;jsessionid=05D76B03D109DDE0203827B845EEB959.tpdila19v_1?idArticle=LEGIARTI000033810507&amp;cidTexte=LEGITEXT000006069577">art. 278 sexies</a>&nbsp;du CGI</p>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong> produits alimentaires </strong>(sans alcool)<strong>,</strong>  produits de <strong>protection hygiénique</strong>, <strong>équipements et services pour handicapés, livres</strong> sur tout support, abonnements <strong>gaz et électricité</strong>, fourniture de chaleur issue d’<strong>énergies renouvelables</strong>, fourniture de <strong>repas dans les cantines </strong>scolaires, billetterie de <strong>spectacle </strong>vivant et de <strong>cinéma</strong>, certains <strong>travaux </strong>d’amélioration de la qualité <strong>énergétique</strong>,<strong> logements sociaux</strong>, <strong>accession à la propriété.</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1024" height="1024" src="https://st9ph.fr/wp-content/uploads/2026/01/pack6.jpg" alt="" class="wp-image-32924" srcset="https://st9ph.fr/wp-content/uploads/2026/01/pack6.jpg 1024w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-300x300.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-150x150.jpg 150w, https://st9ph.fr/wp-content/uploads/2026/01/pack6-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</div>
</div>



<p>Pour être complet, il existe aussi un&nbsp;<strong>taux particulier</strong>&nbsp;de&nbsp;<strong>2,1 %</strong>&nbsp;(<a href="http://www.legifrance.gouv.fr/affichCode.do?idSectionTA=LEGISCTA000006191656&amp;cidTexte=LEGITEXT000006069577">art. 281 quater et suivants du CGI</a>) UI est réservé aux <strong>médicaments remboursables par la sécurité sociale</strong>, aux <strong>ventes d’animaux vivants</strong> de boucherie et de charcuterie, à <strong>certains spectacles</strong> et <strong>aux publications de presse</strong> inscrites à la Commission paritaire des publications et agences de presse. 🖥️ Mais cette dernière, <strong>vous ne la verrez pas à l'épreuv</strong>e.</p>



<p class="has-small-font-size">Source : <a href="https://www.economie.gouv.fr/cedef/taux-tva-france-et-union-europeenne">https://www.economie.gouv.fr/cedef/taux-tva-france-et-union-europeenne</a></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="255" height="279" src="https://st9ph.fr/wp-content/uploads/2026/01/image-204.png" alt="" class="wp-image-32926"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈 C'est dans la zone <strong>Règle de taxes </strong>que vous pourrez changer le taux de TVA</p>



<p>A noter aussi :</p>



<ul class="wp-block-list">
<li>"<strong>Aucune taxe</strong>" - cela concerne <strong>de rares services</strong> intracommunautaires (UE), certaines <strong>activités médicales, services bancaires ou d'assurance.</strong></li>



<li>"<strong>EU VAT</strong>" pour certains <strong>produits dématérialisés</strong> dont <strong>la TVA est différente dans chaque pays de l'UE </strong>et qui sont payées<strong> en fonction du taux du pays de téléchargement</strong>.</li>
</ul>



<p>ℹ️ Ca non plus, <strong>ce n'est pas au programme.</strong></p>
</div>
</div>



<p class="has-base-2-background-color has-background">💶 Juste pour vous dire que l'Etat se fiche un peu de nous quand il nous dit qu'il n'a pas "de sous", il a touché <strong>106,2 milliards d'euros de recettes de TVA </strong>nette <strong>en 2025</strong>. Je dis "nette" parce qu'il en reverse une partie aux collectivités territoriales. (<em>source : ministère des finances publiques</em>)</p>



<h3 class="wp-block-heading" id="16-5-2-etablissement-du-prix-normal-">5-2 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Etablissement du prix normal</mark></h3>



<ul class="wp-block-list">
<li>Suivez les consignes  : v<strong>ous devez marger</strong>,  y compris si une promo est prévue</li>



<li> Aboutissez à <strong>un prix psychologique</strong> (ex : 9,95 € plutôt que 10 €)</li>



<li>N'oubliez pas de <strong>vérifier le taux de TVA</strong></li>
</ul>



<p>👉 Si je reprends le sujet "fil rouge", nous obtenons notre Sweat à<strong> 6 euros HT</strong> auprès de notre fournisseur et nous devons réaliser <strong>une marge commerciale de 8 euros HT</strong>. Imaginons aussi qu'on nous demande de faire <strong>un rabais de 10% </strong>sur notre produit en promo de lancement.</p>



<ul class="wp-block-list">
<li>Renseignez le prix fournisseur de <strong>6 €</strong> dans "<strong>prix d'achat</strong>" (PA)</li>



<li>Renseignez<strong> 14,8</strong> dans "<strong>prix de vente HT</strong>" : PA de 6€ + Marge mini 8€ X 1,1 (pour les 10% de promo)</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="793" height="107" src="https://st9ph.fr/wp-content/uploads/2026/01/image-207.png" alt="" class="wp-image-32935" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-207.png 793w, https://st9ph.fr/wp-content/uploads/2026/01/image-207-300x40.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-207-768x104.png 768w" sizes="auto, (max-width: 793px) 100vw, 793px" /></figure>



<p>👉 On obtient un <strong>TTC </strong>de <strong>17,76 €</strong>. C'est<strong> notre base</strong> pour atteindre un <strong>prix psychologique</strong> et nous avons trois possibilités dans <strong>notre politique de prix</strong>  :</p>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">l'alignement</mark> </strong>: pour<strong> être certain d'être concurrentiel</strong>, rester sur<strong> la marge minimale.</strong> <strong>17,95 € TTC</strong> nous donne un HT de 14,95 € soit <strong>15 cts au dessus du seuil minimal</strong>- 🖥️ <strong><mark style="background-color:rgba(0, 0, 0, 0);color:#cf2929" class="has-inline-color">Ce sera celui là à l'examen</mark></strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">La pénétration</mark></strong> : quitte à <strong>rogner sur sa marge pour être moins cher que les concurrents</strong>, voire ne pas marger du tout pendant la promo ! On peut descendre ainsi jusqu'à<strong> 7,95 € en prix de vente TTC</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">L'écrémage</mark></strong> : en<strong> dopant le prix pour donner le sentiment de luxe</strong> et, là, il n'y a de limite que l'effondrement de vos ventes.</li>
</ul>



<p>🔵 <strong>Nous choisissons l'alignement </strong>(pour l'examen) :</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="804" height="141" src="https://st9ph.fr/wp-content/uploads/2026/01/image-208.png" alt="" class="wp-image-32937" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-208.png 804w, https://st9ph.fr/wp-content/uploads/2026/01/image-208-300x53.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-208-768x135.png 768w" sizes="auto, (max-width: 804px) 100vw, 804px" /></figure>



<h3 class="wp-block-heading" id="17-5-3-etablissement-dun-prix-sp%C3%A9cifique-promo-">5-3 | <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Etablissement d'un prix spécifique (promo)</mark></h3>



<p>➡️ Je vous renvoie à <a href="https://st9ph.fr/%f0%9f%9b%92e-commerce-operations-commerciales-en-digital/" target="_blank" rel="noreferrer noopener">cet article</a> section 1-1 (<strong>soldes</strong>) et 1-2 (<strong>promos</strong>) pour <strong>les règles à respecter</strong> pour ce type d'opération commerciale.</p>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="213" height="34" src="https://st9ph.fr/wp-content/uploads/2026/01/image-209.png" alt="" class="wp-image-32940"/></figure>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-8c3297de76c3536ed42e915694cff293">🔵 Pour qui ?</p>



<p>👉 Vous pouvez <strong>réserver cette promotion à</strong> <strong>un client spécifique</strong> (que vous avez au téléphone par exemple et auquel vous voulez faire un geste commercial) <strong>ou à un groupe.</strong></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-210.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>
</div>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les visiteurs</mark></strong> sont les<strong> personnes présentes</strong> sur votre boutique <strong>sans être identifiées</strong></li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Les invités</mark></strong> sont <strong>des visiteurs en train de commander</strong> <strong>sans être</strong> (déjà) <strong>clients </strong>(ou sans s'être connectés à leur compte client)</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">les clients</mark></strong> sont des<strong> visiteurs identifiés</strong> car connectés<strong> à leur compte client</strong></li>
</ul>



<p class="callout rouge">🤨 <strong>C'est idiot de choisir "visiteurs"</strong> : ils verront vos promos <strong>sans pouvoir les commander</strong> (car ils deviendront invités et alors, ils ne pourront plus en bénéficier ! De plus, vos fidèles clients, eux, ne les verront pas (mais certains commerçants le font). <strong>S'ils ne se connectent pas automatiquement,</strong> en plus, <strong>ils verront la promo disparaitre</strong> en le faisant !</p>



<p class="callout jaune">🤨 Ce n'est <strong>pas plus malin de choisir "invités"</strong> car alors, ils ne pourraient <strong>se rendre compte de la promo </strong>en cours <strong>qu'au moment de la commande </strong>(alors que la promo est votre principal CTA).</p>



<p class="callout vert">👍 Non, <strong>c'est au groupe "clients" que vous devez réserver vos promotions </strong>pour inciter les prospects à créer un compte.</p>



<p class="callout rouge">⚠️ <strong>Attention toutefois</strong>, si vous vous allez en front office pour <strong>voir le résultat côté client</strong>, il faudra <strong>vous connecter à un compte test.</strong> </p>



<p class="has-contrast-3-background-color has-background">⏱️ Bon nombre de candidats perdent un temps fou à ce corriger en back office, <strong>ne voyant pas de résultat probant en front</strong>, alors qu'ils ont réussi leur promo depuis le début mais qu'<strong>ils ont juste oublié de se connecter</strong> pour la voir.</p>



<p></p>



<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>😟 un compte test ? Kézako ?</summary>
<p>C'est <strong>un faux compte client </strong>qui vous sert à<strong> faire des tests</strong>. Vous savez que <strong>vous n'avez pas le droit de vous connecter à un vrai compte client</strong>, j'espère ? Certains à l'examen changent carrément les mots de passe pour pouvoir le faire ! <mark style="background-color:rgba(0, 0, 0, 0);color:#c83535" class="has-inline-color">C'est juste<strong> interdit par la loi</strong></mark> ! Vous disposez d'un compte <strong>John DOE</strong> lors de l'installation de Prestashop (si vous ne l'avez pas supprimé) : login : <strong>pub@prestashop.com</strong> | mdp : <strong>123456789</strong> (sinon, recréez en un, ça ne vous prendra que 30 secondes)</p>
</details>



<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-49e6ca543d5b7480f0d106a6257593db">🔵 Pour quelle déclinaison ?</p>



<p class="has-base-2-background-color has-background">👉 Vous avez le droit de <strong>faire une promo sur l'ensemble des déclinaison</strong>s et, dans ce cas, laisser "toutes" comme c'est par défaut. C'est notre cas d'ailleurs pour notre promo de lancement.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Mais souvent<strong>, ce seront certaines tailles, pointures ou couleurs</strong> d'un produit <strong>qui se vendront moins bien </strong>et que vous voudrez promouvoir. Dans ce cas :</p>



<ul class="wp-block-list">
<li>cliquez sur "<strong>déclinaison</strong>" pour dérouler la liste</li>



<li>Choisir l<strong>a déclinaison que vous souhaitez promouvoir</strong></li>
</ul>



<p></p>



<p class="has-text-align-center has-base-2-background-color has-background">C'est possible aussi de <strong>le faire sur plusieurs</strong> en créant <strong>d'autres prix spécifiques</strong> pour eux, en plus de celui-ci</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="267" height="251" src="https://st9ph.fr/wp-content/uploads/2026/01/image-211.png" alt="" class="wp-image-32942"/></figure>
</div>
</div>



<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-ca757dcba86d682b7fb47a8c6dd5f387">🔵 Pour combien de temps ?</p>



<p class="has-base-2-background-color has-background">Un promotion<strong> est bornée dans le temps</strong> (sinon ça devient un prix normal).</p>



<p>👉 Vous remarquerez que "<strong>illimitée</strong>" est <strong>cochée par défaut</strong>, <mark style="background-color:rgba(0, 0, 0, 0);color:#cc4343" class="has-inline-color">ce qui est interdit</mark> en<a href="https://www.economie.gouv.fr/dgccrf/les-fiches-pratiques/lignes-directrices-relatives-lencadrement-des-promotions" target="_blank" rel="noreferrer noopener"> droit français</a> ! "<em>Elle doit rester ponctuelle et claire"</em></p>



<ul class="wp-block-list">
<li><strong>Commencez par la décocher</strong> !</li>
</ul>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-base-2-background-color has-background">On remarque qu'une date de<strong> fin à + 1 mois </strong>est inscrite <strong>automatiquement</strong></p>



<ul class="wp-block-list">
<li><strong>Indiquez la date de fin </strong>souhaitée</li>
</ul>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="501" height="131" src="https://st9ph.fr/wp-content/uploads/2026/01/image-212.png" alt="" class="wp-image-32943" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-212.png 501w, https://st9ph.fr/wp-content/uploads/2026/01/image-212-300x78.png 300w" sizes="auto, (max-width: 501px) 100vw, 501px" /></figure>
</div>
</div>



<p class="has-accent-color has-text-color has-link-color has-medium-font-size wp-elements-3a0b6e8874757409bb3e23ed1f3f03f4">🔵 De quel montant ?</p>



<p>Vous pourrez au choix :</p>



<ul class="wp-block-list">
<li>Définir un rabais <strong>en pourcentage</strong> (mieux pour les petits montants)</li>



<li>Définir un rabais<strong> en numéraire</strong> (mieux pour les prix élevés</li>



<li><strong>Indiquer </strong>directement<strong> le prix remisé</strong> (ce qui revient à l'option précédente)</li>
</ul>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="382" height="95" src="https://st9ph.fr/wp-content/uploads/2026/01/image-213.png" alt="" class="wp-image-32945" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-213.png 382w, https://st9ph.fr/wp-content/uploads/2026/01/image-213-300x75.png 300w" sizes="auto, (max-width: 382px) 100vw, 382px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<ul class="wp-block-list">
<li>saisir <strong>10 </strong>dans la zone de gauche</li>



<li><strong>dérouler la liste</strong> que affiche "€" <strong>et changer pour "%"</strong></li>
</ul>



<p></p>
</div>
</div>



<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex">
<ul class="wp-block-list">
<li>Cliquer sur :</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="170" height="34" src="https://st9ph.fr/wp-content/uploads/2026/01/image-214.png" alt="" class="wp-image-32946"/></figure>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="320" height="165" src="https://st9ph.fr/wp-content/uploads/2026/01/image-215.png" alt="" class="wp-image-32947" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-215.png 320w, https://st9ph.fr/wp-content/uploads/2026/01/image-215-300x155.png 300w" sizes="auto, (max-width: 320px) 100vw, 320px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>👈 Le produit se présente maintenant avec <strong>un prix initial barré,</strong> le<strong> taux de remise</strong> et <strong>le nouveau prix.</strong></p>



<p class="has-text-align-center has-base-2-background-color has-background">Ca tombe bien parce que c'est comme cela que la loi veut qu'on fasse.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="296" height="490" src="https://st9ph.fr/wp-content/uploads/2026/01/image-217.png" alt="" class="wp-image-32950" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-217.png 296w, https://st9ph.fr/wp-content/uploads/2026/01/image-217-181x300.png 181w" sizes="auto, (max-width: 296px) 100vw, 296px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<p>👇 L'information de remise est aussi présente<strong> dans le tunnel d'achat</strong>, ce qui renforce le sentiment de bonne affaire (et réduit le taux d'<strong>abandon de panier</strong>).</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="540" height="296" src="https://st9ph.fr/wp-content/uploads/2026/01/image-218.png" alt="" class="wp-image-32951" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-218.png 540w, https://st9ph.fr/wp-content/uploads/2026/01/image-218-300x164.png 300w" sizes="auto, (max-width: 540px) 100vw, 540px" /></figure>
</div>
</div>



<p>Vous pouvez encore <strong>augmenter sa visibilité </strong>en cochant la case du bandeau "<strong>promo</strong>".</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="531" height="40" src="https://st9ph.fr/wp-content/uploads/2026/01/image-216.png" alt="" class="wp-image-32948" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-216.png 531w, https://st9ph.fr/wp-content/uploads/2026/01/image-216-300x23.png 300w" sizes="auto, (max-width: 531px) 100vw, 531px" /></figure>



<p class="has-base-2-background-color has-background">ℹ️ Si vous avez<strong> activé le bandeau promos </strong>sur votre page d'accueil, <strong>le produit y figura aussi</strong>.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-image">
<figure class="alignright size-full"><img loading="lazy" decoding="async" width="230" height="76" src="https://st9ph.fr/wp-content/uploads/2026/01/image-219.png" alt="" class="wp-image-32952"/></figure>
</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Sur <a href="https://boutiq.st9ph.fr/21-mug-panda.html" target="_blank" rel="noreferrer noopener">cet autre produit,</a> on pratique<strong> une remise à la quantité</strong> (pour encourager l'achat de plusieurs mugs en même temps)</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center has-base-2-background-color has-background">Le client <strong>est encouragé à cliquer</strong> sur les quantités par la présence d'<strong>un récapitulatif de la promotion</strong> juste au dessus !</p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="549" height="146" src="https://st9ph.fr/wp-content/uploads/2026/01/image-220.png" alt="" class="wp-image-32953" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-220.png 549w, https://st9ph.fr/wp-content/uploads/2026/01/image-220-300x80.png 300w" sizes="auto, (max-width: 549px) 100vw, 549px" /></figure>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<!-- DÉBUT BLOC IMAGE ZOOMABLE (V3 - CROIX & PROPORTIONS) -->
<style>
    .zoom-img-container { position: relative; display: inline-block; width: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
    .zoom-img-container:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
    .zoom-img-container img { width: 100%; height: auto; display: block; transition: transform 0.3s; }
    .zoom-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; color: white; font-family: sans-serif; font-weight: bold; text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; /* La souris traverse l'overlay pour cliquer sur l'image */ }
    .zoom-overlay svg { width: 40px; height: 40px; fill: white; margin-bottom: 5px; }
    .zoom-img-container:hover .zoom-overlay { opacity: 1; }
    .zoom-img-container:hover img { transform: scale(1.05); }
    
    .zoom-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
    .zoom-modal.show { display: flex; opacity: 1; }
    
    /* CORRECTION PROPORTIONS : */
    .zoom-modal-content { 
        max-width: 90%; 
        max-height: 90%; 
        width: auto;       /* Force la largeur auto (pas d'étirement) */
        height: auto;      /* Force la hauteur auto */
        object-fit: contain; /* Assure que l'image tient dans le cadre sans déformer */
        border-radius: 4px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.5); 
        animation: zoomIn 0.3s; 
    }
    
    .zoom-close { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: #f1f1f1; 
        font-size: 40px; 
        font-weight: bold; 
        cursor: pointer; 
        transition: 0.3s; 
        line-height: 1; 
        z-index: 10000; /* S'assure que la croix est au-dessus de tout */
        user-select: none;
    }
    .zoom-close:hover { color: #bbb; }

    @keyframes zoomIn { from {transform:scale(0.8); opacity:0} to {transform:scale(1); opacity:1} }
</style>

<!-- CONTENEUR DE L'IMAGE -->
<!-- 👇🏻 UNIQUE ENDROIT À MODIFIER : Change juste le src ci-dessous 👇🏻 -->
<div class="zoom-img-container" onclick="openZoomModal(this)">
    <img decoding="async" src="https://st9ph.fr/wp-content/uploads/2026/01/image-221.png" alt="Agrandir l'image">
    
    <div class="zoom-overlay">
        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>Agrandir</span>
    </div>
    
    <!-- LE POPUP (À l'intérieur du bloc) -->
    <div class="zoom-modal" onclick="closeZoomModal(event, this)">
        <span class="zoom-close" onclick="closeZoomModal(event, this.parentElement)">&times;</span>
        <img class="zoom-modal-content">
    </div>
</div>

<script>
    function openZoomModal(containerElement) {
        const modal = containerElement.querySelector('.zoom-modal');
        const modalImg = modal.querySelector('.zoom-modal-content');
        const clickedImg = containerElement.querySelector('img');
        
        modalImg.src = clickedImg.src;
        modal.classList.add("show");
    }

    // Correction Croix : On passe l'événement 'e' pour stopper la propagation
    function closeZoomModal(e, modalElement) {
        // Empêche le clic de se propager au fond noir (qui fermerait aussi le modal)
        if(e) e.stopPropagation();
        modalElement.classList.remove("show");
    }
    
    document.addEventListener('keydown', function(event) {
        if (event.key === "Escape") {
            const openModal = document.querySelector('.zoom-modal.show');
            if(openModal) openModal.classList.remove("show");
        }
    });
</script>
<!-- FIN BLOC IMAGE ZOOMABLE -->
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>La <strong>notion de pack</strong> peut être aussi décisif si vous associez un produit qui marche bien à un de vos "mal vendus"</p>



<p class="has-base-2-background-color has-background">👈 Sur <a href="https://boutiq.st9ph.fr/25-pack-mug-et-vase-panda.html" target="_blank" rel="noreferrer noopener">ce produit</a>, le client peut <strong>mesurer le gain </strong>qu'il a <strong>à commander ces deux produits ensemble</strong> plutôt que séparément.</p>
</div>
</div>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-d7aa790ad23e9069fb5d034d06829f55" id="18-6%EF%B8%8F%E2%83%A3-r%C3%A9f%C3%A9rencement-seo">6️⃣| Référencement - SEO</h2>



<p>Je vous renvoie à <a href="https://st9ph.fr/%e2%8f%ba%ef%b8%8fomnicanal-search-engine-marketing/" target="_blank" rel="noreferrer noopener">cet article </a>pour tous<strong> les concepts et le vocabulaire</strong>.</p>



<p>Voilà quelle sera notre sortie sur une SERP :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="720" height="151" src="https://st9ph.fr/wp-content/uploads/2026/01/image-222.png" alt="" class="wp-image-32957" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-222.png 720w, https://st9ph.fr/wp-content/uploads/2026/01/image-222-300x63.png 300w" sizes="auto, (max-width: 720px) 100vw, 720px" /></figure>
</div>


<p>On constate <strong>plusieurs choses</strong> :</p>


<ul style="padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 0px; column-count: 1; --ub-list-mobile-column-count: 1; " class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-f6dff6a8-20f1-4a2b-a235-12fb7104244b">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%2300d084&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-11a1d348-6508-4e3b-ab0d-63bb7bb935e8">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#00d084" d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path></svg>
				</span>
				<span class="ub_list_item_text">l<strong>'url est lisible</strong> (slug pas trop long et parlant)</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23fcb900&quot; d=&quot;M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-b87332c9-f117-430d-b0f8-44fb01501e39">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#fcb900" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Le titre est valorisé</strong> mais ne mentionne pas st9ph Market</span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23fcb900&quot; d=&quot;M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-40b2dd83-d289-4f0e-bbd7-c2095b88835c">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="#fcb900" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.7 328.7c22-22 53.9-40.7 91.3-40.7s69.3 18.7 91.3 40.7c11.1 11.1 20.1 23.4 26.4 35.4c6.2 11.7 10.3 24.4 10.3 35.9c0 5.2-2.6 10.2-6.9 13.2s-9.8 3.7-14.7 1.8l-20.5-7.7c-26.9-10.1-55.5-15.3-84.3-15.3h-3.2c-28.8 0-57.3 5.2-84.3 15.3L149.6 415c-4.9 1.8-10.4 1.2-14.7-1.8s-6.9-7.9-6.9-13.2c0-11.6 4.2-24.2 10.3-35.9c6.3-12 15.3-24.3 26.4-35.4zm-31.2-182l89.9 47.9c10.7 5.7 10.7 21.1 0 26.8l-89.9 47.9c-7.9 4.2-17.5-1.5-17.5-10.5c0-2.8 1-5.5 2.8-7.6l36-43.2-36-43.2c-1.8-2.1-2.8-4.8-2.8-7.6c0-9 9.6-14.7 17.5-10.5zM396 157.1c0 2.8-1 5.5-2.8 7.6l-36 43.2 36 43.2c1.8 2.1 2.8 4.8 2.8 7.6c0 9-9.6 14.7-17.5 10.5l-89.9-47.9c-10.7-5.7-10.7-21.1 0-26.8l89.9-47.9c7.9-4.2 17.5 1.5 17.5 10.5z"></path></svg>
				</span>
				<span class="ub_list_item_text">la <strong>méta </strong>(description) est <strong>sympa</strong>, valorisée, attrayante <strong>mais tronquée</strong> (...)</span>
			</div>
			
		</li>
</ul>


<ul class="wp-block-list">
<li>un <strong>bon titre SEO</strong> doit donner de manière simple<strong> l'information clé</strong> : <strong>c'est quoi comme produit </strong>et <strong>où vais-je atterrir</strong> si je clique ? Toutes les <strong>url </strong>ne seront pas aussi <strong>parlantes </strong>que la mienne : <em>boutiq.st9ph</em> </li>



<li>une <strong>bonne méta</strong> sera <strong>votre CTA</strong> : en peu de mots, donnez envie de cliquer sans dépasser les 160 caractères. (ici, je recopie le Récapitulatif et je le simplifie</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="944" height="274" src="https://st9ph.fr/wp-content/uploads/2026/01/image-223.png" alt="" class="wp-image-32958" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-223.png 944w, https://st9ph.fr/wp-content/uploads/2026/01/image-223-300x87.png 300w, https://st9ph.fr/wp-content/uploads/2026/01/image-223-768x223.png 768w" sizes="auto, (max-width: 944px) 100vw, 944px" /></figure>



<p>👉 on aurait pu aussi au besoin  modifier l'url simplifiée (slug)</p>



<p>Ca donne ça 👇 :</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="710" height="148" src="https://st9ph.fr/wp-content/uploads/2026/01/image-224.png" alt="" class="wp-image-32959" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-224.png 710w, https://st9ph.fr/wp-content/uploads/2026/01/image-224-300x63.png 300w" sizes="auto, (max-width: 710px) 100vw, 710px" /></figure>
</div>


<p>Pour <strong>les mots clés</strong>, vous n'aurez ni <strong>Trends</strong>, ni <strong>Semrush </strong>pour vous aider, alors posez vous une seule question : <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">qu'est ce que je taperais comme recherche si je voulais acheter <strong>un produit comme celui là</strong> ?</mark></p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="656" height="150" src="https://st9ph.fr/wp-content/uploads/2026/01/image-225.png" alt="" class="wp-image-32960" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-225.png 656w, https://st9ph.fr/wp-content/uploads/2026/01/image-225-300x69.png 300w" sizes="auto, (max-width: 656px) 100vw, 656px" /></figure>



<p class="has-base-2-background-color has-background">N'oubliez pas de faire <strong>des longues traines</strong> et pas la peine de remettre "st9ph market" ou "Panda" qui sont <strong>déjà dans le titre SEO</strong>.</p>



<p>👉Si vous n'avez pas <strong>légendé vos images</strong> (voir section 1-1), c'est le moment de la faire !</p>



<h2 class="wp-block-heading has-accent-color has-text-color has-link-color wp-elements-8bd84877bfc464316b13abdcee00f9c6" id="19-7%EF%B8%8F%E2%83%A3-options">7️⃣| Options</h2>



<p>Vous allez pouvoir définir des <strong>paramètres de visibilité</strong> et des<strong> modes d'affichage</strong> :</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:33.33%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="216" height="241" src="https://st9ph.fr/wp-content/uploads/2026/01/image-227.png" alt="" class="wp-image-32964"/></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:66.66%">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="593" height="263" src="https://st9ph.fr/wp-content/uploads/2026/01/image-226.png" alt="" class="wp-image-32963" srcset="https://st9ph.fr/wp-content/uploads/2026/01/image-226.png 593w, https://st9ph.fr/wp-content/uploads/2026/01/image-226-300x133.png 300w" sizes="auto, (max-width: 593px) 100vw, 593px" /></figure>
</div>
</div>



<ul class="wp-block-list">
<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Partout</mark></strong> : C'est <strong>le mode par défaut.</strong> Le produit sera <strong>visible à la fois sur le "catalogue"</strong>, c'est à dire, partout sur le site quand on parcourra les rubriques et <strong>dans le moteur de recherche</strong> . Mais aussi dans le <strong>bloc nouveautés</strong> et <strong>promos</strong> si vous les affichez et qu'il rentre dans les critères.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Catalogue seul </mark></strong>: si vous ne voulez pas qu'on puisse le trouver dans le moteur. Je ne vois pas bien pourquoi on ferait cela, à part pour<strong> forcer le visiteur à parcourir les rayons </strong>(et voir les autres produits <strong>dans l'espoir qu'il ait un coup de cœur</strong>) un peu comme le modèle Ikéa où l'on oblige à un parcours imposé.</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Recherche uniquement</mark></strong> : Je ne vois pas bien non plus pourquoi on ne pourrait le trouver <strong>qu'en le recherchant par mots clé.</strong>  Peut-être pour certains produits techniques en B2B, <strong>pour éviter les retours trop fréquents </strong>de clients qui se trompent ?<strong> On leur donne la Ref </strong>par téléphone ou mail ?</li>



<li><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">Nulle part</mark></strong> : là, je comprends mieux, ça peut-être <strong>un moyen préparer en avance une fiche produit </strong>(promo ou solde alors que ce n'est pas encore la date de début) mais, là encore, il suffit de<strong> la garder en mode brouillon.</strong></li>
</ul>



<p class="has-medium-font-size">Vous pouvez aussi :</p>



<ul class="wp-block-list">
<li>indiquer si <strong>le produit est disponible à la vente </strong>(ça peut-être par exemple un <strong>produit cadeau</strong> ou <strong>à gagner </strong>qu'on veut tout-de-même inscrire au catalogue)</li>



<li><strong>Afficher le prix</strong> : valable pour les <strong>boutiques spécialisées</strong> (<strong>catalogues salariés </strong>de comités d'entreprises) ou pour certains produits ou <strong>prestation sur mesure</strong> et qu'on ne peut pas estimer d'avance.</li>



<li>Indiquer si ce <strong>produit n'est disponible qu'en ligne </strong>(exclu web) si tant est que vous disposez aussi d'une SVP avec un catalogue commun.</li>
</ul>



<p class="has-base-2-background-color has-background">Voilà, ce long tour d'horizon est terminé. <strong>L'entrainement sera la clé</strong> pour <strong>réussir votre fiche produit en 13 minutes.</strong> Plus vous allez manipuler l'outil, plus vous allez acquérir les automatismes et l'aisance.</p>



<p>🔻La version <img loading="lazy" decoding="async" width="12" height="11" class="wp-image-33359" style="width: 12px;" src="https://st9ph.fr/wp-content/uploads/2026/01/pdf.png" alt=""><mark style="background-color:rgba(0, 0, 0, 0);color:#eb1e1e" class="has-inline-color">pdf</mark>, <a href="https://kdrive.infomaniak.com/app/share/368426/d279779e-edbe-40b5-a5c8-6f1a087a72d0/files/2963/preview/pdf/6555" target="_blank" rel="noreferrer noopener">c'est ici</a>. ♻️<mark style="background-color:rgba(0, 0, 0, 0);color:#3eb674" class="has-inline-color"><strong>A imprimer avec modération.</strong></mark></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">

<div class="wp-block-ub-social-share" id="ub-social-share-34cb1b13-3295-452f-ad1e-918dc902bc11">
			<div class="social-share-icons align-icons-center orientation-icons-row"><a aria-label="linkedin-logo" target="_blank" rel="nofollow" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fst9ph.fr%2Fprestashop-la-fiche-produit%2F" class="ub-social-share-linkedin-container" style="border-color: #2867b2; ">
				<span class="social-share-icon ub-social-share-linkedin square" style="width: 30px; height: 30px; "><svg xmlns="http://www.w3.org/2000/svg" style="fill:#ffffff" fill="#ffffff" width="20" height="20" viewbox="0 0 448 512"><path d="M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z"></path></svg></span><span style="">partager</span>
			</a></div>
		</div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-center"><strong>donnez votre avis</strong> (star ranking) en bas de cette page</p>



<p class="has-text-align-center has-large-font-size">⬇️</p>



<p></p>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-jetpack-repeat-visitor"></div></div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h2 class="wp-block-heading has-base-2-background-color has-background has-medium-font-size" id="20-aller-%C3%A0-la-seconde-partie-manipuler-la-boutique-%E2%9E%A1%EF%B8%8F">Aller à la seconde partie | <a href="https://st9ph.fr/prestashop-manipuler-la-boutique/">manipuler la boutique</a> ➡️</h2>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%"><div class="yoast-breadcrumbs"><span><span><a href="https://st9ph.fr/">Accueil</a></span> » <span class="breadcrumb_last" aria-current="page">prix specifiques prestashop</span></span></div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:25%"></div>
</div>



			<div class="wp-block-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-6ab5fb4a     uagb-post__items uagb-post__columns-3 is-grid uagb-post__columns-tablet-2 uagb-post__columns-mobile-1 uagb-post__equal-height" data-total="3" style="">

												<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="732" height="259" src="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop.jpg 732w, https://st9ph.fr/wp-content/uploads/2026/02/enavant-opcom-eshop-300x106.jpg 300w" sizes="auto, (max-width: 732px) 100vw, 732px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Prestashop | OP Com dans la Eshop</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-02-17T18:27:24+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					17 février 2026				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>PrestaShop | 💥OP Com dans la Eshop ➡️ Que ce soit pour &#8230; vider les...				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/prestashop-op-com-dans-la-eshop/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="840" height="248" src="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech.jpg 840w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-300x89.jpg 300w, https://st9ph.fr/wp-content/uploads/2026/01/img-enAvant-tech-768x227.jpg 768w" sizes="auto, (max-width: 840px) 100vw, 840px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Le Service Après Vente</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-24T16:55:00+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					24 janvier 2026				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					SAV prestashop,, commande prestashop en backoffice, messages prédéfinis prestashop

				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/prestashop-le-service-apres-vente/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="736" height="226" src="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958.jpg 736w, https://st9ph.fr/wp-content/uploads/2026/01/Capture-decran-2026-01-22-143958-300x92.jpg 300w" sizes="auto, (max-width: 736px) 100vw, 736px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Manipuler la boutique</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2026-01-22T14:40:35+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					22 janvier 2026				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					2 commentaires				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>PrestaShop | Manipuler la boutique 🏪 👉🏻 2nd bloc d&#8217;évaluation de l&#8217;épreuve technique, les manipulations...				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/prestashop-manipuler-la-boutique/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="723" height="199" src="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925.jpg 723w, https://st9ph.fr/wp-content/uploads/2025/12/Capture-decran-2026-01-05-225925-300x83.jpg 300w" sizes="auto, (max-width: 723px) 100vw, 723px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | les retours produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-12-18T19:06:17+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					18 décembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Un commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>restaShop | Les retours produits 🔙 ➡️ Il faut savoir que les différents scénarios devront...				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/prestashop-cas-de-retours-produits/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="307" src="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-1024x349.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-300x102.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9-768x262.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/PRESTA9.png 1059w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Prestashop | Nouveautés de la version 9</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-19T10:45:25+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					19 novembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>Une nouvelle version du CMS pose quelques améliorations au Backoffice et un nouveau thème en...				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/prestashop-nouveautes-de-la-version-9/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
																<article class="uagb-post__inner-wrap">								<div class='uagb-post__image'>
									<a href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer" class='uagb-image-ratio-inherit'><img loading="lazy" decoding="async" width="900" height="425" src="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png" class="attachment-large size-large" alt="" srcset="https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-1024x484.png 1024w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-300x142.png 300w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit-768x363.png 768w, https://st9ph.fr/wp-content/uploads/2025/11/refeProduit.png 1062w" sizes="auto, (max-width: 900px) 100vw, 900px" />					</a>
							</div>
						<h4 class="uagb-post__title uagb-post__text">
				<a href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer">Prestashop | référencement SEO de vos produits</a>
			</h4>
						<div class='uagb-post__text uagb-post-grid-byline'>
								<time datetime="2025-11-14T10:10:32+01:00" class="uagb-post__date">
				<span class="dashicons-calendar dashicons"></span>					14 novembre 2025				</time>
							<span class="uagb-post__comment">
				<span class="dashicons-admin-comments dashicons"></span>					Aucun commentaire				</span>
						</div>
							<div class='uagb-post__text uagb-post__excerpt'>
					<p>PrestaShop | le SEO de vos produits 👉🏻 Essentiel pour assurer votre visibilité sur les...				</div>
						<div class="uagb-post__text uagb-post__cta wp-block-button">
				<a class="wp-block-button__link uagb-text-link" style="" href="https://st9ph.fr/prestashop-referencement-seo-de-vos-produits/" target="_self" rel="bookmark noopener noreferrer">Lire la suite</a>
			</div>
			
									</article>
											</div>
			


<div class="wp-block-uagb-team uagb-team__image-position-left uagb-team__align-left uagb-team__stack-tablet uagb-block-5002ab42"><img decoding="async" class="uagb-team__image-crop-circle" src="https://st9ph.fr/wp-content/uploads/2022/01/steph-150x150.png" alt="" height="100" width="100" loading="lazy"/><div class="uagb-team__content"><h4 class="uagb-team__title">St9ph</h4><span class="uagb-team__prefix">Webmaster</span><p class="uagb-team__desc">Je suis Formateur depuis 1997 et j'ai commencé ma carrière comme technicien en réseaux informatiques.  J'ai travaillé pour de grands organismes de formation : Greta, AFPA, réseau des CCI, des écoles de commerces réputées : EM Normandie, E2SE, groupes FIM et ICEP, et collaboré en Centre d'Appels chez Webhelp pendant 12 ans avec des grands comptes FAI comme Orange, Bouygues Telecom et SFR, des assureurs et des fournisseurs d'Energie comme Direct Energie (devenu Total) et EDF (devenu Engie) !</p><ul class="uagb-team__social-list"><li class="uagb-team__social-icon"><a href="https://www.facebook.com/profile.php?id=100076192144163" aria-label="facebook" target="_blank" title="" rel="noopener noreferrer"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.69 226.4 209.3 245V327.7h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.3 482.4 504 379.8 504 256z"></path></svg></a></li><li class="uagb-team__social-icon"><a href="https://www.linkedin.com/company/st9ph/" aria-label="linkedin" target="_blank" title="" rel="noopener noreferrer"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a></li></ul></div></div>
<p>L’article <a href="https://st9ph.fr/prestashop-la-fiche-produit/">Prestashop | La Fiche Produit par l&#8217;exemple</a> est apparu en premier sur <a href="https://st9ph.fr">st9ph.fr</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://st9ph.fr/prestashop-la-fiche-produit/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-000253.mp4" length="763898" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/Enregistrement-2026-01-15-104641.mp4" length="1115239" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/liste.mp4" length="302646" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/couleurs.mp4" length="241702" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/radioBouton.mp4" length="242926" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/decli.mp4" length="3371226" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/voicertool_audio_Eloise_17-01-2026_at_10_28_33_on_January_17th_2026.mp3" length="227232" type="audio/mpeg" />
<enclosure url="https://boutiq.st9ph.fr/img/cms/sweat2w-final.mp4" length="914764" type="video/mp4" />
<enclosure url="https://st9ph.fr/wp-content/uploads/2026/01/boucle-bambou.mp4" length="1931284" type="video/mp4" />

		<post-id xmlns="com-wordpress:feed-additions:1">32746</post-id>	</item>
	</channel>
</rss>
