Design du sélecteur de variante (CSS)

Bonjour,

C’est la première fois que je pose une question ici malheureusement avec toutes mes recherches sur google ou dans le code de mon thème je n’ai pas réussi à comprendre comment changer cet élément.

Je n’ai pas de bac+5 en css/html mais je comprends la plupart et arrive à me démerder à ma sauce pour obtenir le résultat visuel souhaité souvent.

Aujourd’hui je vous sollicite, si quelqu’un sait comment passer de ça:

à ça:

J’ai utilisé comme base le thème début et voici le code correspondant à mon sélecteur de variante (d’après ce que j’ai compris, corrigez-moi si nécessaire)

<div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>

Merci d’avance :slight_smile:

Bonjour Sam,

Peux-tu partager le lien du site exemple sur lequel tu veux t’inspirer

Bonjour,

Merci pour ton intérêt, voici le site montré en capture: https://fittrack.fr/products/fittrack-balance-connectee

Ils utilisent shopify également et d’après commerce inspector ils n’utilisent pas d’app de design ou produits avancés..