Color Swatch selection default to none?

Shopify Partner
30 0 3

Hello, 

I have color swatches set up according to this tutorial. Everything is working great, except the problem is, certain customers are not realizing they have to select a color and are adding items to their shopping cart thinking they are going to get the color shown in the picture. All the products are made to order so this is costly to remake the items. The site is www.mybabylonia.com. ;

I am hoping to be able to change the code so that by default there is no color selected, and the must choose the color in order to add it to the cart. If anybody knows how to modify the code, it would be much appreciated! Any other suggestions are also welcomed. 

Thanks in advance for any help you can offer!

0 Likes
Shopify Partner
30 0 3

Bumping in hopes that someone may have a suggestion?

0 Likes
Highlighted
Excursionist
52 0 10

I'm also having this trouble as well. I found some stack overflow questions that lead me down a path that I thought would work, but in the end it actually broke the functionality of the swatches. We want to make it so there is no variant/options selected when first visting the page unless they had the ?variant=35345 part in the url. There has to be some way to acheive this.

Using multip linked options slector and swatches with variant images. Everything needs to play nice together and look good as well as easy to use for the customer.

Stay Cool... with Shopify. -Brian
0 Likes
Shopify Partner
30 0 3

Brian, 
I was able to hire someone to do this for me for a very reasonable price. What he did is alter the code so that the add to cart button is disabled until a swatch is selected. You can probably go to www.mybabylonia.com and go to a product page and view the source code, but I don't know enough about it to tell you what he did. 

I also came across this tutorial that explains how to make the default value of the variant dropdown say "pick an option." Perhaps similar logic can be applied to the swatches?

There really should be a straight forward solution to this, as it seems like pretty basic functionality.

Good luck!

0 Likes
Excursionist
52 0 10

Hi Julia,

Thanks for the information, I took a look at the site and pulled some scripts out to compare to what I have.  I found one particular line that needed commented out and then the default to no selection worked!

radioButton.get(0).checked = true;

That line when commented out made it so nothing was selected on page load. The second part of what I needed is to change the button text from add to cart to pick a color, pick a size, and so on. I'll be picking at the code again.  Thanks for posting this.

 

Stay Cool... with Shopify. -Brian
0 Likes
Shopify Partner
30 0 3

Glad it worked out for you! 

Not sure if there was a logistical reason behind it, but the guy I worked with just put a message next to the add to cart button that says pick a color or something similar. I am sure you saw it on the site but just pointing it out as a simple solution. If you get the button to change, I'd be curious to hear what you did!

0 Likes
Excursionist
52 0 10

We actually have the cart button text changing now, it is just without multiple linked swatch options.  It was a little easier to implement without all of the extra gear boxes.  I see that your theme is the timber theme, ours started out as the minimal theme. I have to see if there is a way to take chunks of the timber and apply it somehow into the heavily modified minimal theme.

I'll share what I find with regards to all of the gears and making the cart button text change when selecting the different option groups.

Stay Cool... with Shopify. -Brian
0 Likes
Excursionist
52 0 10

This is what I did to change the add to cart button text:

  {% if product.available and product.options.size > 1 %}
    $("#add-to-cart").addClass('disabled').attr('disabled', 'disabled');
    jQuery("#size .swatch-element").click(function() {
      $("#add-to-cart").html("Pick a Body Type").addClass('disabled').attr('disabled', 'disabled');
      $("#body-type").show();
    });
    jQuery("#body-type .swatch-element").click(function() {
      $("#add-to-cart").html("Pick a Color").addClass('disabled').attr('disabled', 'disabled');
      $("#color").show();
    });
    jQuery("#color .swatch-element").click(function() {
      $("#add-to-cart").html("Add to Cart <span class='cartico'></span>").removeClass("disabled").removeAttr("disabled");
    });
  {% endif %}

It also takes it a step further and only shows 1 option to choose at a time. Once the customer makes a selection on each option, the next one will show up.

I still am having trouble making the selection default to nothing, nothing pre-selected on page load. Someone has to have looked into this and may have a solution. I even asked Caroline about it, she is very busy and said I was on my own. I wish she could just spare a few minutes, since she did write the orginal code snippets.

If anyone can point me in the right direction, I would be very greatful, thanks!

 

Stay Cool... with Shopify. -Brian
0 Likes