Website Building » Shopify » How Do I Get a Product Variant on Shopify?

How Do I Get a Product Variant on Shopify?

Last updated on January 8, 2023 @ 5:47 pm

Product variants are a great way to offer your customers different options for the same product. For example, if you sell t-shirts, you might offer variants for size and color.

Shopify makes it easy to add product variants and manage them from your admin. In this article, we’ll cover how to add product variants and how to style them on your website using HTML.

How To Add Product Variants

Adding product variants is easy with Shopify. Simply go to your admin, click on “Products”, and then click on the product you want to add a variant to.

Next, click on “Variants” and then “Add Variant”.

Enter the variant details such as name, price, SKU, and weight. You can also choose whether or not the variant is taxable and set a inventory quantity. Once you’re done, click “Save Variant”.

PRO TIP: If you are considering adding a product variant to your Shopify store, be aware that this can be a complex and time-consuming process. There are a number of things to consider before taking on this task, including whether or not your Shopify theme supports product variants, if you have the necessary coding skills to make the necessary changes, and if you have the time and patience to see the project through to completion.

How To Style Product Variants

You can style product variants using HTML. For example, let’s say you have a t-shirt with two variants: size and color. You can use the following HTML code to style the variant options:


<select id="size">
  <option value="small">Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>


<select id="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>


<button type="button" onclick="addToCart()">Add To Cart</button>

  <script type="text/javascript">
    function addToCart() {

      var size = document.getElementById('size').value;
      var color = document.getElementById('color').value;

      window.location = '/cart?size=' + size + '&color=' + color;


Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.