Inclure produits dans article de blog

[Benjamin35]

Salut ! J'aimerais simplement savoir comment inclure un lien d'un produit dans mon article de blog pour favoriser l'accès ! Merci d'avance !

[Nass]

Bonjour @Benjamin35 !

Voilà une question qui intéressera sûrement le reste de la communauté ! Je serai ravi de répondre à toutes vos questions concernant l’optimisation de votre blog.

Afin de mieux comprendre votre situation, j'aurais besoin de quelques informations :

• Pour quelles raisons souhaitez-vous ajouter un lien vers votre produit ? Avez-vous reçu des retours de vos visiteurs ou de vos clients à ce sujet, et si oui lesquels ?
• Quel type de produits vendez-vous ?
• S’agit-il d’une nouvelle boutique que vous venez de créer, ou bien votre activité a déjà été lancée ?

La rédaction d’articles de blog peut véritablement vous apporter un regain de visibilité et de trafic au niveau de votre boutique en ligne. 

Vous pouvez effectivement modifier un article de blog en insérant un lien hypertexte que vous pourrez attribuer à un mot ou groupe de mots. Pour ce faire, rendez-vous sur Boutique en ligne > Articles de blog, puis sélectionnez l’article que vous souhaitez modifier :

Il faudra ensuite sélectionner le texte auquel vous souhaitez ajouter un lien, puis cliquer sur l'icône Insérer le lien ci-dessous :

Enfin, saisissez le lien vers votre produit ainsi que le titre de celui-ci dans les cases appropriées, puis cliquez sur le bouton Insérer un lien > Enregistrer pour valider :

Si ces options ne correspondent pas à ce que vous recherchez, n'hésitez pas à me donner plus de détails concernant vos besoins. Je serai heureux d'étudier avec vous d’autres solutions !

[SebastienHenry]

Bonjour Benjamin,

Effectivement c'est une bonne question et ce n'est pas très intuitif sur Shopify d'avoir une insertion de produits dans les articles de blog.

Connais tu un peu le HTML/CSS et Javascript ? J'ai développé un code que tu pourras facilement adapté pour tes produits.

Je vais essayer de te détailler au mieux la procédure que j'ai trouvé. L'idée est d'aller d'afficher un :

<div class="blog-product-grid" product-handle="LE-HANDLE-DE-TON-PRODUIT"></div>

LE-HANDLE-DE-TON-PRODUIT est a remplacer par celui de ton produit, que tu peux trouver dans ton url après /products/ ! Par exemple : https://ton-couteau.fr/products/santoku-zen-bokashi-kanetsune, le handle sera "santoku-zen-bokashi-kanetsune" !



Ensuite, tu as un code javascript qui va chercher les informations de ton produit automatiquement :
<script>

const p = document.querySelectorAll(".blog-product-grid");
p.forEach(function(p) {
const ph = p.getAttribute("product-handle");
const description = document.getElementsByClassName("description-box");
description.setAttribute("style", "display:none");

jQuery.getJSON('/products/' + ph + '.js', function(p) {

const al = document.createElement("a");
al.classList.add("product-card");

const id = document.createElement("div");
id.classList.add("product-image");

const i = document.createElement("img");

i.setAttribute("src", p.featured_image);
id.appendChild(i);

const ts = document.createElement("h4");
ts.classList.add("product-title");
ts.textContent = p.title;
id.appendChild(ts);

const ps = document.createElement("span");
ps.classList.add("product-price");
ps.textContent = p.price/100 + "€";
id.appendChild(ps);

al.appendChild(id);
p.appendChild(al);
});
});
</script>

L'idéal est d'enregistrer ce code dans un nouveau fichier de ton thème comme product-article.js et de l'insérer dans ton template d'article qui bien souvent est article.liquid grâce à : <script src="{{ 'products-article.js' | asset_url }}" defer="defer"></script> ! Cela permet de le charger sur tous les articles et de n'avoir à faire cette opération qu'une fois.

Ensuite il ne reste plus qu'à customiser l'affichage de ton produit avec du CSS :
<style><!--

.blog-product-grid {
display: flex;
}

.blog-product-grid .logo {
height: inherit;
width: 50px;
position: absolute;
right: 20px;
top: 20px;
}

.price-container, .reviews-container {
width: 100%;
text-align: center;
font-size: 16px;
font-weight: 800;
color: #800313;
}

.price-container {
border: 2px solid #800313;
border-radius: 10px;
display: flex;
}

.product-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
margin: 1rem auto;
text-decoration: none;
color: #000;
background-color: #fff;
position: relative;
overflow: hidden;
}

.product-card::before, .product-card::after {
content: "";
position: absolute;
border: 5px solid #c93c3ca8;
width: 60px;
height: 60px;
}

.product-card::before {
border-bottom: none;
border-right: none;
top: 0;
left: 0;
}

.product-card::after {
border-top: none;
border-left: none;
bottom: 0;
right: 0;
}

.product-image {
max-width: 300px;
max-height: 400px;
display: inline-block;
position: relative;
}

.product-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s ease-out;
}

.product-image:hover::before {
opacity: 1;
}

.product-info p {
margin: 0;
text-align: justify;
}

.product-price, .product-title {
color: #800313;
margin: auto;
}

.product-title {
text-align: center;
font-size: 16px;
font-weight: 900;
padding-top: 15px;
}

.article-review {
background-color: #c93c3c;
padding: 15px;
border-radius: 10px;
color: white;
}

.view-product {
border: 1px solid #800313;
border-radius: 5px 0 0 5px;
padding: 10px 15px;
background-color: #800313;
color: #fff;
text-align: center;
width: fit-content;
margin-left: auto;
cursor: pointer;
}

.view-product:hover {
background-color: #7b0000;
}

.description-box {
border: 1px solid #800313;
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
}--></style>

Ce qui te donne finalement en résultat :

A toi maintenant de l'adapter en fonction de ce que tu souhaites en graphisme.

J'espère que ca a pu t'aider,

Cordialement,

Nicolas

[Nass]

Bonjour @SebastienHenry, et merci pour votre commentaire qui aidera sûrement beaucoup de marchands !

J’ajouterais simplement qu’avant d’effectuer la moindre modification de votre code, il est très important de dupliquer votre thème. Cela vous permettra ainsi d’avoir toujours la copie de l'ancienne version du thème en votre possession en cas d’erreur ou de résultat inattendu. Nous avons également un guide complet pour retourner à la version précédente du code de votre thème.

En espérant que cette solution fonctionnera pour vous @Benjamin35, n’hésitez pas à le confirmer en postant votre retour ici même !

[arnaud-kinkin]

Hello la communauté !

Il n'existe pas de plugin pour faire ça ?

[Nass]

Bonjour @arnaud-kinkin !

En faisant quelques recherches, vous pourriez utiliser une application telle que Pro Blogger, Blog Product Spotlight, ou encore Bloggle. 

Je reste disponible en cas de besoin.

[tdandreas]

Hello à tous,

En espérant que mes investigations aideront le plus grand nombre.

J'ai le meme besoin que toi et je tourne en rond avec deux scripts : le mien et une version du tien. A chaque fois j'ai le meme probleme, le panier ne se met pas à jour automatiquement alors meme que les valeurs du panier dans la console (F12) sont bien à jour. Je dois actualiser la page CTRL+R pour que les données s'incrémentent.

Savez vous d'où vient le probleme ? quelqu'un pourrait nous aider à achever ce code 😄

GRAND MERCI !

Mon theme est Dawn.

voici les codes que je travaille : 

---------------------------------------------------------------- 1er code

<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
Produit Vedette
<style><!--
.featured-product {
max-width: 300px;
margin: auto;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.featured-product img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
}

.featured-product h2 {
font-size: 1.5em;
margin-bottom: 10px;
}

.featured-product p {
font-size: 1.2em;
margin-bottom: 10px;
}

.featured-product select,
.featured-product button {
width: 100%;
padding: 10px;
font-size: 1em;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 10px; /* Bordure arrondie */
}

.featured-product button {
background-color: #f87c56; /* Couleur personnalisée */
color: white;
cursor: pointer;
}

.featured-product button:hover {
background-color: #e67e22; /* Couleur de survol */
}

--></style>
<div id="featured-product"></div>
<!-- Include the ShopifyBuy library -->
<script src="https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var client = ShopifyBuy.buildClient({
domain: 'je masque le domaine',
storefrontAccessToken: 'je masque le numero',
});

function fetchProductDetails(productId) {
client.product.fetch(productId).then(function(product) {
var featuredProduct = `
<div class="featured-product">
<h2>${product.title}</h2>
<img src="${product.images[0].src}" alt="${product.title}" />
<select id="variant-select" name="variant-select">
${product.variants.map(variant => `
<option value="${variant.id}" data-price="${variant.priceV2.amount}">${variant.title} - ${variant.priceV2.amount} ${variant.priceV2.currencyCode}</option>
`).join('')}
</select>
<button id="add-to-cart-button">Ajouter au panier</button>
</div>
`;

document.getElementById('featured-product').innerHTML = featuredProduct;

document.getElementById('variant-select').addEventListener('change', function(event) {
var selectedOption = event.target.options[event.target.selectedIndex];
var price = selectedOption.getAttribute('data-price');
var currency = product.variants[0].priceV2.currencyCode;
document.getElementById('price').innerText = `Prix: ${price} ${currency}`;
});

document.getElementById('add-to-cart-button').addEventListener('click', function() {
var selectedVariantId = document.getElementById('variant-select').value;
console.log('Selected Variant ID:', selectedVariantId); // Debug: Affiche l'ID de la variante sélectionnée
addToCart(selectedVariantId);
});
}).catch(function(error) {
console.error('Error fetching product details:', error);
});
}

function convertGidToNumeric(gid) {
return gid.split('/').pop();
}

function addToCart(variantId) {
var numericVariantId = convertGidToNumeric(variantId);
console.log('Numeric Variant ID:', numericVariantId); // Debug: Affiche l'ID numérique de la variante

fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
items: [{
id: numericVariantId,
quantity: 1
}]
})
}).then(response => {
if (response.ok) {
console.log('Product successfully added to cart'); // Debug: Confirmation de l'ajout au panier

// Vérifier l'état du panier après l'ajout
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
console.log('Cart contents:', cart); // Debug: Affiche le contenu du panier

// Ouvrir le tiroir du panier après avoir mis à jour le contenu
setTimeout(() => {
const cartDrawer = document.querySelector('cart-drawer');
if (cartDrawer) {
cartDrawer.open();
console.log('Cart drawer opened'); // Debug: Confirmation de l'ouverture du panier
} else {
console.error('Cart drawer element not found.');
}
}, 500);
}).catch(error => {
console.error('Error fetching cart:', error);
});

} else {
return response.json().then(data => {
console.error('Failed to add to cart:', data);
});
}
}).catch(error => {
console.error('Error adding to cart:', error);
});
}

var productId = 'gid://shopify/Product/8176869376268';
fetchProductDetails(productId);
});
</script>

----------------------------------------------------------------2eme (le tien que j'adapte)

<div class="blog-product-grid" product-handle="the-jasmine"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const productGrids = document.querySelectorAll(".blog-product-grid");

productGrids.forEach(function(productGrid) {
const productHandle = productGrid.getAttribute("product-handle");

fetch(`/products/${productHandle}.js`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(productData => {
const productCard = document.createElement("div");
productCard.classList.add("product-card");

const productImageContainer = document.createElement("div");
productImageContainer.classList.add("product-image");

const productImage = document.createElement("img");
productImage.setAttribute("src", productData.featured_image);
productImageContainer.appendChild(productImage);

const productInfoContainer = document.createElement("div");
productInfoContainer.classList.add("product-info");

const productTitle = document.createElement("h4");
productTitle.classList.add("product-title");
productTitle.textContent = productData.title;
productInfoContainer.appendChild(productTitle);

const variantSelect = document.createElement("select");
variantSelect.classList.add("variant-select");

productData.variants.forEach(variant => {
const option = document.createElement("option");
option.value = variant.id;
option.textContent = `${variant.title} - ${(variant.price / 100).toFixed(2)} €`;

if (!variant.available) {
option.textContent += " (En rupture de stock)";
option.disabled = true;
option.style.textDecoration = "line-through";
}

variantSelect.appendChild(option);
});

const addToCartButton = document.createElement("button");
addToCartButton.classList.add("add-to-cart-button");
addToCartButton.textContent = "Ajouter au panier";

addToCartButton.addEventListener('click', function() {
const selectedVariantId = variantSelect.value;
addToCart(selectedVariantId);
});

productInfoContainer.appendChild(variantSelect);
productInfoContainer.appendChild(addToCartButton);

productCard.appendChild(productImageContainer);
productCard.appendChild(productInfoContainer);
productGrid.appendChild(productCard);
})
.catch(error => console.error('Error fetching product details:', error));
});

function addToCart(variantId) {
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
items: [{
id: variantId,
quantity: 1
}]
})
}).then(response => {
if (response.ok) {
console.log('Product successfully added to cart');
updateCart();
} else {
return response.json().then(data => {
console.error('Failed to add to cart:', data);
});
}
}).catch(error => {
console.error('Error adding to cart:', error);
});
}

function updateCart() {
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
console.log('Cart contents:', cart);
// Vous pouvez également mettre à jour l'affichage du panier ici si nécessaire
})
.catch(error => {
console.error('Error fetching cart:', error);
});
}
});
</script>

<style>
.blog-product-grid {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.product-card {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
margin: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background-color: #fff;
max-width: 800px;
width: 100%;
flex-direction: column; /* Par défaut, présentation verticale */
}

.product-image {
text-align: center;
margin-bottom: 20px; /* Espace par défaut */
}

.product-image img {
max-width: 100%; /* S'assure que l'image ne dépasse pas le conteneur */
width: 150%; /* Agrandit l'image de 50% */
height: auto;
border-radius: 10px;
}

.product-info {
flex: 2;
display: flex;
flex-direction: column;
justify-content: center; /* Centre verticalement le contenu */
text-align: center;
width: 100%;
}

.product-title {
font-size: 1.5em;
margin-bottom: 5px;
}

.variant-select,
.add-to-cart-button {
width: 100%;
padding: 10px;
font-size: 1em;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 10px;
}

.add-to-cart-button {
background-color: #f87c56;
color: white;
cursor: pointer;
}

.add-to-cart-button:hover {
background-color: #e67e22;
}

/* Styles pour les écrans plus larges */
@media (min-width: 768px) {
.product-card {
flex-direction: row; /* Présentation horizontale pour les écrans plus larges */
}

.product-image {
flex: 1;
margin-right: 20px;
margin-bottom: 0;
}

.product-info {
flex: 2;
text-align: left; /* Alignement à gauche pour une meilleure lisibilité sur les écrans plus larges */
}
}

/* Styles pour les écrans mobiles pour réduire l'espace entre l'image et le titre */
@media (max-width: 767px) {
.product-image {
margin-bottom: 10px; /* Réduit de moitié l'espace sur mobile */
}
}
</style>

---

@SebastienHenry  a écrit :

Bonjour Benjamin,

Effectivement c'est une bonne question et ce n'est pas très intuitif sur Shopify d'avoir une insertion de produits dans les articles de blog.

Connais tu un peu le HTML/CSS et Javascript ? J'ai développé un code que tu pourras facilement adapté pour tes produits.

Je vais essayer de te détailler au mieux la procédure que j'ai trouvé. L'idée est d'aller d'afficher un :

<div class="blog-product-grid" product-handle="LE-HANDLE-DE-TON-PRODUIT"></div>

LE-HANDLE-DE-TON-PRODUIT est a remplacer par celui de ton produit, que tu peux trouver dans ton url après /products/ ! Par exemple : https://ton-couteau.fr/products/santoku-zen-bokashi-kanetsune, le handle sera "santoku-zen-bokashi-kanetsune" !



Ensuite, tu as un code javascript qui va chercher les informations de ton produit automatiquement :
<script>

const p = document.querySelectorAll(".blog-product-grid");
p.forEach(function(p) {
const ph = p.getAttribute("product-handle");
const description = document.getElementsByClassName("description-box");
description.setAttribute("style", "display:none");

jQuery.getJSON('/products/' + ph + '.js', function(p) {

const al = document.createElement("a");
al.classList.add("product-card");

const id = document.createElement("div");
id.classList.add("product-image");

const i = document.createElement("img");

i.setAttribute("src", p.featured_image);
id.appendChild(i);

const ts = document.createElement("h4");
ts.classList.add("product-title");
ts.textContent = p.title;
id.appendChild(ts);

const ps = document.createElement("span");
ps.classList.add("product-price");
ps.textContent = p.price/100 + "€";
id.appendChild(ps);

al.appendChild(id);
p.appendChild(al);
});
});
</script>

L'idéal est d'enregistrer ce code dans un nouveau fichier de ton thème comme product-article.js et de l'insérer dans ton template d'article qui bien souvent est article.liquid grâce à : <script src="{{ 'products-article.js' | asset_url }}" defer="defer"></script> ! Cela permet de le charger sur tous les articles et de n'avoir à faire cette opération qu'une fois.

Ensuite il ne reste plus qu'à customiser l'affichage de ton produit avec du CSS :
<style><!--

.blog-product-grid {
display: flex;
}

.blog-product-grid .logo {
height: inherit;
width: 50px;
position: absolute;
right: 20px;
top: 20px;
}

.price-container, .reviews-container {
width: 100%;
text-align: center;
font-size: 16px;
font-weight: 800;
color: #800313;
}

.price-container {
border: 2px solid #800313;
border-radius: 10px;
display: flex;
}

.product-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
margin: 1rem auto;
text-decoration: none;
color: #000;
background-color: #fff;
position: relative;
overflow: hidden;
}

.product-card::before, .product-card::after {
content: "";
position: absolute;
border: 5px solid #c93c3ca8;
width: 60px;
height: 60px;
}

.product-card::before {
border-bottom: none;
border-right: none;
top: 0;
left: 0;
}

.product-card::after {
border-top: none;
border-left: none;
bottom: 0;
right: 0;
}

.product-image {
max-width: 300px;
max-height: 400px;
display: inline-block;
position: relative;
}

.product-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s ease-out;
}

.product-image:hover::before {
opacity: 1;
}

.product-info p {
margin: 0;
text-align: justify;
}

.product-price, .product-title {
color: #800313;
margin: auto;
}

.product-title {
text-align: center;
font-size: 16px;
font-weight: 900;
padding-top: 15px;
}

.article-review {
background-color: #c93c3c;
padding: 15px;
border-radius: 10px;
color: white;
}

.view-product {
border: 1px solid #800313;
border-radius: 5px 0 0 5px;
padding: 10px 15px;
background-color: #800313;
color: #fff;
text-align: center;
width: fit-content;
margin-left: auto;
cursor: pointer;
}

.view-product:hover {
background-color: #7b0000;
}

.description-box {
border: 1px solid #800313;
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
}--></style>

Ce qui te donne finalement en résultat :

A toi maintenant de l'adapter en fonction de ce que tu souhaites en graphisme.

J'espère que ca a pu t'aider,

Cordialement,

Nicolas

---

vv

---

@SebastienHenry  a écrit :

Bonjour Benjamin,

Effectivement c'est une bonne question et ce n'est pas très intuitif sur Shopify d'avoir une insertion de produits dans les articles de blog.

Connais tu un peu le HTML/CSS et Javascript ? J'ai développé un code que tu pourras facilement adapté pour tes produits.

Je vais essayer de te détailler au mieux la procédure que j'ai trouvé. L'idée est d'aller d'afficher un :

<div class="blog-product-grid" product-handle="LE-HANDLE-DE-TON-PRODUIT"></div>

LE-HANDLE-DE-TON-PRODUIT est a remplacer par celui de ton produit, que tu peux trouver dans ton url après /products/ ! Par exemple : https://ton-couteau.fr/products/santoku-zen-bokashi-kanetsune, le handle sera "santoku-zen-bokashi-kanetsune" !



Ensuite, tu as un code javascript qui va chercher les informations de ton produit automatiquement :
<script>

const p = document.querySelectorAll(".blog-product-grid");
p.forEach(function(p) {
const ph = p.getAttribute("product-handle");
const description = document.getElementsByClassName("description-box");
description.setAttribute("style", "display:none");

jQuery.getJSON('/products/' + ph + '.js', function(p) {

const al = document.createElement("a");
al.classList.add("product-card");

const id = document.createElement("div");
id.classList.add("product-image");

const i = document.createElement("img");

i.setAttribute("src", p.featured_image);
id.appendChild(i);

const ts = document.createElement("h4");
ts.classList.add("product-title");
ts.textContent = p.title;
id.appendChild(ts);

const ps = document.createElement("span");
ps.classList.add("product-price");
ps.textContent = p.price/100 + "€";
id.appendChild(ps);

al.appendChild(id);
p.appendChild(al);
});
});
</script>

L'idéal est d'enregistrer ce code dans un nouveau fichier de ton thème comme product-article.js et de l'insérer dans ton template d'article qui bien souvent est article.liquid grâce à : <script src="{{ 'products-article.js' | asset_url }}" defer="defer"></script> ! Cela permet de le charger sur tous les articles et de n'avoir à faire cette opération qu'une fois.

Ensuite il ne reste plus qu'à customiser l'affichage de ton produit avec du CSS :
<style><!--

.blog-product-grid {
display: flex;
}

.blog-product-grid .logo {
height: inherit;
width: 50px;
position: absolute;
right: 20px;
top: 20px;
}

.price-container, .reviews-container {
width: 100%;
text-align: center;
font-size: 16px;
font-weight: 800;
color: #800313;
}

.price-container {
border: 2px solid #800313;
border-radius: 10px;
display: flex;
}

.product-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
margin: 1rem auto;
text-decoration: none;
color: #000;
background-color: #fff;
position: relative;
overflow: hidden;
}

.product-card::before, .product-card::after {
content: "";
position: absolute;
border: 5px solid #c93c3ca8;
width: 60px;
height: 60px;
}

.product-card::before {
border-bottom: none;
border-right: none;
top: 0;
left: 0;
}

.product-card::after {
border-top: none;
border-left: none;
bottom: 0;
right: 0;
}

.product-image {
max-width: 300px;
max-height: 400px;
display: inline-block;
position: relative;
}

.product-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s ease-out;
}

.product-image:hover::before {
opacity: 1;
}

.product-info p {
margin: 0;
text-align: justify;
}

.product-price, .product-title {
color: #800313;
margin: auto;
}

.product-title {
text-align: center;
font-size: 16px;
font-weight: 900;
padding-top: 15px;
}

.article-review {
background-color: #c93c3c;
padding: 15px;
border-radius: 10px;
color: white;
}

.view-product {
border: 1px solid #800313;
border-radius: 5px 0 0 5px;
padding: 10px 15px;
background-color: #800313;
color: #fff;
text-align: center;
width: fit-content;
margin-left: auto;
cursor: pointer;
}

.view-product:hover {
background-color: #7b0000;
}

.description-box {
border: 1px solid #800313;
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
}--></style>

Ce qui te donne finalement en résultat :

A toi maintenant de l'adapter en fonction de ce que tu souhaites en graphisme.

J'espère que ca a pu t'aider,

Cordialement,

Nicolas

---