Big Cartel Theme Support

How do I label the product option selector?

How do I label the product option selector?

Method 1: Adding a simple text heading to your product option selector

The easiest way to label the product option selector on your product page is to add the text via custom CSS. To do this, navigate to your custom style coding area - see Where do I add custom style code? - and add the following CSS:

/* Label for product page option selector */
.product-form .form-item:first-child:before {
	content: "Select an option:";
	display: block;
}

The content attribute defines the text for the label, so we can edit this as needed. For example, if our product options were all sizes, we might change the code to:

/* Label for product page option selector */
.product-form .form-item:first-child:before {
	content: "Choose your size:";
	display: block;
}

Note that the text must remain within double quotes and all other coding must remain unaltered.

Since we are using standard CSS here, we can add further attributes to customise the style of the label. For example, to increase the font size and change the colour we could add to our CSS as follows:

/* Label for product page option selector */
.product-form .form-item:first-child:before {
	content: "Choose your size:";
	display: block;
	font-size: 18px;
	color: #cc0000;
}

Don’t forget to click Done and Save to apply your changes permanently. Refer to the CSS tutorial for more information on editing custom CSS.

Method 2: Adding a label within the drop down selector and disabling add to cart

This method covers how to add a label within the drop down option selector - that becomes the default selected option - and then prevent the customer from adding the product to cart until they have selected a true product option. This is the best method for forcing the customer to acknowledge and select a product option. Because this method requires a drop down option selector, it will not have any effect if you have enabled the List product variations product page theme option.

To apply this method we must use JavaScript. As explained in our article How do I add custom JavaScript to my Big Cartel shop?, JavaScript can be added within your page content using the Insert Content method. In this case, we want to add our JavaScript to the product page and it must be after the add-to-cart interface is rendered. For this reason, we select the x-ic-after-product insert content method.

So, unless you already have a x-ic-after-product page, the first step is to create a new custom page and name it x-ic-after-product

For more information on the insert content method and creating your x-ic-after-product page, see An introduction to the Insert Content method.

IMPORTANT

Switch to HTML edit mode before proceeding - refer How do I switch to HTML edit mode?

We then add the following JavaScript to our x-ic-after-product page content. If you already have content in your x-ic-after-product page, you can create a new blank line after that content and add the JavaScript there.

<script>
+function(c){
var selectText="Select an option:",
errorText="You must select an option before adding to cart!",
a=c(".product-form .form-item.select select"),b=c(".product-form .form-item.primary button");a.length&&(b.attr("disabled","disabled").parent().click(function(){b.is("[disabled]")&&(a.parent().addClass("has-error"),errorText&&alert(errorText))}),a.prepend('<option value="">'+selectText+"</option>").on("change",function(){b.removeAttr("disabled");a.parent().removeClass("has-error")}).children("option").first().attr("disabled","disabled").attr("selected","selected"))}(jQuery);
</script>

The selectText variable (on the second line of script) defines the text for the label, so we can edit this as needed. For example, if our product options were all colours, we might change the code to:

<script>
+function(c){
var selectText="Select a colour:",
errorText="You must select an option before adding to cart!",
a=c(".product-form .form-item.select select"),b=c(".product-form .form-item.primary button");a.length&&(b.attr("disabled","disabled").parent().click(function(){b.is("[disabled]")&&(a.parent().addClass("has-error"),errorText&&alert(errorText))}),a.prepend('<option value="">'+selectText+"</option>").on("change",function(){b.removeAttr("disabled");a.parent().removeClass("has-error")}).children("option").first().attr("disabled","disabled").attr("selected","selected"))}(jQuery);
</script>

Note that the text must remain within double quotes and all other coding must remain unaltered.

In the same way, we can edit the errorText variable (on the third line of script), which defines the text for the alert that will pop up if the customer tries to add the product to cart before selecting an option. If you do not want to have a pop up alert at all, you can set the errorText variable to an empty string by removing all text but leaving the double quotes (i.e. empty double quotes):

<script>
+function(c){
var selectText="Select a colour:",
errorText="",
a=c(".product-form .form-item.select select"),b=c(".product-form .form-item.primary button");a.length&&(b.attr("disabled","disabled").parent().click(function(){b.is("[disabled]")&&(a.parent().addClass("has-error"),errorText&&alert(errorText))}),a.prepend('<option value="">'+selectText+"</option>").on("change",function(){b.removeAttr("disabled");a.parent().removeClass("has-error")}).children("option").first().attr("disabled","disabled").attr("selected","selected"))}(jQuery);
</script>

Saving changes and testing

Once you have finished adding the JavaScript, click the Done and Save links in your Big Cartel edit area to apply the changes to your shop.

It is very important that you test your product page add-to-cart functionality immediately, on multiple devices, to ensure that your customers can still purchase products in your shop. If you see any issues created by your product page script, the quickest way to correct things is to go to your x-ic-after-product page, rename it to x x-ic-after-product and save it. This will disable the page so your add-to-cart functionality is restored and you can then review your code and correct it in your own time. When you are ready to re-apply the JavaScript, change the x x-ic-after-product page name back to x-ic-after-product and test your product pages again.

AarcadeHow do I label the product option selector?