Product Variants

Hi, I have a product detail page that has a dropdown form option to chose the box size for the product being detailed. I have setup my 2 variants for the product within Perch Admin. How then do I pass my two variants into the First Option, Second option on the form's dropdown list.

product detail template

         <div class="blog-image-wrapper">
            <h2 class="shop-product-heading"><perch:shop id="title" type="text" /></h2><img src="<perch:shop type="image" id="prodImage1" />" class="blog-feature-image"></div>

                <div class="gallery-flex-wrap">

                </div>

          <div class="blog-post-wrapper">
            <perch:shop id="description" type="text" striptags="true" /> 
          </div>
          <div class="shopify-wrapper">
            <div class="shopify-buy-price">
              <div class="text-block"><span class="price"><perch:shop id="price" type="shop_currency_value" /></span> inc VAT</div>

            </div>
            <div>
              <form id="shop-form" name="shop-form">
                <select id="Box-Size" name="Box-Size" class="shopify-select w-select">
                <option value="">Choose Box Size</option><option value="First">First Choice</option>
                <option value="Second">Second Choice</option></select></form>
              <div class="w-form-done">
                <div>Thank you! Your submission has been received!</div>
              </div>
              <div class="w-form-fail">
                <div>Oops! Something went wrong while submitting the form.</div>
              </div>
            </div><a href="#" class="button buy-now w-button">add to cart</a></div>

product detail page (master page)

<?php perch_layout('shop.header'); ?>

  <div class="brand shop-hero">
    <div class="container">
      <div class="logo-wrapper"><img src="../images/lir-master-light-horiz2.png" srcset="../images/lir-master-light-horiz2-p-1080.png 1080w, ../images/lir-master-light-horiz2-p-1600.png 1600w, ../images/lir-master-light-horiz2.png 1687w" sizes="(max-width: 479px) 72vw, (max-width: 991px) 40vw, 32vw" class="logo"></div>
    </div>
  </div>
  <div class="container"></div>
  <div class="product">
    <div class="container">
      <div class="blog-posting w-row">
        <div class="left-col w-col w-col-4">

                 <?php perch_categories([
                'template' => 'category.html',
                'category' => 'shop/'.perch_get('category'),
          ]
            ); ?>
            <a href="/shop/index.php" class="button b2b w-button">back to shop</a>
          <div class="share">
            <h3>share this post</h3>
          </div>
          <div class="sharethis">
            <div class="sharethiscode w-embed">
              <div class="sharethis-inline-share-buttons"></div>
            </div>
          </div>
        </div>
        <div class="right-col w-col w-col-8">

             <?php perch_shop_product(perch_get('product'), [
                  'template' => 'products/product_detail.html'
            ]);?>



        </div>
      </div>
    </div>
  </div>
<?php perch_layout('blog.footer'); ?>