Customize Variant selector appearance

StephDStephD Posts: 2Member
Hi everyone, I'm also kind of new to eCom customization, can anyone tell me how I can access the files behind this bit of code so I can customize the design of matrix variant selection? (the part in bold)

<div class="product-option row">
        <div class="col-md-12">
          {{ product | html_product_configure | raw }}
        </div>
</div>

The original drop-down list is terrible looking, I'd like to go for color dots or something like this.
I've changed many things through the CSS but I can't find a way to access the PHP/Twig code...
Thank you

4 comments

  • michaelsteelemichaelsteele Posts: 41Member
    Bumping this
  • JoeyJoey Posts: 130Administrator, Moderator, Lightspeed Staff moderator
    The product configure snippet is provided as-is by the platform and can not be modified:
     {{ product | html_product_configure | raw }} 
    There are, however, ways to make the variant selector look different. The easiest way is to apply CSS to style the select box.

    If you want to go further you can create your own select list or individual boxes per option. Each variant has its own URL, basically the product URL + Variant ID

    First you need to get a list of the variants:
    {% for variant in product.variants %}

    And check if there are more then 1 variant:
    {% if product.variants |length >1 %}

    Then create a list of available Variants with a link to the specific variant:
    <ul class="buttons-or-list">
      {% for variant in product.variants %}
         <li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">
           <a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">
              {{ variant.title | split(':')|last }}
           </a>
          </li>
       {% endfor %}
    </ul>

    You can style the above list any way you want, or create div's, endless options.

    If you have multi-attribute variants (matrices) you will need to use the split filter:
    <ul class="buttons-or-list">
    {% for variant in product.variants %}
    <li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">
    <a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">
    {% if 'Color:' in variant.title and 'Size:' in variant.title %}
    {% set splittitle = variant.title | split('","')[0] %}
    {{ splittitle | trim('"Color: ') }}
    {% set splittitle = variant.title | split('"Size: ')[1] %}
    {{ splittitle[:-1] }}
    {% elseif 'Color' in variant.title and 'Size' not in variant.title %}
    {{ variant.title | split(': ')|last }}
    {% elseif 'Size' in variant.title and 'Color' not in variant.title %}
    {{ variant.title | split(': ')|last }}
    {% endif %}
    </a>
    </li>
    {% endfor %}
    </ul>

    You need to modify the code above if you use different attributes.

    Hope this helps!
    eCom Support Team
    Lightspeed HQ
  • ljorikljorik Posts: 4Member

    i have a question regarding this, i'd like to modify the variant selector drop down menu but i'd like to grey out sold variants, how exactly do i accomplish this in the code, i tried multiple things with no succes yet

  • JoeyJoey Posts: 130Administrator, Moderator, Lightspeed Staff moderator

    @ljorik The above example with the customized list can do this, notice the unavailable class:

    class="{% if not variant.stock.available %}unavailable
    


    eCom Support Team
    Lightspeed HQ
Sign In or Register to comment.