zz-shopify-components 0.12.0 → 0.12.1-beta.1

package/sections/zz-product-buy-now.liquid

@@ -0,0 +1,329 @@
+{% schema %}
+{
+  "name": "Product Buy Now",
+  "settings": [
+    {
+      "type": "color",
+      "id": "bg_color",
+      "default": "#ffffff",
+      "label": "背景色"
+    },
+    {
+      "type": "header",
+      "content": "Price Settings"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_basic_price",
+      "label": "是否显示为基础价格 + 套餐附加价格 (注意开启时要在对应基础变体元字段设置 basic 为 true)",
+      "default": false
+    },
+    {
+      "type": "select",
+      "id": "discount_type",
+      "label": "购买区折扣展示类型",
+      "options": [
+        { "value": "percent", "label": "折扣百分比" },
+        { "value": "price", "label": "折扣价格" }
+      ],
+      "default": "percent"
+    },
+    {
+      "type": "select",
+      "id": "bar_discount_type",
+      "label": "底部Bar折扣展示类型",
+      "options": [
+        { "value": "percent", "label": "折扣百分比" },
+        { "value": "price", "label": "折扣价格" }
+      ],
+      "default": "percent"
+    },
+    {
+      "type": "header",
+      "content": "Main Settings"
+    },
+    {
+      "type": "text",
+      "id": "title",
+      "label": "Title"
+    },
+
+    {
+      "type": "textarea",
+      "id": "desc",
+      "label": "Description"
+    },
+    {
+      "type": "textarea",
+      "id": "features",
+      "label": "Features"
+    },
+    {
+      "type": "text",
+      "id": "bar_title",
+      "label": "Bar Title"
+    },
+    {
+      "type": "textarea",
+      "id": "bar_desc",
+      "label": "Bar Description"
+    },
+    {
+      "type": "header",
+      "content": "购买按钮配置"
+    },
+    {
+      "type": "text",
+      "id": "bar_btn",
+      "label": "Buy Now Button Text"
+    },
+    {
+      "type": "text",
+      "id": "bar_btn_out_of_stock",
+      "label": "Add to Cart Button Text (Out of Stock)"
+    },
+  ],
+  "blocks": [
+    {
+      "type": "@app"
+    },
+    {
+      "type": "rating",
+      "name": "t:sections.main-product.blocks.rating.name",
+      "limit": 1,
+      "settings": [
+        {
+          "type": "paragraph",
+          "content": "t:sections.main-product.blocks.rating.settings.paragraph.content"
+        }
+      ]
+    },
+    {
+      "name": "Swiper Image",
+      "type": "image",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "img",
+          "label": "Image",
+          "info": "轮播图片"
+        },
+        {
+          "type": "image_picker",
+          "id": "img_mb",
+          "label": "Mobile Image",
+          "info": "轮播图片(移动端)"
+        },
+        {
+          "type": "text",
+          "id": "alt",
+          "label": "Alt",
+          "info": "轮播图片 Alt 属性"
+        }
+      ]
+    },
+    {
+      "type": "custom_liquid",
+      "name": "t:sections.custom-liquid.name",
+      "settings": [
+        {
+          "type": "liquid",
+          "id": "custom_liquid",
+          "label": "t:sections.custom-liquid.settings.custom_liquid.label",
+          "info": "t:sections.custom-liquid.settings.custom_liquid.info"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Product Buy Now"
+    }
+  ]
+}
+{% endschema %}
+
+{{ 'component-rating.css' | asset_url | stylesheet_tag }}
+
+{% assign swiper_blocks = section.blocks | where: 'type', 'image' %}
+
+
+<div class='product-buy-section tw-max-w-[1680px] tw-w-full tw-pb-[60px] lg:tw-px-[24px] tw-mx-auto lg:tw-grid tw-grid-cols-12 tw-gap-20 '>
+  {% comment %} 左侧 轮播 {% endcomment %}
+  <div class=' tw-col-span-8 tw-relative'>
+    <div class=' tw-sticky tw-top-[64px]' style=''>
+      {% render 'zz-buy-swiper', blocks: swiper_blocks %}
+    </div>
+  </div>
+  {% comment %} 右侧 {% endcomment %}
+  <div class='tw-col-span-4 tw-px-[24px] max-lg:tw-mt-[24px] tw-flex tw-flex-col '>
+    {% comment %} 标题 | 描述 | 特性 {% endcomment %}
+    <h1 class='lg:tw-text-[30px] max-lg:tw-text-[24px] tw-font-semibold'>
+      {{ section.settings.title }}
+    </h1>
+    <p class='tw-text-[#333] tw-text-[14px]'>{{ section.settings.desc }}</p>
+    {% for block in section.blocks %}
+      {%- case block.type -%}
+        {%- when '@app' -%}
+          {% render block %}
+        {%- when 'rating' -%}
+          {%- if product.metafields.reviews.rating.value != blank -%}
+            {% liquid
+              assign rating_decimal = 0
+              assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
+              if decimal >= 0.3 and decimal <= 0.7
+                assign rating_decimal = 0.5
+              elsif decimal > 0.7
+                assign rating_decimal = 1
+              endif
+            %}
+            <div
+              class='rating'
+              role='img'
+              aria-label='{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}'
+            >
+              <span
+                aria-hidden='true'
+                class='rating-star'
+                style='--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};'
+              ></span>
+            </div>
+            <p class='rating-text caption'>
+              <span aria-hidden='true'>
+                {{- product.metafields.reviews.rating.value }} /
+                {{ product.metafields.reviews.rating.value.scale_max -}}
+              </span>
+            </p>
+            <p class='rating-count caption'>
+              <span aria-hidden='true'
+                >({{ product.metafields.reviews.rating_count }})</span
+              >
+              <span class='visually-hidden'>
+                {{- product.metafields.reviews.rating_count }}
+                {{ 'accessibility.total_reviews' | t -}}
+              </span>
+            </p>
+          {%- endif -%}
+      {%- endcase -%}
+    {% endfor %}
+    {% if section.settings.features != blank %}
+      <div class=' tw-bg-[#F6F6F6] tw-flex tw-p-10 tw-rounded-[12px] tw-mt-[30px]'>
+        <svg
+          width='30'
+          height='30'
+          viewBox='0 0 20 20'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path d="M8.14902 4.44446H5.67988C4.99805 4.44446 4.44531 4.99719 4.44531 5.67903V8.14816M8.14902 15.5556H5.67988C4.99805 15.5556 4.44531 15.0028 4.44531 14.321V11.8519M11.8527 4.44446H14.3219C15.0037 4.44446 15.5564 4.99719 15.5564 5.67903V8.14816M15.5564 11.8519V14.321C15.5564 15.0028 15.0037 15.5556 14.3219 15.5556H11.8527M8.61198 12.0833H11.3898C11.7733 12.0833 12.0842 11.7724 12.0842 11.3889V8.61112C12.0842 8.22759 11.7733 7.91668 11.3898 7.91668H8.61198C8.22845 7.91668 7.91753 8.22759 7.91753 8.61112V11.3889C7.91753 11.7724 8.22845 12.0833 8.61198 12.0833Z" stroke="black" stroke-linecap="round"/>
+        </svg>
+        <p class=' tw-pl-7 tw-whitespace-pre tw-text-[12px] tw-leading-[1.75]'>
+          {{- section.settings.features -}}
+        </p>
+      </div>
+    {% endif %}
+    {% comment %} 产品变体 {% endcomment %}
+    <div class='tw-mt-[30px]'>
+      {% render 'zz-product-buy-now-select',
+        name: section.settings.title,
+        blocks: section.blocks,
+        show_basic: section.settings.show_basic_price,
+        discount_type: section.settings.discount_type,
+        basic_title: section.settings.basic_title
+      %}
+    </div>
+    <div class='tw-mt-[30px]'>
+      {% render 'zz-product-buy-now-counter' %}
+    </div>
+
+    {% for block in section.blocks %}
+      {% if block.type == 'custom_liquid' %}
+        {{ block.settings.custom_liquid }}
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>
+{% render 'zz-buy-now-bottom-bar',
+  title: section.settings.bar_title,
+  desc: section.settings.bar_desc,
+  btn: section.settings.bar_btn,
+  btn_out_of_stock: section.settings.bar_btn_out_of_stock,
+  product_title: section.settings.title,
+  discount_type: section.settings.bar_discount_type,
+%}
+
+
+<style>
+  #shopify-section-{{ section.id }} h1,
+  #shopify-section-{{ section.id }} p {
+    margin: 0;
+    color: #000;
+  }
+  #shopify-section-{{ section.id }} .product-counter,
+  #shopify-section-{{ section.id }} select
+  {
+     background-color: #fff !important;
+  }
+  #shopify-section-{{ section.id }} {
+    background-color: {{ section.settings.bg_color }};
+  }
+
+  #shopify-section-{{ section.id }} .product-buy-now-bottom-bar-button {
+   background: linear-gradient(139.02deg, #FFEB00 0.01%, #FFD400 100.55%);
+   color: #000;
+    
+  }
+  #shopify-section-{{ section.id }} .product-version-option:has(input[type='radio']:checked) {
+    border-color: #FFD400;
+  }
+  body {
+    background: #fff;
+    padding-bottom: 160px !important;
+  }
+</style>
+<script defer src='{{ 'zz-product-buy-now-select.js' | asset_url }}'></script>
+
+<script type='application/ld+json'>
+  {
+    "@context": "http://schema.org/",
+    "@type": "Product",
+    "name": {{ product.title | json }},
+    "url": {{ request.origin | append: product.url | json }},
+    {% if seo_media -%}
+      "image": [
+        {{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
+      ],
+    {%- endif %}
+    "description": {{ product.description | strip_html | json }},
+    {% if product.selected_or_first_available_variant.sku != blank -%}
+      "sku": {{ product.selected_or_first_available_variant.sku | json }},
+    {%- endif %}
+    "brand": {
+      "@type": "Brand",
+      "name": {{ product.vendor | json }}
+    },
+    "offers": [
+      {%- for variant in product.variants -%}
+        {
+          "@type" : "Offer",
+          {%- if variant.sku != blank -%}
+            "sku": {{ variant.sku | json }},
+          {%- endif -%}
+          {%- if variant.barcode.size == 12 -%}
+            "gtin12": {{ variant.barcode }},
+          {%- endif -%}
+          {%- if variant.barcode.size == 13 -%}
+            "gtin13": {{ variant.barcode }},
+          {%- endif -%}
+          {%- if variant.barcode.size == 14 -%}
+            "gtin14": {{ variant.barcode }},
+          {%- endif -%}
+          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
+          "price" : {{ variant.price | divided_by: 100.00 | json }},
+          "priceCurrency" : {{ cart.currency.iso_code | json }},
+          "url" : {{ request.origin | append: variant.url | json }}
+        }{% unless forloop.last %},{% endunless %}
+      {%- endfor -%}
+    ]
+  }
+</script>

package/snippets/zz-button-v2.liquid

@@ -0,0 +1,77 @@
+{% comment %} 
+按钮配置选项：
+type：按钮类型
+  - primary：主要按钮
+  - default：默认按钮
+  - link：链接按钮
+
+shape: 按钮形状
+  - default：默认
+  - round：圆角
+
+color：按钮颜色
+  - black：黑色
+  - white：白色
+  - orange：橙色
+
+size：按钮尺寸
+  - large：大号
+  - medium：中号（默认）
+  - small：小号
+
+其他参数：
+- href：链接地址
+- backdrop_filter：毛玻璃效果 true/false
+- icon：图标名称
+- text：按钮文字
+- class_name：自定义类名
+{% endcomment %}
+
+{% assign btn_type = type | default: 'primary' %}
+{% assign btn_color = color | default: 'black' %}
+{% assign btn_size = size | default: 'medium' %}
+{% assign icon_size = icon_size | default: 15 %}
+{% assign width = width | default: 'auto' %}
+
+<style>
+  .zz-btn-icon {
+    display: flex;
+  }
+</style>
+  
+{% if href %}
+  {% if btn_type == 'link' %}
+    <a href="{{ href | default: '#' }}" {% if btn_id != blank %} id="{{ btn_id }}" {% endif %} class="zz-btn-link tw-text-[#378DDD] tw-inline-flex tw-items-center tw-text-[12px] lg:tw-text-[14px] tw-no-underline zz-btn-link-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}">
+      <span class="zz-btn-text">{{ text }}</span>
+      {% if postfix_icon %}<span class="zz-btn-icon" style="margin-left: {{ icon_left_margin }}px; margin-right: {{ icon_right_margin }}px;">
+        {% render 'zz-icon', icon_name: postfix_icon, icon_size: icon_size %}
+      </span>{% endif %}
+    </a>
+  {% else %}
+    <a
+      href="{{ href | default: '#' }}"
+      {% if btn_id != blank %} id="{{ btn_id }}" {% endif %}
+      class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-shape-{{ shape }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ class_name }}"
+      {% if backdrop_filter %}
+        style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+      {% endif %}
+    >
+      {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+      <span class="zz-btn-text">{{ text }}</span>
+    </a>
+  {% endif %}
+
+{% else %}
+
+<button
+  class="zz-btn zz-btn-{{ btn_type }} zz-btn-{{ btn_color }} zz-btn-shape-{{ shape }} zz-btn-{{ btn_size }} {% if width == 'full' %} tw-w-full {% endif %} {{ width }} {{ class_name }}"
+  {% if modal_id != blank %} data-zz-modal-target="#{{ modal_id }}" {% endif %}
+  {% if btn_id != blank %} id="{{ btn_id }}" {% endif %}
+  {% if backdrop_filter %}
+    style="backdrop-filter: blur(12px);background: #FFFFFF0F;"
+  {% endif %}
+>
+  {% if icon %}<span class="zz-btn-icon">{{ icon }}</span>{% endif %}
+  <span class="zz-btn-text">{{ text }}</span>
+</button>
+{% endif %}

package/snippets/zz-buy-now-bottom-bar.liquid

@@ -0,0 +1,163 @@
+{% comment %} Products {% endcomment %}
+{% assign is_edu_product = false %}
+{% if product.tags contains 'edu-product' %}
+  {% assign is_edu_product = true %}
+{% endif %}
+
+{% assign is_logged_in = false %}
+{% assign is_edu_verified = false %}
+{% if customer %}
+  {% assign is_logged_in = true %}
+  {% if customer.tags contains 'edu-verified' %}
+    {% assign is_edu_verified = true %}
+  {% endif %}
+{% endif %}
+
+
+<buy-now-bottom-bar
+  data-currency='{{ cart.currency.symbol }}'
+  data-btn-text='{{ btn }}'
+  data-discount-type='{{ discount_type }}'
+  data-btn-out-of-stock-text='{{ btn_out_of_stock }}'
+  data-care-guide='{{ care_guide_type }}'
+  data-is-edu-product='{{ is_edu_product }}'
+  data-is-logged-in='{{ is_logged_in }}'
+  data-is-edu-verified='{{ is_edu_verified }}'
+  data-edu-page-url='{{ shop.metafields.custom.edu_home_page.value.url }}'
+  class=' tw-left-0 tw-right-0 tw-max-w-screen tw-bg-white tw-bottom-0 tw-z-50 !tw-fixed  buy-now-bottom-bar'
+>
+  <div class=' tw-h-full tw-max-w-[1660px] tw-mx-auto tw-px-[12px] md:tw-px-[24px] tw-py-[8px] max-md:tw-pb-[18px] tw-flex md:tw-items-center tw-justify-between max-md:tw-flex-col max-md:tw-items-start'>
+    <div class=' tw-flex tw-flex-col tw-grow'>
+      <div class=' md:tw-hidden tw-flex tw-items-center tw-space-x-3'>
+        <span class='mb_price !tw-text-[20px] tw-font-semibold'>
+          {{-
+            product.selected_or_first_available_variant.price
+            | money_without_trailing_zeros
+          -}}
+        </span>
+        <span class='mb_before !tw-text-[14px] tw-text-[rgba(0,0,0,0.3)] tw-font-medium tw-line-through  '>
+          {% if product.selected_or_first_available_variant.compare_at_price
+              > product.selected_or_first_available_variant.price
+          %}
+            {{
+              product.selected_or_first_available_variant.compare_at_price
+              | money_without_trailing_zeros
+            }}
+          {% endif %}
+        </span>
+        {% render 'zz-price-discouter',
+          before: product.selected_or_first_available_variant.compare_at_price,
+          after: product.selected_or_first_available_variant.price,
+          discount_type: discount_type
+        %}
+      </div>
+      <div class='bar-title-desc max-md:tw-mb-[12px]'>
+        <span class=' tw-font-semibold max-lg:tw-text-[12px] tw-text-[16px]'>
+          {{- title -}}
+        </span>
+        {% if desc != blank %}
+          <div class=' tw-flex tw-items-center '>
+            <span class=' tw-text-[12px] bar-tip tw-max-h-[16px] lg:tw-text-[14px] tw-leading-[1.25] tw-text-[#808080] tw-font-medium'>
+              {{- desc -}}
+            </span>
+            <svg
+              width='16'
+              height='16'
+              class='tw-flex-shrink-0 show-more-btn lg:tw-hidden'
+              viewBox='0 0 14 14'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <path d="M3.03906 5.59998L6.99886 9.55977L10.9587 5.59998" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+    <div class='tw-shrink-0 tw-flex tw-justify-end tw-items-center md:tw-space-x-8  tw-h-[44px] md:tw-h-[56px] max-md:tw-w-full '>
+      <div class=' max-md:tw-hidden lg:tw-min-w-[300px] md:tw-min-w-[200px]'>
+        <div class='tw-flex tw-items-center tw-space-x-3'>
+          <span class='price !tw-text-[20px] tw-font-semibold'>
+            {{-
+              product.selected_or_first_available_variant.price
+              | money_without_trailing_zeros
+            -}}
+          </span>
+          {% if product.selected_or_first_available_variant.compare_at_price
+              > product.selected_or_first_available_variant.price
+          %}
+            <span class='before !tw-text-[16px] tw-text-[rgba(0,0,0,0.3)] tw-font-medium tw-line-through '>
+              {{
+                product.selected_or_first_available_variant.compare_at_price
+                | money_without_trailing_zeros
+              }}
+            </span>
+          {% endif %}
+          {% render 'zz-price-discouter',
+            before: product.selected_or_first_available_variant.compare_at_price,
+            after: product.selected_or_first_available_variant.price,
+            discount_type: discount_type
+          %}
+        </div>
+        {% if has_installment %}
+          <div
+            class='paypal product-buy-paypal max-md:tw-hidden !tw-max-h-[20px] tw-overflow-hidden'
+            data-pp-buyercountry='US'
+            data-pp-message
+            data-pp-style-layout='text'
+            data-pp-style-logo-type='inline'
+            data-pp-style-text-color='black'
+            data-pp-style-text-size='11'
+            data-pp-amount='{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}'
+            data-pp-placement='product'
+          ></div>
+        {% endif %}
+      </div>
+      <button class='product-buy-now-bottom-bar-button tw-flex tw-items-center tw-justify-center tw-border-none tw-h-full tw-text-[14px]  md:tw-px-[51px] md:tw-py-[20px] max-md:tw-py-[15px] max-md:tw-w-full tw-rounded-full tw-font-semibold min-md:tw-text-[16px] {{ button_class }}'>
+        <span
+          class='buy-loading  tw-hidden tw-daisy-loading tw-daisy-loading-spinner '
+        ></span>
+        <span class='buy-bottom-bar-btn-text'>
+          {{ btn }}
+        </span>
+      </button>
+    </div>
+  </div>
+
+</buy-now-bottom-bar>
+
+
+<script defer src='{{ 'zz-buy-now-product-bar.js' | asset_url }}'></script>
+<style>
+  .buy-now-bottom-bar {
+    box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.03); /* 创建上边框阴影 */
+  }
+  buy-now-bottom-bar .paypal {
+    max-height: 20px !important;
+  }
+  .bar-tip {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: 1; /* 默认行数 */
+  }
+
+  .show-more-desc {
+    -webkit-line-clamp: 3;
+    max-height: 48px; /* 根据行高设置 */
+  }
+
+  .buy-now-bottom-bar button {
+    transition: transform 0.2s ease;
+  }
+
+  .buy-now-bottom-bar button[disabled] {
+    opacity: 0.5;
+  }
+
+  @media (min-width: 750px) {
+    .buy-now-bottom-bar button:not([disabled]):hover {
+      transform: scale(1.05);
+    }
+  }
+</style>

package/snippets/zz-options-selector.liquid

@@ -0,0 +1,107 @@
+<div
+  class='
+      {% if option_name == 'Color' %}
+    tw-grid tw-grid-cols-2 tw-gap-6
+    {% else %}
+    tw-space-y-[16px]
+    {% endif %}
+  '
+>
+  {% for option_value in values %}
+    <label
+      data-variant-id='{{ option_value.variant.id }}'
+      data-product-url='{{ product.url }}'
+      data-section-id='{{ section.id }}'
+      data-variant-name='{{ option_value.name }}'
+      class='product-normal-option tw-cursor-pointer tw-border-[#DDDDDD] tw-block tw-border tw-border-solid tw-rounded-[12px] tw-p-[20px]'
+    >
+      <input
+        type='radio'
+        name='{{ option_name }}'
+        class=' tw-sr-only'
+        value='{{ option_value | escape }}'
+        {% if option_value.selected %}
+          checked
+        {% endif %}
+      >
+      {%- assign name = 'option' | append: position -%}
+
+      <!-- 根据当前选项值查找basic=true的变体(basic版本) -->
+      {%- assign variant_for_value = null -%}
+      {%- assign current_option_value = option_value -%}
+
+      {%- for variant in product.variants -%}
+        {%- if variant.metafields.custom.basic == true
+          and variant.options contains option_value.name
+        -%}
+          {%- assign variant_for_value = variant -%}
+          {%- break -%}
+        {%- endif -%}
+      {%- endfor -%}
+
+      {%- unless variant_for_value -%}
+        {%- assign variant_for_value = product.variants
+          | where: 'id', option_value.variant.id
+          | first
+        -%}
+      {%- endunless -%}
+
+      {% comment %} 产品示例图 {% endcomment %}
+      <div
+        class='
+          {% if option_name == 'Color' %}
+           tw-flex tw-flex-col tw-space-y-6
+           {% else %}
+          tw-flex tw-space-x-[24px]
+          {% endif %}
+        '
+      >
+        {% if option_name == 'Color' %}
+          <div
+            class=' tw-w-[28px] tw-h-[28px] tw-rounded-full !tw-block {% if option.value != 'Black' %} tw-border-[1.5px] {% endif %}  tw-border-[#d9d9d9]'
+            style='background: {{ option_value.name }}'
+          ></div>
+          <div class='tw-flex tw-flex-col tw-justify-center tw-space-y-[4px]'>
+            <h3 class=' tw-text-[16px] tw-font-semibold !tw-my-0'>
+              {{ option_value.name }}
+            </h3>
+          </div>
+
+        {% else %}
+          {{
+            variant_for_value.image
+            | image_url: height: 300, width: 300
+            | image_tag:
+              alt: option_value.alt,
+              preload: true,
+              class: 'tw-w-[80px] tw-h-[80px] tw-rounded-[10px]'
+          }}
+          <div class='tw-flex tw-flex-col tw-justify-center tw-space-y-[4px]'>
+            <h3 class=' tw-text-[16px] tw-font-semibold !tw-my-0'>
+              {{ option_value.name }}
+            </h3>
+          </div>
+
+          {%- if show_basic -%}
+            <div class='!tw-ml-auto tw-flex tw-items-center'>
+              <span class='tw-text-[16px] tw-font-medium'>
+                {{ variant_for_value.price | money }}
+              </span>
+            </div>
+          {%- endif -%}
+        {% endif %}
+      </div>
+    </label>
+  {% endfor %}
+</div>
+
+<style>
+  #product-buy-selector .deivide {
+    display: contents;
+  }
+
+  .product-normal-option:has(input[type='radio']:checked) {
+    border-color: #fc6c0f;
+    border-width: 1.5px;
+  }
+</style>