Bonjour,
J’ai intégré ce code dans un liquid personnalisé pour avoir les icônes de paiement en visuel sur ma page produit :
.icon {
width: 3.125em;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
role: list;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
{%- unless shop.enabled_payment_types == empty -%}
Supported payment methods
{%- for type in shop.enabled_payment_types -%}
-
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}
{%- endunless -%}
Je souhaiterais qu’ils s’affichent comme ceci :
Merci d’avance pour votre aide précieuse.
Jules MAZET
Bonjour @Mazamarte
pouvez-vous s’il vous plaît fournir l’URL de votre magasin?
@Mazamarte
Veuillez ajouter ce css
#ProductInfo-template--15714051129578__main ul {
list-style: inherit;
margin: 0;
padding: 0;
display: flex;
align-content: center;
}
#ProductInfo-template--15714051129578__main ul li svg {
width: 70px;
height: 31px;
}
Pour les icônes c’est bon je vous remercie, en revanche la mise en page de mon texte est déformée, elle devrait être comme ça :
- Taille M
- Fabriqué en Italie
- 100% cuir véritable
- Patine sublime
- Doublure polyester
- 2 poches avant, 1 poche intérieure
De plus cette solution fonctionne pour le modèle de thème “Default product” mais pas sur un autre…
@Mazamarte
Remplacer le css précédent
.product__info-container ul {
list-style: inherit;
margin: 0;
padding: 0;
display: flex;
align-content: center;
}
.product__info-container li svg {
width: 70px;
height: 31px;
}
@Mazamarte
Veuillez fournir l’ URL de la page du produit où vous avez ajouté ce texte
Cela ne fonctionne pas pour la collection “vintage selection”
C’est parfait pour les icônes mais cela retire toute la ponctuation…
Je vous remercie pour votre aide.
@Mazamarte
ajouter ce css
.product__info-container .product__description.rte ul {
list-style: none !important;
display: inherit;
}
toujours le même problème avec les textes et la ponctuation, code actuel :
.icon {
width: 3.125em;
}
.product__info-container ul {
list-style: inherit;
margin: 0;
padding: 0;
display: flex;
align-content: center;
}
.product__info-container li svg {
width: 85px;
height: 25px;
.product__info-container .product__description.rte ul {
list-style: none !important;
display: inherit;
}
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
{%- unless shop.enabled_payment_types == empty -%}
Supported payment methods
{%- for type in shop.enabled_payment_types -%}
-
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
{%- endfor -%}
{%- endunless -%}
url : https://mazamarte.com/products/robe
@Mazamarte ajouter ce css
.product__info-container .product__description.rte ul {
list-style: none !important;
display: inherit !important;
}
