FROM CACHE - fr_header

Design du sélecteur de variante (CSS)

sam587
Visiteur
3 0 0

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:

helpshopifytheme.PNG

 

à ça:

helpshopifyresolved.PNG 

 

 

 

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 🙂

 

2 RÉPONSES 2

JonathanD
Shopify Partner
12 0 3

Bonjour Sam,

 

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

sam587
Visiteur
3 0 0

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..