CSS Code

// models.py
from django.db.models.fields import FloatField

class Product(models.Model):
    title = models.CharField(max_length=225)
    price = models.FloatField()
    discount_percent = FloatField(default=0) # Assigning it a default value of 0 so it doesn't throw a 'NoneType' error when it's null.
  
    @property
    def discount(self):
        if self.discount_percent > 0:
            discounted_price = self.price - self.price * self.discount_percent / 100
            return discounted_price

class OrderItem(models.Model):
    product = models.ForeignKey(Product, on_delete=models.SET_NULL, null=True)
    order = models.ForeignKey(Order, on_delete=models.SET_NULL, null=True)
    quantity = models.IntegerField(default=0, null=True, blank=True)
	
	# get_total function has to be updated too to calculate using the correct current price
    @property
    def get_total(self):
        if self.product.discount_percent > 0:
            price_now = self.product.price - self.product.price * self.product.discount_percent / 100
        else:
            price_now = self.product.price

        total = price_now * self.quantity
        return total

// Your template
{% if product.discount_percent %}
                <h4 class="product__price--original">₾{{ product.price|floatformat:2 }}</h4>
                <h4 class="product__price--discounted">₾{{ product.discount|floatformat:2 }}</h4>
                {% else %}  
                <h4>₾{{ product.price|floatformat:2 }}</h4>
                {% endif %}
                
// Here's some Sass too, if you need it
.product__price {
  &--original {
    text-decoration: line-through;
  }
  &--discounted {
    color: green;
  }
}

filterMedia() {
    
         $('[thumbnail-color]').hide();
    
    var selected_variant = this.currentVariant.featured_media.alt;
    
    var selected_attribute = '[thumbnail-color="' + selected_variant + '"]';
    
    if (selected_variant == selected_variant) {
      
      $(selected_attribute).show();

    } }

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      -{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF
    </span>

.card__badge .badge{
    border-radius: 0;
    font-size: 13px;
    background-color: red;
    font-weight: bold;
    border: none;
  }
  
  .price .price__badge-sale {
    border-radius: 0;
    font-size: 13px;
    background-color: red;
    font-weight: bold;
    border: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      -{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF
    </span>

<script>
  let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
  console.log(items)
  items.forEach(item => {
    item.addEventListener("mouseover", () => {
      item.setAttribute("open", true);
      item.querySelector("ul").addEventListener("mouseleave", () => {
        item.removeAttribute("open");
      });
    item.addEventListener("mouseleave", () => {
      item.removeAttribute("open");
    });
  });
  
  });
</script>

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

<div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}">
  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {% render block %}
        {%- when 'heading' -%}
          <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
        {%- when 'paragraph' -%}
          <div class="newsletter__subheading rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
        {%- when 'email_form' -%}
          <div {{ block.shopify_attributes }}>
            {% form 'customer', class: 'newsletter-form' %}
            
			
            <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
					<input class="field__input" autocomplete="name" type="text" id="ContactForm-first_name" name="contact[first_name]" value="" aria-required="true" placeholder="First Name" required>
					<label class="field__label" for="ContactForm-first_name">{{ 'customer.register.first_name' | t }}</label>
				</div>
				
				<div class="field">
					<input class="field__input" autocomplete="name" type="text" id="ContactForm-last_name" name="contact[last_name]" value="" aria-required="true" placeholder="Last Name" required>
					<label class="field__label" for="ContactForm-last_name">{{ 'customer.register.last_name' | t }}</label>
				</div>
				
				<div class="field">
				  <input
                    id="NewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="Newsletter-error--{{ section.id }}"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="Newsletter-success--{{ section.id }}"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="NewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {% endform %}
          </div>
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.newsletter.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.newsletter.settings.color_scheme.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.newsletter.settings.full_width.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.paragraph.content"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.newsletter.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Subscribe to our emails",
          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.newsletter.blocks.paragraph.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
          "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "t:sections.newsletter.blocks.email_form.name",
      "limit": 1
    },
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}

<div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
>
  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
  {%- assign compare_at_price = current_variant.compare_at_price -%}
  {%- assign price = current_variant.price -%}

  {% case section.settings.media_size %}
    {% when 'small' %}
      {%- assign product_media_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_media_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign product_media_width = 'medium-up--two-thirds' -%}
      {%- assign product_description_width = 'medium-up--one-third' -%}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign product_media_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign height = 1090 -%}
      {%- assign enable_image_zoom = false -%}
  {% endcase %}

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
    <div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

      {%- for media in product.media -%}
        {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
      {%- endfor -%}

      <noscript>
        {% capture product_image_size %}{{ height }}x{% endcapture %}
        <img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
      </noscript>

      {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

      {%- if first_3d_model -%}
        <button
          aria-label="{{ 'products.product.view_in_space_label' | t }}"
          class="product-single__view-in-space"
          data-shopify-xr
          data-shopify-model3d-id="{{ first_3d_model.id }}"
          data-shopify-title="{{ product.title | escape }}"
          data-shopify-xr-hidden
        >
          {% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
        </button>
      {%- endif -%}


      {% if product.media.size > 1 %}
        {% if product.media.size > 4 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for media in product.media %}
              <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
                <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                   {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

                    {%- capture thumbnailAlt -%}
                      {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                        {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- elsif media.media_type == 'model' -%}
                        {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- else -%}
                        {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- endif -%}
                    {%- endcapture -%}

                    <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                    {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                      <div class="product-single__thumbnail-badge">
                        {% include 'icon-video-badge-full-color' %}
                      </div>
                    {%- endif -%}
                    {%- if media.media_type == 'model' -%}
                      <div class="product-single__thumbnail-badge">
                        {% include 'icon-3d-badge-full-color' %}
                      </div>
                    {%- endif -%}
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>
      {% endif %}
    </div>

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">

        <h1 class="product-single__title">{{ product.title }}</h1>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


          <div class="product__price">
            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte" data-product-policies>
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
            {%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels {% endunless %}
            {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
            {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
          {%- endcapture %}

          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                  {{ option.name }}
                </label>
                {% assign option_position = forloop.index %}
                <fieldset>
                  {%- for value in option.values -%}
                      <input type="radio" class="single-option-selector-{{ section.id }} variant-option"
                        {% if option.selected_value == value %} checked="checked"{% endif %}
                        value="{{ value | escape }}"
                        data-index="option{{option_position}}"
                        name="{{ option.name | handleize }}"
                        id="SingleOptionSelector-{{option_position}}>
                      <label for="SingleOptionSelector-{{ forloop.index0 }}">
                        {{value}}
                      </label>
                  {%- endfor -%}
                </fieldset>
              {% endfor %}
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
              {% endfor %}
            </select>

            {% if section.settings.show_quantity_selector %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
              </div>
            {% endif %}

            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
              data-error-message-wrapper
              role="alert"
            >
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>

            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >
                <button type="submit" name="add"
                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                  data-add-to-cart>
                  <span data-add-to-cart-text>
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                  </span>
                  <span class="hide" data-loader>
                    {% include 'icon-spinner' %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            </div>
          {% endform %}
        </div>

        {%- comment -%}
          Live region for announcing updated price and availability to screen readers
        {%- endcomment -%}
        <p class="visually-hidden" data-product-status
          aria-live="polite"
          role="status"
        ></p>

        {%- comment -%}
          Live region for announcing that the product form has been submitted and the
          product is in the process being added to the cart
        {%- endcomment -%}
        <p class="visually-hidden" data-loader-status
          aria-live="assertive"
          role="alert"
          aria-hidden="true"
        >{{ 'products.product.loader_label' | t }}</p>

        <div class="product-single__description rte">
          {{ product.description }}
        </div>

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
        {% endif %}
    </div>
  
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
</div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  <script type="application/json" id="ModelJson-{{ section.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
{% endunless %}



{% schema %}
{
  "name": {
    "da": "Produktsider",
    "de": "Produktseiten",
    "en": "Product pages",
    "es": "Páginas de productos",
    "fi": "Tuotesivut",
    "fr": "Pages de produits",
    "hi": "उत्पाद पेज",
    "it": "Pagine di prodotto",
    "ja": "商品ページ",
    "ko": "제품 페이지",
    "nb": "Produktsider",
    "nl": "Productpagina's",
    "pt-BR": "Páginas de produtos",
    "pt-PT": "Páginas de produtos",
    "sv": "Produktsidor",
    "th": "หน้าสินค้า",
    "zh-CN": "产品页面",
    "zh-TW": "產品頁面"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": {
        "da": "Vis antalsvælger",
        "de": "Mengenauswahl anzeigen",
        "en": "Show quantity selector",
        "es": "Mostrar selector de cantidad",
        "fi": "Näytä määrän valitsin",
        "fr": "Afficher le sélecteur de quantité",
        "hi": "मात्रा चयनकर्ता दिखाएं",
        "it": "Mostra selettore quantità",
        "ja": "数量セレクターを表示する",
        "ko": "수량 선택기 표시",
        "nb": "Vis mengdevelger",
        "nl": "Hoeveelheidskiezer weergeven",
        "pt-BR": "Exibir seletor de quantidade",
        "pt-PT": "Mostrar um seletor de quantidade",
        "sv": "Visa kvantitetsväljare",
        "th": "แสดงตัวเลือกจำนวน",
        "zh-CN": "显示数量选择器",
        "zh-TW": "顯示數量選擇器"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_variant_labels",
      "label": {
        "da": "Vis variantlabels",
        "de": "Varianten-Etiketten anzeigen",
        "en": "Show variant labels",
        "es": "Mostrar etiquetas de variantes",
        "fi": "Näytä vaihtoehtoiset tarrat",
        "fr": "Afficher le nom des variantes",
        "hi": "वेरिएंट लेबल दिखाएं",
        "it": "Mostra etichette varianti",
        "ja": "バリエーションのラベルを表示する",
        "ko": "이형 상품 레이블 표시",
        "nb": "Vis variantetiketter",
        "nl": "Variantlabels weergeven",
        "pt-BR": "Exibir etiquetas de variantes",
        "pt-PT": "Mostrar etiquetas de variantes",
        "sv": "Visa variantetiketter",
        "th": "แสดงป้ายกำกับตัวเลือกสินค้า",
        "zh-CN": "显示多属性标签",
        "zh-TW": "顯示子類選項標籤"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "da": "Vis leverandør",
        "de": "Lieferanten anzeigen",
        "en": "Show vendor",
        "es": "Mostrar proveedor",
        "fi": "Näytä myyjä",
        "fr": "Afficher les vendeurs",
        "hi": "विक्रेता दिखाएं",
        "it": "Mostra fornitore",
        "ja": "販売元を表示する",
        "ko": "공급업체 표시",
        "nb": "Vis leverandør",
        "nl": "Leverancier weergeven",
        "pt-BR": "Exibir fornecedor",
        "pt-PT": "Mostrar fornecedor",
        "sv": "Visa säljare",
        "th": "แสดงผู้ขาย",
        "zh-CN": "显示厂商",
        "zh-TW": "顯示廠商"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": {
        "da": "Vis dynamisk betalingsknap",
        "de": "Dynamischen Checkout Button anzeigen",
        "en": "Show dynamic checkout button",
        "es": "Mostrar botón de pago dinámico",
        "fi": "Näytä dynaaminen kassapainike",
        "fr": "Afficher le bouton de paiement dynamique",
        "hi": "डायनेमिक चेकआउट बटन दिखाएं",
        "it": "Mostra pulsante di check-out dinamico",
        "ja": "動的チェックアウトボタンを表示する",
        "ko": "동적 결제 버튼 표시",
        "nb": "Vis dynamisk knapp for å gå til kassen",
        "nl": "Dynamische betaalknop weergeven",
        "pt-BR": "Exibir botão de checkout dinâmico",
        "pt-PT": "Mostrar o botão dinâmico de finalização da compra",
        "sv": "Visa dynamiska utcheckningsknappar",
        "th": "แสดงปุ่มชำระเงินแบบไดนามิก",
        "zh-CN": "显示动态结账按钮",
        "zh-TW": "顯示動態結帳按鈕"
      },
      "info": {
        "da": "Den enkelte kunde vil se sin foretrukne betalingsmetode blandt dem, der er tilgængelige i din butik, f.eks. PayPal eller Apple Pay. [Få mere at vide](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Informationen](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "fi": "Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. [Lisätietoja](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "hi": "प्रत्येक ग्राहक आपके स्टोर पर उपलब्ध अपनी पसंदीदा भुगतान की विधि देखेंगे जैसे PayPal या Apple Pay. [अधिक जानें](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[詳しくはこちら](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "ko": "각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 지불 방법을 확인할 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "nb": "Hver enkelt kunde vil se sin foretrukne betalingsmåte blant de som er tilgjengelig i butikken din, som PayPal eller Apple Pay. [Finn ut mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Meer informatie](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "pt-BR": "Cada cliente verá a forma de pagamento preferencial dele dentre as disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "pt-PT": "Cada cliente irá ver o seu método de pagamento preferido entre os disponíveis na loja, como o PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "sv": "Varje kund kommer att se den föredragna betalningsmetoden från de som finns tillgängliga i din butik, till exempel PayPal eller Apple Pay. [Läs mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "th": "ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "zh-TW": "每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。[深入瞭解](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": {
        "da": "Vis knapper til deling på sociale medier",
        "de": "Buttons für Social Media anzeigen",
        "en": "Show social sharing buttons",
        "es": "Mostrar botones para compartir en redes sociales",
        "fi": "Näytä sosiaalisen median jakamispainikkeet",
        "fr": "Affichez les boutons de partage sur les médias sociaux",
        "hi": "सोशल शेयरिंग बटन दिखाएं",
        "it": "Mostra i pulsanti per la condivisione sui social",
        "ja": "ソーシャルメディアでの共有ボタンを表示する",
        "ko": "소셜 공유 버튼 표시",
        "nb": "Vis knapper for deling på sosiale medier",
        "nl": "Knoppen voor sociaal delen weergeven",
        "pt-BR": "Exibir botões de compartilhamento em redes sociais",
        "pt-PT": "Mostrar botões de partilha nas redes sociais",
        "sv": "Visa knappar för delning i sociala medier",
        "th": "แสดงปุ่มสำหรับแชร์ลงโซเชียล",
        "zh-CN": "显示社交分享按钮",
        "zh-TW": "顯示社群分享按鈕"
      },
      "default": true
    },
    {
      "type": "header",
      "content": {
        "da": "Medie",
        "de": "Medien",
        "en": "Media",
        "es": "Elementos multimedia",
        "fi": "Media",
        "fr": "Support multimédia",
        "hi": "मीडिया",
        "it": "Media",
        "ja": "メディア",
        "ko": "미디어",
        "nb": "Medier",
        "nl": "Media",
        "pt-BR": "Mídia",
        "pt-PT": "Multimédia",
        "sv": "Media",
        "th": "สื่อ",
        "zh-CN": "媒体",
        "zh-TW": "媒體"
      },
      "info": {
        "da": "Få mere at vide om [media types](https://help.shopify.com/manual/products/product-media)",
        "de": "Mehr Informationen über [Medientypen ](https://help.shopify.com/manual/products/product-media)",
        "en": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)",
        "es": "Más información sobre [tipos de archivos multimedia](https://help.shopify.com/manual/products/product-media)",
        "fi": "Lue lisää [mediatyypeistä](https://help.shopify.com/manual/products/product-media)",
        "fr": "En savoir plus sur les [types de supports multimédia](https://help.shopify.com/manual/products/product-media)",
        "hi": "[मीडिया प्रकार](https://help.shopify.com/manual/products/product-media) के बारे में और जानें",
        "it": "Scopri di più sulle [tipologie di file multimediali](https://help.shopify.com/manual/products/product-media)",
        "ja": "[メディアのタイプ](https://help.shopify.com/manual/products/product-media) について詳しくはこちら",
        "ko": "[미디어 유형](https://help.shopify.com/manual/products/product-media)에 대해 자세히 알아보기",
        "nb": "Lær mer om [medietyper](https://help.shopify.com/manual/products/product-media)",
        "nl": "Meer informatie over [mediatypen](https://help.shopify.com/manual/products/product-media)",
        "pt-BR": "Saiba mais sobre [tipos de mídia](https://help.shopify.com/manual/products/product-media)",
        "pt-PT": "Saiba mais sobre [media types](https://help.shopify.com/manual/products/product-media)",
        "sv": "Läs mer om [mediatyper](https://help.shopify.com/manual/products/product-media)",
        "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [ประเภทของสื่อ](https://help.shopify.com/manual/products/product-media)",
        "zh-CN": "详细了解[媒体类型](https://help.shopify.com/manual/products/product-media)",
        "zh-TW": "深入瞭解 [媒體類型](https://help.shopify.com/manual/products/product-media)"
      }
    },
    {
      "type": "select",
      "id": "media_size",
      "label": {
        "da": "Størrelse",
        "de": "Größe",
        "en": "Size",
        "es": "Tamaño",
        "fi": "Koko",
        "fr": "Taille",
        "hi": "आकार",
        "it": "Dimensione",
        "ja": "サイズ",
        "ko": "사이즈",
        "nb": "Størrelse",
        "nl": "Grootte",
        "pt-BR": "Tamanho",
        "pt-PT": "Tamanho",
        "sv": "Storlek",
        "th": "ขนาด",
        "zh-CN": "大小",
        "zh-TW": "尺寸"
      },
      "options": [
        {
          "value": "small",
          "label": {
            "da": "Lille",
            "de": "Klein",
            "en": "Small",
            "es": "Pequeño",
            "fi": "Pieni",
            "fr": "Petit",
            "hi": "छोटा",
            "it": "Piccolo",
            "ja": "スモール",
            "ko": "스몰",
            "nb": "Liten",
            "nl": "Klein",
            "pt-BR": "Pequeno",
            "pt-PT": "Pequeno",
            "sv": "Liten",
            "th": "เล็ก",
            "zh-CN": "小",
            "zh-TW": "小型"
          }
        },
        {
          "value": "medium",
          "label": {
            "da": "Medium",
            "de": "Mittel",
            "en": "Medium",
            "es": "Mediano",
            "fi": "Keskisuuri",
            "fr": "Moyenne",
            "hi": "मध्यम",
            "it": "Medio",
            "ja": "中",
            "ko": "보통",
            "nb": "Middels",
            "nl": "Gemiddeld",
            "pt-BR": "Médio",
            "pt-PT": "Médio",
            "sv": "Medium",
            "th": "ปานกลาง",
            "zh-CN": "中等",
            "zh-TW": "中等"
          }
        },
        {
          "value": "large",
          "label": {
            "da": "Stor",
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fi": "Suuri",
            "fr": "Grande",
            "hi": "बड़ा",
            "it": "Grande",
            "ja": "大",
            "ko": "라지",
            "nb": "Stor",
            "nl": "Groot",
            "pt-BR": "Grande",
            "pt-PT": "Grande",
            "sv": "Stor",
            "th": "ใหญ่",
            "zh-CN": "大",
            "zh-TW": "大型"
          }
        },
        {
          "value": "full",
          "label": {
            "da": "Fuld bredde",
            "de": "Volle Breite",
            "en": "Full-width",
            "es": "Ancho completo",
            "fi": "Täysi leveys",
            "fr": "Pleine largeur",
            "hi": "पूर्ण चौड़ाई",
            "it": "Intera larghezza",
            "ja": "全幅",
            "ko": "전체 폭",
            "nb": "Full bredde",
            "nl": "Volledige breedte",
            "pt-BR": "Largura completa",
            "pt-PT": "Largura completa",
            "sv": "Full bredd",
            "th": "เต็มความกว้าง",
            "zh-CN": "全宽",
            "zh-TW": "完整寬度"
          }
        }
      ],
      "default": "medium"
    },
    {
      "type": "checkbox",
      "id": "enable_image_zoom",
      "label": {
        "da": "Aktivér billedzoom",
        "de": "Foto-Zoom zulassen",
        "en": "Enable image zoom",
        "es": "Habilitar zoom de imagen",
        "fi": "Ota kuvan zoomaus käyttöön",
        "fr": "Activer le zoom d'image",
        "hi": "इमेज ज़ूम सक्षम करें",
        "it": "Abilita lo zoom dell'immagine",
        "ja": "画像ズームを有効にする",
        "ko": "이미지 확대 사용",
        "nb": "Aktiver bildezoom",
        "nl": "Inzoomen op afbeelding inschakelen",
        "pt-BR": "Habilitar o zoom da imagem",
        "pt-PT": "Ativar o zoom da imagem",
        "sv": "Aktivera bildzoom",
        "th": "เปิดใช้การซูมภาพ",
        "zh-CN": "启用图片缩放",
        "zh-TW": "啟用圖片縮放"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": {
        "da": "Aktivér looping af videoer",
        "de": "Videschleife aktivieren",
        "en": "Enable video looping",
        "es": "Habilitar la reproducción de video en bucle",
        "fi": "Ota käyttöön videosilmukka",
        "fr": "Activer le bouclage de la vidéo",
        "hi": "वीडियो लूपिंग सक्षम करें",
        "it": "Abilita la riproduzione in loop dei video",
        "ja": "ビデオのループを有効にする",
        "ko": "동영상 루프",
        "nb": "Aktiver løkkeavspilling av video",
        "nl": "Video-looping inschakelen",
        "pt-BR": "Habilitar loop de vídeo",
        "pt-PT": "Ativar ciclo de vídeo",
        "sv": "Aktivera video-loopning",
        "th": "เปิดใช้งานการวนซ้ำวิดีโอ",
        "zh-CN": "启用视频循环",
        "zh-TW": "啟用影片循環功能"
      },
      "default": false
    }
  ]
}
{% endschema %}

{% if product.variants[forloop.index0].metafields.color.values and option.name == 'Color' %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" style="background-color: {{product.variants[forloop.index0].metafields.color.values}}">&nbsp;
  </label>
{% else %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
    {{ value }}
  </label>
{% endif %}

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

/* Accordion CSS Code by WebSensePro.com 
https://websensepro.com/blog/how-to-create-collapsible-accordion-for-product-description-shopify/
*/
.accordion {
	 margin: 1rem 0;
	 padding: 0;
	 list-style: none;
	 border-top: 1px solid #e5e5e5;
}
 .accordion-item {
	 border-bottom: 1px solid #e5e5e5;
   list-style: none !important; 
}
/* Thumb */
 .accordion-thumb {
	 margin: 0;
	 padding: 0.8rem 0;
	 cursor: pointer;
	 font-weight: normal;
}
 .accordion-thumb::before {
	 content: '';
	 display: inline-block;
	 height: 7px;
	 width: 7px;
	 margin-right: 1rem;
	 margin-left: 0.5rem;
	 vertical-align: middle;
	 border-right: 1px solid;
	 border-bottom: 1px solid;
	 transform: rotate(-45deg);
	 transition: transform 0.2s ease-out;
}
/* Panel */
 .accordion-panel {
	 margin: 0;
	 padding-bottom: 0.8rem;
	 display: none;
}
/* Active */
 .accordion-item.is-active .accordion-thumb::before {
	 transform: rotate(45deg);
}

<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.first_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.first_tab_description }}</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.second_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.second_tab_description }}</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">{{ product.metafields.my_fields.third_tab_title }}</h3>
<p class="accordion-panel">{{ product.metafields.my_fields.third_tab_description }}</p>
</li>
</ul>

// Accordion by WebSensePro.com
$(function() {
	// (Optional) Active an item if it has the class "is-active"	
	$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
	
	$(".accordion > .accordion-item").click(function() {
		// Cancel the siblings
		$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
		// Toggle the item
		$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
	});
});

<p class="line-item-property__field">
<label for="childsName">Child's Name:</label>
<input id="childsName" type="text" name="properties[Child's Name]" form="product-form-{{ section.id }}">
</p>