---
page-title: "Shop"
layout: "str1"
breadcrumbs: [
  {
    label: "Shop",
    link: "_str1-shop.html"
  },
  {
    label: "Single Product"
  }
]
---

{{#> _str1-content }}

  <div class="grid grid-cols-12 gap-x-5 md:gap-x-6 lg:gap-x-7.5 gap-y-16">

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

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

      {{! Product Content }}
      <div class="col-span-full md:col-span-6 lg:-ml-7.5">

        {{! Product Info }}
        <div class="mb-16 md:mb-20 lg:mb-24">
          <div class="flex justify-between items-baseline mb-5 lg:mb-8">
            {{! Title }}
            <h2 class="text-2xl font-bold text-gray-900 md:text-2xl lg:text-4xl dark:text-white lg:leading-none">
              {{title}}
            </h2>
            {{! Title / End }}
            {{! Price }}
            <div class="text-2xl font-bold text-accent md:text-2xl lg:text-[32px] lg:leading-none">
              {{../../str1.shop.currency}}{{price}}
            </div>
            {{! Price / End }}
          </div>
          {{! Rating }}
          {{> _str1-rating
            rating=rating
            rating-size="lg"
            rating-class="mb-6 md:mb-12"
            label="5.0 out of 2 reviews"
          }}
          {{! Rating / End }}
          {{! Excerpt }}
          <div class="mb-6 lg:mb-10">
            {{excerpt}}
          </div>
          {{! Excerpt / End }}
          {{! Options (Size, Quantity) }}
          <div class="grid grid-cols-2 gap-7.5 mb-9 lg:mb-14 xl:pr-12.5">
            <div class="basis-1/2">
              {{#> _str1-form-select
                name="product-size"
                id="product-size"
                label="Print size"
              }}
                {{#each sizes }}
                  <option value="{{option}}">{{label}}</option>
                {{/each}}
              {{/_str1-form-select}}
            </div>
            <div class="basis-1/2">
              {{#> _str1-form-select
                name="product-color"
                id="product-color"
                label="Frame color"
              }}
                {{#each colors }}
                  <option value="{{option}}">{{label}}</option>
                {{/each}}
              {{/_str1-form-select}}
            </div>
            <div class="basis-1/2">
              {{> _str1-form-input
                type="number"
                name="product-quantity"
                id="product-quantity"
                value="1"
                label="Quantity"
              }}
            </div>
          </div>
          {{! Options (Size, Quantity) / End }}
          {{! Add To Cart }}
          <div class="flex mb-10 lg:mb-20">
            {{#> _str1-btn
              is-btn="true"
              variant="accent"
              size="md"
              type="submit"
              class="basis-full md:basis-1/2 lg:basis-1/3"
            }}
              + Add to the bag
            {{/_str1-btn}}
          </div>
          {{! Add To Cart / End }}
          {{! Social Share }}
          <div class="flex gap-4 text-sm leading-none">
            <span class="uppercase font-bold text-gray-500">Share:</span>
            <a
              href="#"
              class="text-gray-900 dark:text-white transition-colors hover:text-accent dark:hover:text-accent"
            >
              <svg class="w-3 h-3" fill="currentColor">
                <use xlink:href="{{root}}assets/img/social-icons.svg#facebook"></use>
              </svg>
            </a>
            <a
              href="#"
              class="text-gray-900 dark:text-white transition-colors hover:text-accent dark:hover:text-accent"
            >
              <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 }}

        {{! Product Tabs }}
        {{> _str1-product-tabs }}
        {{! Product Tabs / End }}

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



    {{/with}}
  </div>

{{/_str1-content}}