drabbytux of Archived Theme Support
5/14/2018 - 7:27 PM

Product Variant labels outside the option selector

Someone, someday, may ask for the labels to be moved outside of the variant selectors.

labels-outside-variants.md
content_copyfile_download
  • Rendered
  • Source

Theme:Boundless

Version: 3.1.0

Design time: 5

Description: Move the labels outside of the dropdown variants on the product page.

What you have

What you want

What you do

Open theme.js.liquid and at the bottom of the file paste the following code:

$(document).ready(function() {
  arr_labels = $(".selector-wrapper").find('label');
  for (i = 0; i < arr_labels.length; i++) {
    selector_wrapper = $(arr_labels[i]).parent();
    label_item = $(arr_labels[i]).detach();
    label_item.insertBefore(selector_wrapper);
  }
});

Additonal comments: Voila. A strange request completed!