Shopify Question posted in
The Shopify help center can be found here.

How can I change the arrow on a <select> tag? – Shopify

I would like to change the standard arrow on a button with options to an svg icon. The first image is how it looks now and the second is how I would like it to look. I would like to style the actual icon on the button and not the style of the options that will appear under it once clicked.

Image of how it appears now
Image of how I would like it to appear

HTML/Liquid:

<select name="id" id="ProductSelect" class="product-single__variants">
  {% for variant in product.variants %}
    {% if variant.available %}
       <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
    {% else %}
       <option disabled="disabled">
         {{ variant.title }} - {{ 'products.product.sold_out' | t }}
       </option>
    {% endif %}
  {% endfor %}
</select>

SVG File:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 64.57"><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M4,36.28H66.34L44.89,57.74a4,4,0,1,0,5.66,5.66L78.83,35.11h0a4,4,0,0,0,.5-.61c.07-.1.11-.21.17-.31a3.85,3.85,0,0,0,.2-.37,3.65,3.65,0,0,0,.13-.41c0-.11.08-.22.1-.33a4,4,0,0,0,.08-.79h0a4,4,0,0,0-.08-.77c0-.12-.07-.23-.1-.35a3.58,3.58,0,0,0-.12-.4,4,4,0,0,0-.21-.4c-.05-.1-.1-.2-.16-.29a3.88,3.88,0,0,0-.5-.61L50.54,1.17a4,4,0,1,0-5.66,5.66L66.34,28.28H4a4,4,0,0,0,0,8Z"/></g></g></svg>
Tags:

2

Answers


  1. 0

    I wanted to the same thing before. Here’s what worked for me. 

    select-dropdown {
     -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background: url('path/to/file.jpg') no-repeat right center !important; 
    background-color: white !important;
}
    Login or Signup to reply.
  2. 0

    You can use an svg as a css background image like so:

    .product-single__variants { 
 background: url("data:image/svg+xml;utf8,{{ icon.svg | asset_url | replace: '"', "'" }}")  no-repeat;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search