Partagez de vrais témoignages du terrain. Laissez vos clients voir comment les cavaliers du quotidien font confiance à Draw It Out® — directement depuis votre propre site web.
Il s'agit d'un widget en direct, à mise à jour automatique, qui présente de vrais cavaliers utilisant les produits Draw It Out® dans l'arène, à l'écurie et sur la route. Il est entièrement réactif, léger et s'affiche parfaitement sur n'importe quel site.
Collez ce code là où vous souhaitez que les témoignages apparaissent (page d'accueil, page produit ou barre latérale) :
<iframe
src="https://drawliniment.com/pages/real-rider-stories"
width="100%"
height="1200"
frameborder="0"
style="border: none; overflow: hidden;"></iframe>🛠 Fonctionne avec Shopify, WordPress, Wix, Squarespace, BigCommerce, et plus encore.
Nous pouvons personnaliser votre intégration avec votre logo, un message d'introduction personnalisé ou même des cavaliers locaux de votre région.
Envoyez-nous un e-mail à support@drawliniment.com et nous vous aiderons à l'installer.
Déposez une carte produit Draw It Out® sécurisée pour votre marque sur votre site en quelques secondes. Elle est réactive, légère et facile à personnaliser. Utilisez la version HTML sans JS, JS universel ou Liquid Shopify ci-dessous.
Astuce : gardez le bouton qui pointe vers votre PDP en premier, et le lien « En savoir plus » vers Draw It Out® en second.
Réactif jusqu'à 680px de large ; s'adapte automatiquement aux téléphones.
Collez ceci dans votre page. Remplacez BUY_URL par l'URL de votre page produit. Facultatif : remplacez l'image par votre propre image PDP.
<!-- Carte Revendeur Draw It Out® (Sans JS) -->
<style>
.dio-card{--dio:#78be20;display:grid;grid-template-columns:96px 1fr;gap:14px;border:1px solid #e6efe5;border-radius:14px;padding:14px;background:#fff;align-items:center;max-width:680px}
.dio-card img{width:96px;height:96px;object-fit:contain;border-radius:10px;border:1px solid #f0f5ef;background:#fafdfa}
.dio-meta h4{margin:2px 0 4px;font-size:1.05rem}
.dio-meta p{margin:0;color:#586063;font-size:.95rem}
.dio-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dio-cta{padding:8px 12px;border-radius:10px;border:2px solid var(--dio);text-decoration:none;font-weight:700}
.dio-cta.primary{background:var(--dio);color:#fff}
.dio-cta.ghost{color:var(--dio);background:#fff}
.dio-badge{display:inline-block;font-size:.78rem;padding:4px 8px;background:#eef8ea;color:#2a6e11;border:1px solid #d8f0cf;border-radius:999px}
@media (max-width:520px){ .dio-card{grid-template-columns:1fr} .dio-card img{width:100%;height:auto}}
</style>
<div class="dio-card" role="group" aria-label="Carte produit Draw It Out Gel 16oz">
<img alt="Draw It Out Gel 16oz Haute Puissance"
src="https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg">
<div class="dio-meta">
<span class="dio-badge">Sans sensation • Inodore • Prêt à envelopper</span>
<h4>Draw It Out® Gel — 16oz Haute Puissance</h4>
<p>Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.</p>
<div class="dio-ctas">
<a class="dio-cta primary" href="BUY_URL">Acheter chez ce revendeur</a>
<a class="dio-cta ghost" href="https://drawliniment.com/pages/draw-it-out-gel-16oz">En savoir plus</a>
</div>
</div>
</div>Collez les deux blocs. Modifiez les valeurs data-* pour que le widget pointe vers vos URL et votre image.
<!-- Carte Revendeur Draw It Out® (JS Universel) -->
<div class="dio-widget"
data-title="Draw It Out® Gel — 16oz Haute Puissance"
data-desc="Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles."
data-buy="https://VOTRE-DOMAINE.exemple/produit/draw-it-out-16oz"
data-learn="https://drawliniment.com/pages/draw-it-out-gel-16oz"
data-img="https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg"
data-accent="#78be20"></div><style>
.dio-card{--dio:var(--accent,#78be20);display:grid;grid-template-columns:96px 1fr;gap:14px;border:1px solid #e6efe5;border-radius:14px;padding:14px;background:#fff;align-items:center;max-width:680px}
.dio-card img{width:96px;height:96px;object-fit:contain;border-radius:10px;border:1px solid #f0f5ef;background:#fafdfa}
.dio-meta h4{margin:2px 0 4px;font-size:1.05rem}
.dio-meta p{margin:0;color:#586063;font-size:.95rem}
.dio-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dio-cta{padding:8px 12px;border-radius:10px;border:2px solid var(--dio);text-decoration:none;font-weight:700}
.dio-cta.primary{background:var(--dio);color:#fff}
.dio-cta.ghost{color:var(--dio);background:#fff}
.dio-badge{display:inline-block;font-size:.78rem;padding:4px 8px;background:#eef8ea;color:#2a6e11;border:1px solid #d8f0cf;border-radius:999px}
@media (max-width:520px){ .dio-card{grid-template-columns:1fr} .dio-card img{width:100%;height:auto}}
</style>
<script>
(function(){
var el = document.querySelector('.dio-widget');
if(!el) return;
var t=el.dataset.title||'Draw It Out® Gel — 16oz Haute Puissance';
var d=el.dataset.desc||'Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.';
var buy=el.dataset.buy||'#';
var learn=el.dataset.learn||'https://drawliniment.com/pages/draw-it-out-gel-16oz';
var img=el.dataset.img||'https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg';
var accent=el.dataset.accent||'#78be20';
el.innerHTML = '<div class="dio-card" style="--accent:'+accent+'" role="group" aria-label="Carte '+t+'">'
+'<img alt="'+t+'" src="'+img+'" loading="lazy">'
+'<div class="dio-meta">'
+'<span class="dio-badge">Sans sensation • Inodore • Prêt à envelopper</span>'
+'<h4>'+t+'</h4>'
+'<p>'+d+'</p>'
+'<div class="dio-ctas">'
+'<a class="dio-cta primary" href="'+buy+'">Acheter chez ce revendeur</a>'
+'<a class="dio-cta ghost" href="'+learn+'">En savoir plus</a>'
+'</div>'
+'</div>'
+'</div>';
})();
</script>Créez un extrait nommé dio-card.liquid, collez le code, puis affichez-le dans une section Liquid personnalisée. Modifiez buy_url si nécessaire.
{% comment %} Carte Revendeur Draw It Out® (Liquid) {% endcomment %}
{% assign buy_url = buy_url | default: 'https://VOTRE-BOUTIQUE.myshopify.com/products/draw-it-out-16oz' %}
<style>
.dio-card{--dio:#78be20;display:grid;grid-template-columns:96px 1fr;gap:14px;border:1px solid #e6efe5;border-radius:14px;padding:14px;background:#fff;align-items:center;max-width:680px;margin:8px 0}
.dio-card img{width:96px;height:96px;object-fit:contain;border-radius:10px;border:1px solid #f0f5ef;background:#fafdfa}
.dio-meta h4{margin:2px 0 4px;font-size:1.05rem}
.dio-meta p{margin:0;color:#586063;font-size:.95rem}
.dio-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.dio-cta{padding:8px 12px;border-radius:10px;border:2px solid var(--dio);text-decoration:none;font-weight:700}
.dio-cta.primary{background:var(--dio);color:#fff}
.dio-cta.ghost{color:var(--dio);background:#fff}
.dio-badge{display:inline-block;font-size:.78rem;padding:4px 8px;background:#eef8ea;color:#2a6e11;border:1px solid #d8f0cf;border-radius:999px}
@media (max-width:520px){ .dio-card{grid-template-columns:1fr} .dio-card img{width:100%;height:auto}}
</style>
<div class="dio-card" role="group" aria-label="Carte produit Draw It Out Gel 16oz">
<img alt="Draw It Out Gel 16oz Haute Puissance"
src="https://cdn.shopify.com/s/files/1/1668/4655/products/draw-it-out-r-horse-liniment-16oz-gel-draw-it-out-r--1.jpg">
<div class="dio-meta">
<span class="dio-badge">Sans sensation • Inodore • Prêt à envelopper</span>
<h4>Draw It Out® Gel — 16oz Haute Puissance</h4>
<p>Pas de picotement. Pas d'odeur. Reste où vous le mettez — conçu pour des routines propres et adaptées aux spectacles.</p>
<div class="dio-ctas">
<a class="dio-cta primary" href="{{ buy_url }}">Acheter chez ce revendeur</a>
<a class="dio-cta ghost" href="https://drawliniment.com/pages/draw-it-out-gel-16oz">En savoir plus</a>
</div>
</div>
</div>{% render 'dio-card', buy_url: 'https://VOTRE-BOUTIQUE.myshopify.com/products/draw-it-out-16oz' %}#78be20 dans le CSS ou définissez data-accent dans le JS universel.src= par votre propre image produit si vous préférez.BUY_URL (par exemple, ?utm_source=dealer-site).Oui. Utilisez la version HTML sans JS (Option A) dans un bloc HTML standard. Pour WordPress, vous pouvez également coller la version JS universel dans un bloc HTML personnalisé.
Oui, modifiez le titre, la description et les étiquettes des boutons directement dans l'extrait. Gardez le lien En savoir plus pointant vers la page d'informations Draw It Out®.
Ajustez la largeur/hauteur de l'img, ou supprimez les tailles fixes pour lui permettre de s'étendre en pleine largeur. La mise en page se réduit à une seule colonne sur les téléphones automatiquement.
Non. Tout est intégré pour la vitesse et la fiabilité. Vous pouvez échanger l'URL de l'image avec votre propre CDN si vous le souhaitez.
© Draw It Out®. Pas un médicament. Non destiné à diagnostiquer, traiter, guérir ou prévenir une maladie. Toujours suivre les règles actuelles des spectacles et consulter votre vétérinaire pour toute question médicale.
We build every product for real riders who care as much as we do. No burn, no sting, no nonsense. Just clean, sensation-free relief built for real horses, real barns, and repeatable routines.
From barn aisle to show ring, Draw It Out® stands for one simple promise. Modern Performance, Proven Calm.
Pick the fastest next step. If you already know what you need, jump straight to the right lane.
!