🗃️ Collection Boutique

retour à la liste

⌨️ Page principale

/* Taille du titre */
.nested-category-title {
font-size: 26px!important;}

/* Taille de la barre latérale */
.nested-category-tree-wrapper {
font-size: 25px!important;}

/* Réduire la marge du haut (si titre activé) */
.nested-category-title
{margin-bottom: -1vh!important;}

/* Cacher le mini-trait */
.nested-category-title:after {
color: #fff;}

/* Ajouter au panier bouton Tertiaire plutôt que Principal */
À mettre dans “Site web” > “Outils pour site web” > “Injection de code” > “Footer” :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('body.view-list .sqs-add-to-cart-button').attr('class','sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--tertiary'); }) </script>

/* Mettre des produits en avant */
Suivre le tuto en ligne de Will Myers ↗

⌨️ pageS PRODUITS

/* Images sur 2 colonnes */
Suivre le tuto en ligne de Paul ↗

/* Effet accordéon sur la description produit */
Suivre le tuto en ligne de Will Myers ↗

/* Rétrécir le sélecteur de quantité */
input[type="number"] {
padding-top: 10px !important;
padding-bottom: 10px !important;}

/* Rétrécir le sélecteur de variante */
.variant-select-wrapper {
min-height:40px!important}

/* Customiser le sélecteur de variante (version bouton) */
.variant-option .sqs-button-element--secondary {
background:#ccc!important;
border: 2px solid #000!important;
border-radius:0!important;
font-size: 0.9rem!important;
text-transform: uppercase;}
/* Ajouter un effet au survol */
.variant-option .sqs-button-element--secondary:hover {
background:#000!important;
color: #fff!important;
box-shadow: 5px 5px 15px rgba(0,0,0,0.2)}
/* Ajouter un effet sur la variante sélectionnée */
.ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:cheacked+label {
background: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
border-radius: 3rem !important;}

/* Changer les quantités par défaut */
Voir le super tuto de Paul sur le forum

/* Taille bouton Ajouter au panier */
.sqs-add-to-cart-button  
{font-size: 12px!important;}

/* Cacher prix quand produit épuisé */
.product-meta:has(.sold-out-status) .product-price {
display: none !important;}

/* Cacher message Klarna */
.product-detail .product-meta .product-payment-method-messaging { display:none!important;}

/* Renvoi du bouton d’ajout au panier vers un autre produit (avec ajout au panier du premier produit) */
/* À ajouter dans un bloc Code dans la section “Informations supplémentaires du produit” */
<script>
(function() {
var cartBtns = document.querySelectorAll(".sqs-add-to-cart-button:not(.cart-added)");
var i;
for (i = cartBtns.length - 1; i >= 0; i--) {
new MutationObserver(function(mutations) {
if (mutations[0].target.classList.contains("cart-added")) {
window.location.href = "/nom-page";
}}).observe(cartBtns[i], {
attributes: true,
attributeFilter: ["class"]
}); }})();
</script>

/* Renvoi du bouton d’ajout au panier d’un produit vers un autre lien */
D’après le super tuto de Tuanphan
/* Étape 1 - Ajouter le lien souhaité dans un bloc Bouton dans la section “Informations supplémentaires du produit” */
/* Étape 2 - Ajouter ce code dans un bloc Code juste en dessous du bloc bouton */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
$('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper');})</script>
<style>
.sqs-add-to-cart-button {
display: none !important;}
div.sqs-add-to-cart-button-wrapper .button-block * {
opacity: 1 !important;}
</style>

/* Ajout d’un deuxième bouton */
/* À ajouter dans un bloc Code dans la section “Informations supplémentaires du produit” */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function() {
$("<a class='checkoutbutton' href='/nom-page'>VOTRE TEXTE →</a>").insertAfter(".sqs-add-to-cart-button-wrapper");});
</script>

/* Marges Avis sur les produits */
.reviewsSection {
padding-top: 1vh!important;
padding-bottom: 1vh!important}

/* Changer la couleur de l’étoile */
svg.star path {
fill: #ffd700!important;}

/* Rétrécir titre "Vous aimerez aussi" */
.product-related-products-title {
font-size: 1em}

/* Cacher 5ème produit “Vous aimerez aussi” */
.product-related-products .product-list-container .product-list-item:nth-child(n+5) {
display: none;}

/* Passer le “Vous aimerez aussi” en 5 colonnes */
.product-related-products [data-product-list-layout="grid"] {
--product-list-num-columns-desktop: 5 !important;}

⌨️ Icône panier

/* Ajouter une couleur d’arrière-plan (survol) */
.header-actions-action--cart:hover .icon--cart { 
background-color: yellow!important }

/* Changer la couleur de l’icône (survol) */
.header-actions-action--cart:hover .icon--cart {
fill: red!important; stroke: red!important }

/* Changer la couleur des quantités (survol) */
.header-actions-action--cart:hover .sqs-cart-quantity {
color: red!important } 

/* Effet de mouvement (survol) */
.header-actions-action--cart:hover .icon{
transform: translatey(-5px) }