// IDs store EU Shopify

var client = ShopifyBuy.buildClient({
  apiKey: 'a2c6e5f840cdaa5b2527ecffbddd7a62',
  domain: 'circular-ring.myshopify.com',
  appId: 6
});


const buttonStyle = {
  quantity: {
    'margin-top': '0!important',
  },
  quantityInput: {
    'border-radius': 0
  },
  button: {
		"width": "100% !important",
		"height": "50px",
    "background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
    "border-radius": "40px",
    ":hover": {
      "background-color": "#ff6a1f"
    },
    ":focus": {
      "background-color": "#ff6a1f"
    },
  },
  cart: {
    "border-radius": "40px"
  },
};

const plusStyle = {
  button: {
		"width": "50px !important",
		"height": "50px",
    		"font-size": "30px",
		"padding": "0px",
    "background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
    "border-radius": "50px",
    ":hover": {
      "background-color": "#ff6a1f"
    },
    ":focus": {
      "background-color": "#ff6a1f"
    },
  },
  cart: {
    "border-radius": "50px"
  },
};
 

const shopifyOptions = {
  toggle: {
  	styles: {
    	toggle: {
    		"background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
        "border-radius": "3px",
        ":hover": {
    		"background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
        },
        ":focus": {
   		 "background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
        },
      }
    },
  },
 	"cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "button": {
    		"background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
		    "border-radius": "40px",
        ":hover": {
    		"background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
        },
        ":focus": {
    		"background": "linear-gradient(82deg, rgba(255,82,63,1) 0%, rgba(255,127,63,1) 100%);",
        }
      }
    }
  }
}

// Extra shell Silver 6


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023652843805, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-6'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});


// Extra shell Silver 7


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653302557, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-7'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Silver 8


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653335325, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-8'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Silver 9


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653368093, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-9'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },

      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Silver 10


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653400861, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-10'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Silver 11


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653433629, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-11'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Silver 12


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653466397, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-12'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Silver 13


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653499165, // if there is a variant id
 		 node: document.getElementById('shell--color-silver-13'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

  styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 6


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023652811037, // if there is a variant id
 		 node: document.getElementById('shell--color-black-6'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 7


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653040413, // if there is a variant id
 		 node: document.getElementById('shell--color-black-7'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 8


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653073181, // if there is a variant id
 		 node: document.getElementById('shell--color-black-8'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 9


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653105949, // if there is a variant id
 		 node: document.getElementById('shell--color-black-9'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 10


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653138717, // if there is a variant id
 		 node: document.getElementById('shell--color-black-10'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 11


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653171485, // if there is a variant id
 		 node: document.getElementById('shell--color-black-11'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 12


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653204253, // if there is a variant id
 		 node: document.getElementById('shell--color-black-12'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Black 13


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653237021, // if there is a variant id
 		 node: document.getElementById('shell--color-black-13'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 6


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023652909341, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-6'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 7


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653826845, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-7'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 8


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653859613, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-8'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 9


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653892381, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-9'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 10


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653925149, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-10'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 11


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653957917, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-11'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 12


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653990685, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-12'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Rose Gold 13


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023654023453, // if there is a variant id
 		 node: document.getElementById('shell--color-rosegold-13'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 6


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023652876573, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-6'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 7


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653564701, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-7'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 8


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653597469, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-8'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 9


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653630237, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-9'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 10


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653663005, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-10'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 11


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653695773, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-11'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 12


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653728541, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-12'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Extra shell Gold 13


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015183773981, //the id of the first product
 variantId: 44023653761309, // if there is a variant id
 		 node: document.getElementById('shell--color-gold-13'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "100% !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },

styles: buttonStyle,

      text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },


      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Add an extra cable in related products


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015278145821, //the id of the first product
 		 node: document.getElementById('extraUsbBtn'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "50px !important",
	"height": "50px !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      styles: buttonStyle,

   text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },



      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});

// Add an extra charger in related products


var ui = ShopifyBuy.UI.init(client);
ui.createComponent('product', {
 id: 8015277555997, //the id of the first product
 		 node: document.getElementById('extraChrgerBtn'),
		  options: {
    ...shopifyOptions,
    	product: {
	"width": "50px !important",
	"height": "50px !important",
     	 events: {
          addVariantToCart: function(product) {
          
       	 }
      },
      contents: {
        variantTitle: true,
        quantity: true,
        options: false,
        quantity: false,
        img: false,
        price: false,
        title: false,
        variantTitle: false,
      },
      templates: {
        quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">'  +
        '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' +
        '</div>'
      },
      styles: buttonStyle,

   text: {
        button: Weglot.getCurrentLang() == "en" ? "Add to cart" : document.getElementsByClassName("text-block-197").item(0).innerText
      },



      viewData: {
        optionName: function () {
          return function (text, render) {
            var key = render(text).trim();
            if (colors[key]) {
              return '';
            }
            return sizes[key];
          }
        },
        styleAttr: function () {
          return function (text, render) {
            var key = render(text).trim();
            var styleAttr = '';
            if (key) {
              styleAttr = 'style="background-color: ' + colors[key] + '"';
            }
            return styleAttr;
          }
        }
      },
    }
  }
});