HOW TO: Change Size Radio Button Selection to a Box Option (Not Dropdown)

Highlighted
Not applicable
1393 0 0

Hello Forum Goers,

I would like to change the size selection that came with my theme from the radio-button option to that of a box with a S, M, and L inside where the customer can click for the size, and not a drop-down. Also, instead of the options going down, I would like to make it the options pan horizontally. This is helpful for us as when we have shoes, there are so many options it makes the page longer which we dont like. And we really do not want a drop down. Any advice on this is greatly appreciated.

Thank you

Chris

0 Likes
Highlighted
Not applicable
1393 0 0

Also, how can you (grey out) the out of stock options so you can see the size option was there but you can't lick on it and you know it is out of stock.

Thank you

Chris

0 Likes
Highlighted
Not applicable
1393 0 0

@ Shopify experts... please help on this topic.

0 Likes
Highlighted
Shopify Partner
1235 5 87

Hi Chris,

Here is how you can display your variants using a radio button instead of drop downs:

<div class="product-variants">
	<ul>{% for variant in product.variants %}
		<li class="{% cycle 'odds': 'odd', 'even' %}">
			{% if variant.available %}<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" {% if forloop.first %}checked="checked"{% endif %} />
				<label for="radio_{{ variant.id }}" class="radio">
					<strong>{{ variant.title | escape }}</strong> for <span class="bold-blue">{{ variant.price | money }}</span>
					{% if variant.price < variant.compare_at_price %}<del>{{ variant.compare_at_price | money }}</del>{% endif %}
				</label>
			{% else %}
				<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" disabled="disabled" />
				<label for="radio_{{ variant.id }}" class="radio">
					<strong>{{ variant.title }}</strong> is temporarily unavailable
				</label>
			{% endif %}
		</li>
	{% endfor %}</ul>
</div>

Make it flow horizontally using CSS.

Gavin.

www.bookthatapp.com
2 Likes
Highlighted
Not applicable
1393 0 0

Hi Gavin,

Thank you for getting back to me. Just to be clear...here is my product.liquid code (where would I add the code you mentioned above?) Also, what and where do I change CSS to make it flow horizontally? I'm pretty new to all this stuff.

 

Thanks,

<div id="product-photos" class="grid_5 alpha">
    <ul> 
    	{% for image in product.images %}
		{% if forloop.first %}
<div class="bigimage">

    <li>
    	<a href={{ image | product_img_url: 'original' }} class ='cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, showTitle:false, zoomWidth:400">
        <img src="{{ image | product_img_url: 'large' }}" alt='{{ product.title }}' title="{{ product.title }}" />
        </a>
    </li>
</div>

    {% endif %}
<div class="thumbs">
   <li style="padding: 0px 0px 0 0"><a href={{ image | product_img_url: 'original' }} class='cloud-zoom-gallery' title='{{ product.title }}'
        	rel="useZoom: 'zoom1', smallImage: '{{ image | product_img_url: 'large' }}' ">
        <img src="{{ image | product_img_url: 'small' }}" alt ="{{ product.title }}"/></a>
   </li>
</div>

    {% endfor %} 

	</ul>

</div>

<div id="product-description" class="grid_7 omega">

  
	<h1>{{ product.title | escape }} </br><div class="current-price">{{ variant.price | money }}</div></h1>  
	
    <div id="productnav" class="grid_5 omega">
   {% if collection %}            
      {% if collection.previous_product %}
        {{ '< Previous Product' | link_to: collection.previous_product }}
      {% endif %}
      {% if collection.next_product %}
        {{ '| Next Product >' | link_to: collection.next_product }}
      {% endif %}
   {% endif %}

</div>
        </br>
        

        </br>
  {% if product.available %}    

  {% if product.variants.size > 1 and product.options.size == 1  %}  
  <form action="/cart/add" method="post">
    <div id="product-variants">
      <div class="selector-wrapper clearfix"> 
        <label class="product-options">{{ product.options[0] }}</label>

        <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){ 
          var first_variant_price = $("ul li input[type='radio']:checked").attr("data-price"); 
          $(".current-price").text( first_variant_price );
          $("input[type='radio']").click(function() {
            var variant_price = $(this).attr('data-price');
            $(".current-price").text( variant_price);
          });
        });
        </script>

        <ul>
          {% for variant in product.variants %}
          <li>
            <input type="radio" class="radio-button" data-price="{{ variant.price | money }}" id="{{ variant.id }}" value="{{ variant.id }}" name="id" {% if forloop.first %} checked {% endif %} >
            <label class="radio-title" for="{{ variant.id }}">{{ variant.title }}</label>
          </li>
          {% endfor %}
        </ul>
      </div> 
    </div>
    
    <br />
      <label for="quantity">Quantity</label>
<select name="quantity">
        <option>1</option>
        <option>2</option>
        <option>3</option>

</select>
    
		<br /><br />
		<input type="image" src="{{ 'purchase.png' | asset_url }}" name="add" value="Purchase" id="purchase" />
<br />


      
  </form>

  {% elsif product.variants.size > 1  %}     
  <form action="/cart/add" method="post">
    <div id="product-variants">
      <select id="product-select" name='id'>
        {% for variant in product.variants %}
        <option value="{{ variant.id }}">{{ variant.title }}</option>
        {% endfor %}
      </select>   
    </div><!-- product variants -->  
		<div class="current-price">
			<div class="variant-price price">
        <div class="price-field"></div>
      </div>
		</div>
        
		<input type="image" src="{{ 'purchase.png' | asset_url }}" name="add" value="Purchase" id="purchase" />
		
  </form>


  {% else %}  
  <form action="/cart/add" method="post">
	  <div id="product-variants">
    </div><!-- product variants -->  
    <input  type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />
		<div class="current-price">{{ product.price | money_with_currency }}</div>
		<input type="image" src="{{ 'purchase.png' | asset_url }}" name="add" value="Purchase" id="purchase" />
		

  </form>
  {% endif %}


  {% else %}
  <p><strong>This product is temporarily unavailable</strong></p>
  {% endif %}

	<div style="clear: both;"></div>


      {% if settings.show_tabs  %} 	
	<div class="desc"><h2>Product details</h2>

                <ul class="tabs">
		    <li><a href="#tab1"><h3>Description</h3></a></li>
		    {% unless settings.returns == blank %}<li><a href="#tab2"><h3>Returns</h3></a></li>{% endunless %}
		    {% unless settings.delivery == blank %}<li><a href="#tab3"><h3>Delivery</h3></a></li>{% endunless %}
		    {% unless settings.size == blank %}<li><a href="#tab4"><h3>Size Guide</h3></a></li>{% endunless %}
		</ul>

		<div class="tab_container">
		    <div id="tab1" class="tab_content">
		       {{ product.description }}
		    </div>

		    <div id="tab2" class="tab_content">
		       <p>{{ settings.returns }}</p>
                         
		    </div>
		    <div id="tab3" class="tab_content">
		       <p>{{ settings.delivery }}</p>
                          
		    </div>
                    <div id="tab4" class="tab_content">
		       {{ settings.size }}
		    </div>

		</div>
        </div>

     {% else %}

	<div class="desc"><h2>Product details</h2>
         {{ product.description }}

        </div>

     {% endif %}
     
{% include 'willet-shopconnection' %}
<div id="_willet_buttons_app"></div>




<div class="clear"></div>

</div>


<script id="expressrex" src="http://shopify.directededge.com/widget/related_products?product={{product.id}}" type="text/javascript" charset="utf-8"></script>

 

 

0 Likes
Highlighted
Not applicable
1393 0 0

I had input the code you gave me and it made the size option look the same as I have it now just with the price next to it. I was hoping to change the look to look more like the first image I added to the post (with a box and S, M or L for the size to go inside the box. See image. Thanks

0 Likes
Highlighted
Shopify Partner
1235 5 87

Hi Chris,

The good news is that this is relatively simple to do if you know HTML/CSS and a little liquid.

The bad news is that you have one of those themes where the developer has clearly never heard of the DRY principle (a key software principle) so you need to change this in a couple of places. If you want to tackle it yourself look for where it says:

<div id="product-variants">

To avoid some frustration you may want to post on the job forum: http://forums.shopify.com/categories/11

Re horizontal lists, I did a quick google search. This looks like a good article to learn about this technique: http://mirificampress.com/permalink/the_amazing_li

Gavin.

www.bookthatapp.com
0 Likes
Highlighted
Not applicable
1393 0 0

Hey Gavin,

I had a few modelo especials, partly in your honor for your great responses and partly to help ease the pain of figuring this out. I did get closer, but am still running into issues with the radio button feature. I want to get rid of the dot and just be able to click the box to buy. The image attached, the top is what actually is working however I want it to look like the bottom row, which is not live just regular html coded (not liquid). Your reply comes with much anticipation as I will base my next beer run on your answer, so you have alot to live up to. 

Thanks again,

Chris

0 Likes
Highlighted
Not applicable
1393 0 0

Hello @ Anyone,

I have made the code work, however I now am not sure how to get the border to change when it is selected and deselect when you choose another option. Any ideas?

Thank you!

Chris

0 Likes
Highlighted
New Member
1 0 0

Thanks guys for your answers.
Your code is working well, I just have one issue with the price (It's only visual).

When I choose a variant and add it to basket, it works, it's the right price in the basket.

The problem is that the price doesn't update automatically on the page.

I'm on the Debut theme and wondered if I have to add a condition like :

 

if Variant 
  Display Variant price
Else
  Display Original Price

But the price is on another file (Snippet) : `product-price` and I don't know if it's possible to get the data from the radios

0 Likes