drabbytux

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {

drabbytux

layout	title	sidebar_title	description	nav
default	Make 'Pick an option' the default choice in product drop-down menus	Make 'Pick an option' the default choice for drop-downs	Quick customization to your theme to let customers know there are variants.	group products

drabbytux

{% comment %}
  See https://docs.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs
{% endcomment %}

{% unless product.selected_variant %}
  {% if product.variants.size > 1 %}
    <script>
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {

drabbytux

$(document).ready(function() {
   if( typeof(productOptions ) != "undefined" ){
     for(i=0;i<productOptions.length;i++) {
       if (['a', 'e', 'i', 'o', 'u'].indexOf(productOptions[i][i].substr(0, 1).toLowerCase()) !== -1 ) { 
       $('.single-option-selector:eq('+ i +')')
       .filter(function() {
         return $(this).find('option').length > 1
       })
       .prepend('<option value="">Pick an ' + productOptions[i][i] + '</option>')
       .val('')

drabbytux

<script>
   var productOptions = [];
  {% for option in product.options %}
    var optionObj = {};
    optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
    productOptions.push(optionObj);
  {% endfor %}
</script>

drabbytux

---

layout: default title: Recommend related products to your customers sidebar_title: Recommend related products description: Learn about related products and recommendations.

difficulty: intermediate

supported: false

nav: group: products

drabbytux

jQuery(function($) {
  $('form[action="/cart/add"]').submit(function() {
    var formIsValid = true;
    var message = "Please fill this out and you will be able to add the item to your cart.";
    $(this).find('[name^="properties"]').filter('.required, [required="required"]').each(function() {
      $(this).removeClass('error');
      if (formIsValid && $(this).val() == '') {
        formIsValid = false;
        message = $(this).attr('data-error') || message;
        $(this).addClass('error');

drabbytux

layout	title	description	nav
default	Limit cart quantities to in-stock items	You can prevent your customers from adding larger quantities to the cart than you have in stock at your online Shopify store.	group products

drabbytux

layout	title	sidebar_title	description	nav
default	Add an agree to terms and conditions checkbox	Add a terms and conditions checkbox	Add an Agree to terms and conditions checkbox to the cart page of your online Shopify store.	group cart

drabbytux

1. Copy this code and paste it at the bottom of your Assets/vendor.js file, or if your theme doesn't have a vendor.js file, place it at the very top of the theme.js file. (At the moment, POP requires this to be added at the very bottom of the theme.js file, followed by the next bit).

2. Add this to the bottom of the Assets/theme.js file:

Shopify.Cart.ShippingCalculator.show( {
  submitButton: theme.strings.shippingCalcSubmitButton,
  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
  moneyFormat: theme.strings.shippingCalcMoneyFormat