---
page-title: "Single Product"
layout: "str2"
no-page-heading: true
---

{{#> _str2-content }}

  {{! Product Main }}
  {{#> _str2-grid grid-class="gap-y-10 mb-10 md:mb-16 lg:mb-24 xl:mb-28"}}

    {{#with ../../str2.shop.product }}

      {{! Product Slider }}
      <div class="col-span-full md:col-span-7 md:pr-7 xl:pr-[70px]">
        {{> _str2-product-slider }}
      </div>
      {{! Product Slider / End }}

      {{! Product Info }}
      <div class="col-span-full md:col-span-5 xl:-ml-7">

        {{! Title }}
        <h2 class="mb-2 text-2xl uppercase font-bold tracking-tighter text-gray-900 md:mb-2 lg:mb-5 md:text-2.5xl lg:text-4xl dark:text-white">
          {{title}}
        </h2>
        {{! Title / End }}

        {{! Rating }}
        {{> _str2-rating
          rating=rating
          rating-size="lg"
          rating-class="mb-4 md:mb-6"
        }}
        {{! Rating / End }}

        {{! Price }}
        <div class="mb-2 text-2xl font-bold tracking-tight text-primary md:mb-2 lg:mb-9 md:text-2xl lg:text-4xl">
          {{../../../str2.shop.currency}}{{price}}
        </div>
        {{! Price / End }}

        {{! Excerpt }}
        <div class="mb-6 md:mb-8">
          {{excerpt}}
        </div>
        {{! Excerpt / End }}

        {{! Colors }}
        <div class="mb-6 md:mb-9">
          <h5 class="text-sm font-bold text-gray-900 tracking-tighter uppercase mb-4 lg:mb-6 dark:text-white">Select Color</h5>
          <div class="flex gap-x-5 lg:gap-x-6">

            {{! Color: Accent }}
            {{> _str2-form-checkbox-check
              id="product-color-accent"
              name="product-color"
              class="text-[#393d58] bg-[#393d58] ring-[#393d58]"
              isChecked="true"
            }}
            {{! Color: Accent / End }}

            {{! Color: Primary }}
            {{> _str2-form-checkbox-check
              id="product-color-primary"
              name="product-color"
              class="text-primary bg-primary ring-primary"
            }}
            {{! Color: Primary / End }}

            {{! Color: Gray }}
            {{> _str2-form-checkbox-check
              id="product-color-gray"
              name="product-color"
              class="text-[#ebebeb] bg-[#ebebeb] ring-[#ebebeb]"
            }}
            {{! Color: Gray / End }}

          </div>
        </div>
        {{! Colors / End }}

        {{! Options (Size, Quantity) }}
        <div class="flex gap-7.5 mb-9 lg:mb-[70px] xl:pr-[70px]">
          <div class="basis-1/2">
            {{#> _str2-form-select
              name="product-size"
              id="product-size"
              size="md"
              label="Print Size"
            }}
                {{#each sizes }}
                  <option value="{{option}}">{{label}}</option>
                {{/each}}
            {{/_str2-form-select}}
          </div>
          <div class="basis-1/2">
            {{> _str2-form-input
              type="number"
              name="product-quantity"
              id="product-quantity"
              label="Quantity"
              value="1"
            }}
          </div>
        </div>
        {{! Options (Size, Quantity) / End }}

        {{! Add To Cart }}
        <div class="flex mb-6 lg:mb-12">
          {{#> _str2-btn
            is-btn="true"
            variant="primary"
            size="md"
            type="submit"
            class="basis-full md:basis-1/2 lg:basis-2/5"
          }}
            + Add to cart
          {{/_str2-btn}}
        </div>
        {{! Add To Cart / End }}

        {{! Social Share }}
        <div class="flex gap-3">
          <a
            href="#"
            class="relative flex w-10 h-10 items-center justify-center text-xs text-white transition-colors bg-social-facebook hover:bg-social-facebook/90"
          >
            <svg class="w-3 h-3" fill="currentColor">
              <use xlink:href="{{root}}assets/img/social-icons.svg#facebook"></use>
            </svg>
          </a>
          <a
            href="#"
            class="relative flex w-10 h-10 items-center justify-center text-xs text-white transition-colors bg-social-twitter hover:bg-social-twitter/90"
          >
            <svg class="w-3 h-3" fill="currentColor">
              <use xlink:href="{{root}}assets/img/social-icons.svg#twitter"></use>
            </svg>
          </a>
        </div>
        {{! Social Share / End }}

      </div>
      {{! Product Info / End }}

    {{/with}}

  {{/_str2-grid }}
  {{! Product Main / End }}

  {{> _str2-product-tabs reviews=../str2.shop.product.reviews}}

{{/_str2-content}}