Broadcast/sections/product.liquid

<!-- /sections/product.liquid -->

{%- liquid
  assign current_variant = product.selected_or_first_available_variant
  assign enable_video_looping = section.settings.enable_video_looping
  assign image_size = section.settings.image_size
  assign image_layout = section.settings.image_layout
  assign mobile_image_style = section.settings.mobile_image_style
  assign featured_media = current_variant.featured_media | default: product.featured_media
  assign featured_media_aspect_ratio = featured_media.aspect_ratio | default: 1
  assign is_title_linked = true
  if template.name == 'product'
    assign is_title_linked = false
  endif

  assign show_thumbnails = false
  assign enable_thumbs = false
  assign enable_thumbs_mobile = false

  if image_layout == 'thumbnails' or image_layout == 'thumbnails-left'
    assign enable_thumbs = true
    assign show_thumbnails = true
  endif

  if mobile_image_style == 'thumbs'
    assign show_thumbnails = true
    assign enable_thumbs_mobile = true
  endif

  assign modifier = image_layout | default: 'thumbnails'
  assign product_wrapper_modifier = 'product__wrapper--' | append: modifier

  assign show_buy_buttons = false
  assign buy_buttons = section.blocks | where: 'type', 'buttons'

  if buy_buttons.size > 0
    assign show_buy_buttons = true
  endif

  assign image_width = 770

  if image_size == 'small'
    assign product_wrapper_modifier = product_wrapper_modifier | append: ' product__wrapper--small'
    assign image_width = 525
  endif

  if image_size == 'stretch'
    assign product_wrapper_modifier = product_wrapper_modifier | append: ' product__wrapper--stretch'
    assign image_width = 970
  endif

  assign product_form_id = 'ProductForm--' | append: section.id | append: '-' | append: product.id
  assign show_cart_bar = false
  assign unique = section.id

  assign sibling_color = product.metafields.theme.sibling_color.value | default: product.metafields.theme.sibling_colour.value | default: product.metafields.theme.siblings_color.value | default: product.metafields.theme.siblings_colour.value | default: product.metafields.theme.siblings_colors.value | default: product.metafields.theme.siblings_colours.value

  if section.settings.show_cart_bar
    assign show_cart_bar = true
  endif

  capture product_images_classlist
    echo 'product__images'

    if enable_thumbs
      echo ' product__images--thumbs'
    else
      echo ' product__images--no-thumbs'
    endif

    if enable_thumbs_mobile
      echo ' product__images--mobile-thumbs'
    else
      echo ' product__images--mobile-slider'
    endif
  endcapture

  assign preorder = false
  if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true
    assign preorder = true
  endif

  assign sold_out = false
  unless product.available
    assign sold_out = true
  endunless

  assign product_tags = product.tags | join: ','
  if product_tags contains '_preorder'
    assign preorder = true
  endif

  assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
  assign product_compare_at_price = product.compare_at_price
  assign product_compare_at_price_max = product.compare_at_price_max

  if product.metafields.app--168074346497.discount_percentage.value > 0.01
    assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value

    assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

    assign product_compare_at_price = product.price
    assign product_compare_at_price_max = product.price_max

    if product.compare_at_price > product_compare_at_price
      assign product_compare_at_price = product.compare_at_price
    endif

    if product.compare_at_price_max > product_compare_at_price_max
      assign product_compare_at_price_max = product.compare_at_price_max
    endif
  endif

  assign on_sale = false
  if product_compare_at_price > product_price
    assign on_sale = true
  endif

  assign badge = ''
  if badge == '' and product_tags contains '_badge_'
    assign badge = product_tags | split: '_badge_'
    assign badge = badge[1] | split: ',' | first | replace: '_', ' '
  endif
-%}

{%- style -%}
  {%- if show_cart_bar -%}
    :root { --cart-bar-height: 80px; }
  {%- endif -%}

  #Product--{{ section.id }} {
    --PT: {{ section.settings.padding_top }}px;
    --PB: {{ section.settings.padding_bottom }}px;

    --swatch-size: var(--swatch-size-product);
  }
{%- endstyle -%}

<div id="Product--{{ unique }}"
  class="index-product section-padding"
  data-section-id="{{ unique }}"
  data-section-type="product"
  data-product-handle="{{ product.handle }}"
  data-enable-history-state="true"
  data-overlay-header
  data-sticky-enabled="{{ section.settings.product_sticky_enable }}"
  data-variant-image-scroll="{{ section.settings.variant_image_scroll }}"
  {% if show_cart_bar %}data-cart-bar-enabled{% endif %}
>

  <div class="product__wrapper {{ product_wrapper_modifier }}" data-product>
    <div class="product__wrapper__inner">
      <div class="product__page">

        <product-images
          class="{{ product_images_classlist }}"
          data-active-media="{{ section.id }}-{{ featured_media.id }}"
          {% if enable_thumbs %}data-fader-desktop{% endif %}
          {% if enable_thumbs_mobile %}data-fader-mobile{% endif %}
        >

          {%- if product.media.size > 0 -%}
            {%- capture product_slides_attributes -%}
              class="product__slides product-single__photos"
              style="--featured-media-aspect-ratio: {{ featured_media_aspect_ratio | round: 2 }};"
              data-product-media-list
            {%- endcapture -%}

            {%- if section.settings.enable_zoom -%}
              <zoom-images {{ product_slides_attributes }}>
            {%- else -%}
              <div {{ product_slides_attributes }}>
            {%- endif -%}

              {%- for media in product.media -%}
                {%- render 'media', media: media, featured_media: featured_media, enable_video_looping: enable_video_looping, sectionkey: unique, image_width: image_width, cover: true -%}
              {%- endfor -%}

            {%- if section.settings.enable_zoom -%}
              </zoom-images>
            {%- else -%}
              </div>
            {%- endif -%}

            {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
            {%- if first_3d_model -%}
              <button
                class="btn btn--outline btn--black btn--ar product-single__view-in-space"
                data-shopify-xr
                data-shopify-model3d-id="{{ first_3d_model.id }}"
                data-shopify-title="{{ product.title | strip_html }}"
                data-shopify-xr-hidden>
                {%- render 'icon-media-model' -%}

                <span class="product-single__view-in-space-text">{{ 'products.general.view_space' | t }}</span>
              </button>
            {%- endif -%}

            {%- if show_thumbnails -%}
              <product-thumbs class="product__thumbs" data-product-thumbs>
                <div class="product__thumbs__holder" data-thumbs-slider>
                  {%- for media in product.media -%}
                    <div class="product__thumb{% if media == featured_media %} is-active{% endif %}" data-thumb-item>
                      <a
                        class="product__thumb__link"
                        href="{{ media.preview_image.src | image_url }}"
                        aria-current="{% if forloop.first %}true{% else %}false{% endif %}"
                        data-media-id="{{ section.id }}-{{ media.id }}"
                        data-thumb-link>
                        {%- liquid
                          render 'image' image: media.preview_image, width: 150, height: 150, sizes: '75px', widths: '75, 100, 150, 225, 300', aspect_ratio: 1

                          if media.media_type == 'video' or media.media_type == 'external_video'
                            render 'icon-media-video'
                          elsif media.media_type == 'model'
                            render 'icon-media-model'
                          endif
                        -%}
                      </a>
                    </div>
                  {%- endfor -%}
                </div>
              </product-thumbs>
            {%- endif -%}

            {%- comment -%} Thumbnails template for Photoswipe {%- endcomment -%}
            {%- if section.settings.enable_zoom -%}
              <template data-pswp-thumbs-template>
                {%- assign images = product.media | where: 'media_type', 'image' -%}

                {%- for image in images -%}
                  {%- render 'image' image: image, width: 160, height: 160, sizes: '80px', widths: '80, 120, 160', aspect_ratio: 1, modifier: 'pswp__thumb' -%}
                {%- endfor -%}
              </template>
            {%- endif -%}
          {%- else -%}
            <div class="product__slides product__slides--{{ image_size }} product-single__photos">
              <div class="product__photo product__photo--blank product__slide"></div>
            </div>
          {%- endif -%}
        </product-images>

        <div class="product__content">
          <div class="form__wrapper{% unless show_buy_buttons %} form__wrapper--no-buttons{% endunless %}{% unless current_variant.available %} variant--soldout{% endunless %}{% if settings.form_style == 'classic' %} form__wrapper--classic{% else %} form__wrapper--modern{% endif %}{% if settings.show_newsletter %} show-product-notification{% endif %}" data-form-wrapper>
            <div class="form__width">
              {% comment %} The input with name="id" submits to cart {% endcomment %}
              <input type="hidden" name="id" value="{{ current_variant.id }}" form="{{ product_form_id }}">

              {% comment %} Add a line item property called 'Preorder' to preorder products {% endcomment %}
              {%- if preorder -%}
                <input type="hidden" name="properties[{{ 'products.product.sale_type' | t }}]" value="{{ 'products.product.pre_order' | t }}" form="{{ product_form_id }}" data-product-preorder>
              {%- endif -%}

              {%- if sibling_color != blank -%}
                <input type="hidden" form="{{ product_form_id }}" name="properties[{{ 'general.siblings.label' | t }}]" value="{{ sibling_color }}">
              {%- endif -%}

              {%- for block in section.blocks -%}
                {%- liquid
                  assign padding_bottom = block.settings.padding_bottom
                  assign bg_accent = block.settings.bg_color
                  assign icon_size = block.settings.icon_size

                  capture block_style
                    if padding_bottom
                      echo '--block-padding-bottom: ' | append: block.settings.padding_bottom | append: 'px;'
                    endif

                    if bg_accent
                      if block.type == 'upsell' or block.type == 'complementary-products'
                        unless bg_accent == 'rgba(0,0,0,0)' or bg_accent == blank
                          echo '--bg-accent: ' | append: bg_accent | append: ';'
                        endunless
                      endif
                    endif

                    if icon_size
                     echo '--icon-size:' | append: icon_size | append: 'px;'
                    endif

                    if block.type == 'countdown'
                      assign bg_color = block.settings.bg_color
                      assign text_color = block.settings.color

                      unless bg_color == 'rgba(0,0,0,0)' or bg_color == blank
                        echo '--bg: ' | append: bg_color | append: ';'
                        echo '--countdown-padding: ' | append: 'var(--inner);'
                      endunless

                      unless text_color == 'rgba(0,0,0,0)' or text_color == blank
                        echo '--text: ' | append: text_color | append: ';'
                      endunless
                    endif
                  endcapture

                  if block_style != blank
                    assign block_style = 'style="' | append: block_style | append: '"'
                  endif
                -%}

                {%- case block.type -%}
                  {%- when '@app' -%}
                    {%- render block -%}

                  {%- when 'title' -%}
                    {%- render 'product-title' product: product, block: block, block_style: block_style, is_title_linked: is_title_linked -%}

                  {%- when 'price' -%}
                    {%- render 'product-price' product: product, unique: unique, block: block, block_style: block_style -%}

                  {%- when 'variants' -%}
                    {%- render 'product-variant-options' product: product, unique: unique, block: block, block_style: block_style, product_form_id: product_form_id, enable_size_chart: true -%}

                  {%- when 'buttons' -%}
                    {%- render 'product-buttons' product: product, current_variant: current_variant, unique: unique, block: block, block_style: block_style, product_form_id: product_form_id, preorder: preorder -%}

                  {%- when 'description' -%}
                    {%- render 'product-description'  product: product, block: block, block_style: block_style -%}

                  {%- when 'tab_richtext' -%}
                    {%- render 'product-description'  product: product, block: block, block_style: block_style -%}

                  {%- when 'accordion' -%}
                    {%- render 'product-description'  product: product, block: block, block_style: block_style -%}

                  {%- when 'inventory_countdown' -%}
                    {% comment %} Product inventory {% endcomment %}

{%- liquid
  assign show_remaining_class = ''
  assign show_notice = block.settings.show_notice
  assign max_inventory = block.settings.max_inventory
  assign hide_inventory_count = block.settings.hide_inventory_counter
  assign current_inventory = 0
  assign has_unavailable_variants = false
  assign show_buy_buttons = false
  assign in_stock_color = block.settings.in_stock_color
  assign low_stock_color = block.settings.low_stock_color
  assign out_of_stock_color = block.settings.out_of_stock_color
  assign buy_buttons = section.blocks | where: 'type', 'buttons'
  if buy_buttons.size > 0
    assign show_buy_buttons = true
  endif

  comment
    Set a limit of the max inventory quantity to prevent a real quantity exposure
  endcomment
  assign max_inventory_quantity = max_inventory | plus: 1

  if current_variant.inventory_management and current_variant.inventory_policy == 'deny'
    if current_variant.inventory_quantity > 0 and current_variant.inventory_quantity <= max_inventory
      assign show_remaining_class = 'count-is-low'
      assign current_inventory = current_variant.inventory_quantity | at_most: max_inventory_quantity
    elsif current_variant.inventory_quantity > 0 and current_variant.inventory_quantity > max_inventory and show_notice == 'always'
      assign show_remaining_class = 'count-is-in'
    elsif current_variant.inventory_quantity < 1 and show_notice == 'always'
      assign show_remaining_class = 'count-is-out'
    endif
  endif

  assign quantity_tracking = false
  assign show_inventory = false
  assign has_low_inventory = false
  assign has_soldout = false
  assign variants_inventory = product.variants | map: 'inventory_quantity'
  for inventory_quantity in variants_inventory
    if inventory_quantity > 0 and inventory_quantity < max_inventory
      assign has_low_inventory = true
    endif

    if inventory_quantity < 1
      assign has_soldout = true
    endif
  endfor

  if has_low_inventory or has_soldout and show_notice == 'always'
    assign show_inventory = true
  endif

  assign variant_count = 1
  for option in product.options_with_values
    assign variant_count = variant_count | times: option.values.size
  endfor

  if variant_count > product.variants.size
    assign has_unavailable_variants = true
  endif

  if show_buy_buttons == false and has_unavailable_variants
    assign show_inventory = true
  endif

  assign inventory_management = product.variants | where: 'inventory_management', 'shopify'
  if inventory_management.size > 0
    assign quantity_tracking = true
  endif

  capture in_stock_icon_color
    if in_stock_color != blank and in_stock_color != 'rgba(0,0,0,0)'
      echo ' style="--icon-color: ' | append: in_stock_color | append: '"'
    endif
  endcapture

  capture low_stock_icon_color
    if low_stock_color != blank and low_stock_color != 'rgba(0,0,0,0)'
      echo ' style="--icon-color: ' | append: low_stock_color | append: '"'
    endif
  endcapture

  capture out_of_stock_icon_color
    if out_of_stock_color != blank and out_of_stock_color != 'rgba(0,0,0,0)'
      echo ' style="--icon-color: ' | append: out_of_stock_color | append: '"'
    endif
  endcapture
-%}

{%- if quantity_tracking and show_inventory or quantity_tracking and show_notice == 'always' -%}
  {%- capture inventory -%}
    <span data-remaining-count>{{ current_inventory | default: 0 }}</span>
  {%- endcapture -%}

  <div class="product__block variant__countdown {{ show_remaining_class }} block-padding"
    data-remaining-max="{{ max_inventory }}"
    data-remaining-show-notice="{{ show_notice }}"
    data-remaining-wrapper
    {{ block.shopify_attributes }}
    {{ block_style }}>
    <span class="variant__countdown--in"{{ in_stock_icon_color }}>
      {% render 'icon-in-stock' %}
      <span class="variant__countdown-text">{{ 'products.product.in_stock' | t }}</span>
    </span>
    {%- if hide_inventory_count -%}
      <span class="variant__countdown--low"{{ low_stock_icon_color }}>
        {% render 'icon-low-inventory' %}
        <span class="variant__countdown-text">{{ 'products.product.remaining_no_count' | t }}</span>
      </span>
    {%- else -%}
      <span class="variant__countdown--low"{{ low_stock_icon_color }}>
        {% render 'icon-low-inventory' %}
        <span class="variant__countdown-text">{{ 'products.product.remaining_html' | t: inventory: inventory }}</span>
      </span>
    {%- endif -%}

    <span class="variant__countdown--out"{{ out_of_stock_icon_color }}>
      {% render 'icon-out-of-stock' %}
      <span class="variant__countdown-text">{{ 'products.product.out_of_stock' | t }}</span>
    </span>
    <span class="variant__countdown--unavailable"{{ out_of_stock_icon_color }}>
      {% render 'icon-out-of-stock' %}
      <span class="variant__countdown-text">{{ 'products.product.item_unavailable' | t }}</span>
    </span>

    <script data-product-remaining-json type="application/json">
      {
        {%- liquid
          for variant in product.variants
            assign variant_id = variant.id | json

            if variant.inventory_management and variant.inventory_policy == 'deny'
              assign quantity = variant.inventory_quantity | at_most: max_inventory_quantity

              if hide_inventory_count
                if quantity < 1
                  assign remaining_value = 'out'
                elsif quantity > 0 and quantity < max_inventory
                  assign remaining_value = 'low'
                else
                  assign remaining_value = 'in'
                endif
              else
                assign remaining_value = quantity
              endif
            else
              assign remaining_value = 'unavailable'
            endif

            echo '"' | append: variant_id | append: '": "' | append: remaining_value | append: '"'

            unless forloop.last
              echo ','
            endunless
          endfor
        -%}
      }
    </script>
  </div>
{%- elsif request.design_mode -%}
  <div {{ block.shopify_attributes }}></div>
{%- endif -%}

                  {%- when 'upsell' -%}
                    {%- assign upsell_product = product.metafields.theme.upsell.value | default: block.settings.upsell_product -%}
                    {%- assign upsell_product_list = product.metafields.theme.upsell_list.value | default: block.settings.upsell_product_list -%}

                    {%- if upsell_product != blank or upsell_product_list != blank or request.design_mode -%}
                      <div class="product__block product__upsell block-padding" {{ block.shopify_attributes }} {{ block_style }}>
                        {%- assign upsell_title = 'products.general.upsell_title' | t -%}

                        {%- capture upsell_products -%}
                          {%- if upsell_product == blank and upsell_product_list == blank -%}
                            {%- render 'upsell-product' -%}
                          {%- else -%}
                            {%- if upsell_product != blank -%}
                              {%- render 'upsell-product', upsell_product: upsell_product, show_avaialable_upsell_only: block.settings.show_avaialable_upsell_only -%}
                            {%- endif -%}

                            {%- if upsell_product_list != blank -%}
                              {%- for upsell_product in upsell_product_list -%}
                                {%- render 'upsell-product', upsell_product: upsell_product, show_avaialable_upsell_only: block.settings.show_avaialable_upsell_only -%}
                              {%- endfor -%}
                            {%- endif -%}
                          {%- endif -%}
                        {%- endcapture -%}

                        {%- if upsell_products != blank -%}
                          <p class="product-upsell__holder__title">{{ upsell_title }}</p>
                          {{ upsell_products }}
                        {%- endif -%}
                      </div>
                    {%- endif -%}

                  {%- when 'pickup' -%}
                    <pickup-availability class="product__block product__pickup block-padding" data-store-availability-container="{{ current_variant.id }}" {{ block.shopify_attributes }} {{ block_style }}></pickup-availability>

                  {%- when 'code' -%}
                    <div class="product__block product__custom-code block-padding" {{ block_style }} {{ block.shopify_attributes }}>
                      {{ block.settings.code }}
                    </div>

                  {%- when 'siblings' -%}
                    {%- render 'product-siblings' product: product, product_form_id: product_form_id, block: block, block_style: block_style, quick_add_product: false -%}

                  {%- when 'text' -%}
                    {% comment %} Text block for product {% endcomment %}
{%- if block.settings.title != blank or block.settings.text != blank -%}
  <div class="product__block product__text{% if block.settings.layout == "inline" %} product__text--inline{% endif %} block-padding" {{ block.shopify_attributes }} {{ block_style }}>
    {%- if block.settings.title != blank -%}
      <p class="product__heading strong">
        {{- block.settings.title -}}
      </p>
    {%- endif -%}

    {%- if block.settings.text != blank -%}
      <div class="product__subheading">
        {{- block.settings.text -}}
      </div>
    {%- endif -%}
  </div>
{%- endif -%}

                  {%- when 'icon' -%}
                    {%- render 'icon' block: block, index: forloop.index0, is_product: true -%}

                  {%- when 'sharing' -%}
                    <div class="product__block block-padding" {{ block.shopify_attributes }} {{ block_style }}>
                      {%- assign share_url = current_variant.url | prepend: request.origin -%}
                      {%- render 'share-button' share_url: share_url -%}
                    </div>

                  {%- when 'divider' -%}
                    {%- render 'divider' block: block, modifier: 'product__block product__block--divider' -%}

                  {%- when 'line-item' -%}
                    <div class="product__block{% if settings.show_lines %} product__block--lines{% endif %} select__fieldset block-padding" {{ block.shopify_attributes }} {{ block_style }}>
  {%- if block.settings.label != blank -%}
    {%- assign input_id = unique | append: '-' | append: block.id | append: '-' | append: forloop.index -%}
    {%- assign required = block.settings.required -%}
    {%- case block.settings.type -%}
      {%- when 'text' -%}
        <label for="{{ input_id }}" class="select__label">{{ block.settings.label | escape_once }}</label>

        <input
          type="text" class="properties__input"
          id="{{ input_id }}"
          form="{{ product_form_id }}"
          {% if required %} required {% endif %}
          name="properties[{{ block.settings.label | escape_once }}]">

      {%- when 'checkbox' -%}
        {%- if block.settings.unchecked_value != blank and block.settings.checked_value != blank -%}
          <div class="properties__checkbox checkbox">
            <input
              type="hidden"
              name="properties[{{ block.settings.label | escape_once }}]"
              form="{{ product_form_id }}"
              value="{{ block.settings.unchecked_value }}">

            <input
              type="checkbox"
              name="properties[{{ block.settings.label | escape_once }}]"
              id="{{ input_id }}"
              form="{{ product_form_id }}"
              value="{{ block.settings.checked_value }}">

            <label
              class="radio__fieldset__label"
              for="{{ input_id }}">{{ block.settings.label | escape_once }}</label>
          </div>
        {%- endif -%}

    {%- when 'dropdown' -%}
      {%- capture line_item_options -%}
        <ul id="{{ unique }}-select-{{ option.name | handle }}" class="select-popout__list" data-popout-list data-scroll-lock-scrollable>
          {%- assign has_selected = false -%}
          {%- assign selected_value = '' -%}

          {%- for i in (1..3) -%}
            {%- assign value = 'option_' | append: forloop.index -%}
            {%- assign value = block.settings[value] -%}

            {%- if value != blank -%}
              <li class="select-popout__item{% unless has_selected %} is-active{% endunless %}">
                <a class="select-popout__option"
                  href="#"
                  {% unless has_selected %}aria-current="true"{% endunless %}
                  data-value="{{ value | escape_once }}"
                  data-popout-option>
                  <span>
                    {{ value | escape_once }}
                  </span>
                </a>
              </li>

              {%- unless has_selected -%}
                {%- assign selected_value = value -%}
              {%- endunless -%}
              {%- assign has_selected = true -%}
            {%- endif -%}
          {%- endfor -%}
        </ul>
      {%- endcapture -%}

      {%- if has_selected -%}
        <span class="radio__legend">
          <span class="radio__legend__label">{{ block.settings.label | escape_once }}</span>
        </span>

        <popout-select class="select-popout">
          <button type="button"
            class="select-popout__toggle"
            aria-expanded="false"
            aria-controls="{{ unique }}-select-{{ option.name | handle }}"
            aria-labelledby="{{ unique }}-select-{{ option.name | handle }}-label"
            data-popout-toggle>
            <span data-popout-toggle-text>{{ selected_value }}</span>
            {%- render 'icon-nav-arrow-down' -%}
          </button>

          {{ line_item_options }}

          <input
            type="hidden"
            name="properties[{{ block.settings.label | escape_once }}]"
            id="{{ input_id }}"
            value="{{ selected_value | escape_once }}"
            form="{{ product_form_id }}"
            data-popout-input
            data-single-option-selector>
        </popout-select>
      {%- endif -%}
    {%- endcase -%}
  {%- endif -%}
</div>

                  {%- when 'features' -%}
                    {% comment %} Features block for Product {% endcomment %}

                    {%- liquid
                      assign block_id = block.id
                      assign text = block.settings.text
                      assign title = block.settings.title
                      assign prev_index = forloop.index0 | minus: 1
                      assign next_index = forloop.index0 | plus: 1
                      assign prev_block = section.blocks[prev_index]
                      assign next_block = section.blocks[next_index]
                      assign image = block.settings.icon_alt
                      assign bg_color = block.settings.bg_color
                      assign text_color = block.settings.color

                      comment
                        Always force dots style to be "line" except if "Circle" is chosen from the global settings
                      endcomment
                      assign dots_style = 'line'
                      if settings.dots_style == 'circle'
                        assign dots_style = 'circle'
                      endif

                      capture style
                        if bg_color != 'rgba(0,0,0,0)' and bg_color != blank
                          echo '--bg: ' | append: bg_color | append: ';'
                        endif

                        if text_color != 'rgba(0,0,0,0)' and text_color != blank
                          echo '--text: ' | append: text_color | append: ';'
                        endif
                      endcapture
                    -%}

                    {%- if forloop.index0 == 0 or prev_block.type != 'features' -%}
                      {%- assign slide_index = 0 -%}
                      <div class="product__block product__features block-padding"
                        {{ block_style }}
                        data-slider
                        data-slider-fullwidth
                        data-dots="{{ dots_style }}"
                        data-options='{"pageDots": true, "adaptiveHeight": true, "autoPlay": false, "prevNextButtons": false, "fade": false, "draggable": ">1"}'
                      >
                    {%- endif -%}

                    <div class="product__feature"
                      data-slide="{{ block_id }}"
                      data-slide-index="{{ slide_index }}"
                      data-block-id="{{ block_id }}"
                      {% if style != blank %}
                        style="{{ style }}"
                      {% endif %}
                      {{ block.shopify_attributes }}>

                      <div class="product__feature__content">
                        <div class="block__icon__container product__feature__heading">
                          {%- assign icon_size = block.settings.icon_size -%}
                          <div class="block__icon" style="--icon-size: {{ icon_size }}px;">
                            {%- liquid
                              if image
                                assign icon_width = icon_size
                                assign icon_width_retina = icon_width | times: 2
                                assign icon_sizes = icon_width | append: 'px'
                                assign icon_widths = icon_width | append: ', ' | append: icon_width_retina
                                render 'image' image: image, width: icon_width_retina, sizes: icon_sizes, widths: icon_widths, show_backfill: false
                              else
                                render 'animated-icon', filename: block.settings.icon_name
                              endif
                            -%}
                          </div>

                          {%- if title != blank -%}
                            {%- assign font_size_class = block.settings.text_size | prepend: 'body-size-' -%}
                            <div class="block__icon__text {{ font_size_class }}">
                              <p>{{ title }}</p>
                            </div>
                          {%- endif -%}
                        </div>

                        {%- if text != blank -%}
                          <div class="rte">
                            {{ text }}
                          </div>
                        {%- endif -%}
                      </div>
                    </div>

                    {%- if forloop.index == section.blocks.size or next_block.type != 'features' -%}
                      </div>
                    {%- endif -%}

                    {%- assign slide_index = slide_index | plus: 1 -%}

                  {%- when 'popup' -%}
                    {%- liquid
  assign link_text = block.settings.title
  assign popup_content = block.settings.page.content | default: block.settings.text
  assign image = block.settings.image
  assign icon_size = block.settings.icon_size
  assign icon_color = block.settings.icon_color

  capture block_style
    echo 'style="'
    echo '--block-padding-bottom: ' | append: block.settings.padding_bottom | append: 'px;'
    echo '"'
  endcapture

  capture icon_style
    echo 'style="'
    echo '--icon-size: ' | append: icon_size | append: 'px;'
    if icon_color != blank and icon_color != 'rgba(0,0,0,0)'
      echo '--text: ' | append: icon_color | append: ';'
    endif
    echo '"'
  endcapture
-%}

<product-modal class="product__block block-padding" {{ block_style }}>
  <div class="block__icon__container block__icon__container--full">
    <div class="block__icon" data-aos="img-in" {{ icon_style }}>
      {%- liquid
        if image
          assign icon_width = icon_size
          assign icon_width_retina = icon_width | times: 2
          assign icon_sizes = icon_width | append: 'px'
          assign icon_widths = icon_width | append: ', ' | append: icon_width_retina

          render 'image' image: image, width: icon_width_retina, sizes: icon_sizes, widths: icon_widths, show_backfill: false
        else
          render 'animated-icon', filename: block.settings.icon_name
        endif
      -%}
    </div>

    <a class="radio__legend__link text-link" href="{{ block.settings.page.url }}" data-popup-open {{ block.shopify_attributes }}>
      {{ link_text | escape }}
    </a>
  </div>

  <dialog class="product-modal" aria-hidden="true" inert data-scroll-lock-required>
    <form method="dialog">
      <button class="visually-hidden no-js" aria-label="{{ 'general.accessibility.close' | t }}"></button>
    </form>

    <div class="product-modal__outer">
      <div class="product-modal__content small" data-scroll-lock-scrollable>
        <button type="button" class="product-modal__close" data-popup-close autofocus aria-label="{{ 'general.accessibility.close' | t }}">
          {%- render 'icon-cancel' -%}
        </button>

        {{ popup_content }}
      </div>
    </div>
  </dialog>
</product-modal>

                  {%- when 'complementary-products' -%}
                    <div class="product__block product__complementary block-padding" {{ block.shopify_attributes }} {{ block_style }}>
                      <complementary-products class="complementary-products"
                        data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=10&intent=complementary" >
                        {%- if recommendations.performed and recommendations.products_count > 0 -%}
                          {%- assign complementary_products_title = 'products.general.complementary_products_title' | t -%}
                          {%- if complementary_products_title != blank -%}
                            <p class="complementary-products__title">{{ complementary_products_title }}</p>
                          {%- endif -%}

                          {%- for product in recommendations.products limit: block.settings.complementary_limit-%}
                            {%- render 'upsell-product', upsell_product: product -%}
                          {%- endfor -%}
                        {%- endif -%}
                      </complementary-products>
                    </div>

                  {%- when 'badges' -%}
                    <div class="product__block product__badges block-padding"
                      {{ block.shopify_attributes }}
                      {{ block_style }}>

                      {%- if badge != '' and block.settings.product_badges -%}
                        <span class="badge-box">{{ badge }}</span>
                      {%- endif -%}

                      {%- if preorder and sold_out == false and block.settings.product_badges-%}
                        <span class="preorder-box">{{ 'products.product.pre_order' | t }}</span>
                      {%- endif -%}

                      {%- if on_sale and sold_out == false and block.settings.sale_badge -%}
                        <span class="sale-box">{{ 'products.product.on_sale' | t }}</span>
                      {%- endif -%}
                    </div>

                  {%- when 'countdown' -%}
                    {%- assign layout = block.settings.text_align -%}
                    {%- assign font_size_class = block.settings.heading_size | prepend: 'heading-size-' -%}

                    <div class="product__block countdown-block block-padding flex-column {{ layout }}"
                      {{ block_style }}
                      data-countdown-block
                      {{ block.shopify_attributes }}>
                      <div class="countdown-block__text {{ font_size_class }}">
                        {%- if block.settings.text != blank -%}
                          {{ block.settings.text }}
                        {%- endif -%}
                      </div>

                      <div class="countdown-block__timer">
                        {%- render 'countdown-timer',
                          text_size_desktop: block.settings.text_size,
                          text_size_mobile: block.settings.text_size,
                          end_date: block.settings.end_date,
                          end_time: block.settings.end_time,
                          period: block.settings.period,
                          end_message: block.settings.end_message,
                          hide_on_complete: block.settings.hide_on_complete,
                        -%}
                      </div>
                    </div>

                    {%- when 'sku' -%}
                      <div class="product__block product__sku block-padding"
                        {{ block_style }}
                        data-variant-sku
                        {{ block.shopify_attributes }}>

                        {{ 'products.product.sku' | t }}: {{ current_variant.sku }}
                      </div>

                  {%- when 'fit-guide' -%}
                    <div class="product__block product__guide guide block-padding" {{ block.shopify_attributes }} {{ block_style }}>
                      {%- if block.settings.heading != blank -%}
                        <p class="guide__heading strong">{{ block.settings.heading }}</p>
                      {%- endif -%}

                      <div class="guide__line">
                        {%- assign selected_segment = block.settings.selected_segment | plus: 0 -%}
                        {%- for idx in (1..5) -%}
                          <span{% if forloop.index == selected_segment %} class="is-active"{% endif %}>{{ forloop.index }}</span>
                        {%- endfor -%}
                      </div>

                      {%- if block.settings.left_label != blank or block.settings.middle_label != blank or block.settings.right_label != blank -%}
                        <div class="guide__content{% unless block.settings.left_label != blank %} guide__content--skip-left{% endunless %}{% unless block.settings.right_label != blank %} guide__content--skip-right{% endunless %}">
                          {%- if block.settings.left_label != blank -%}
                            <small class="guide__left">{{ block.settings.left_label }}</small>
                          {%- endif -%}

                          {%- if block.settings.middle_label != blank -%}
                            <small class="guide__middle">{{ block.settings.middle_label }}</small>
                          {%- endif -%}

                          {%- if block.settings.right_label != blank -%}
                            <small class="guide__right">{{ block.settings.right_label }}</small>
                          {%- endif -%}
                        </div>
                      {%- endif -%}
                    </div>
                {%- endcase -%}
              {%- endfor -%}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% unless product == empty %}
    <script type="application/json" data-product-json>
      {{ product | json }}
    </script>
    <script type="application/json" id="ModelJSON-{{ unique }}">
      {{ product.media | where: 'media_type', 'model' | json }}
    </script>

    {%- liquid
      assign metafields_data = '['
      for variant in product.variants
        assign metafield_value = variant.metafields.theme.final_sale.value | replace: '"', "''"
        assign metafields_data = metafields_data | append: '{"variant_id":"' | append: variant.id | append: '" , "metafield_value":"' | append: metafield_value | append: '"},'
      endfor
      assign metafields_data = metafields_data | append: ']'
      assign metafields_data = metafields_data | replace: ",]", "]"
    -%}

    <span data-variant-final-sale-metafield style="display:none;">{{ metafields_data }}</span>
  {% endunless %}


  {% comment %} Google wants to know when to check your price again {% endcomment %}

  {%- liquid
    assign days_price_is_valid = 1
    assign seconds_in_a_day = 86400
    assign seconds_price_valid = days_price_is_valid | times: seconds_in_a_day

    if product.selected_or_first_available_variant.featured_media
      assign seo_media = product.selected_or_first_available_variant.featured_media
    else
      assign seo_media = product.featured_media
    endif
  -%}

  <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 current_variant.sku != blank -%}
      "sku": {{ current_variant.sku | json }},
    {%- endif -%}
    "brand": {
      "@type": "Organization",
      "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 }},
          "priceValidUntil": "{{ 'now' | date: '%s' | plus: seconds_price_valid | date: '%Y-%m-%d' }}",
          "url" : {{ request.origin | append: variant.url | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  }
  </script>

  {%- if show_cart_bar -%}
    <!-- /partials/cart-bar.liquid -->
{%- liquid
  assign current_variant = product.selected_or_first_available_variant
  assign selling_plan_hide = true
  assign button_add = false
  assign blocks_form = section.blocks | where: 'type', 'form'

  assign current_variant_price_raw = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price
  assign current_variant_compare_at_price_raw = current_variant.compare_at_price

  if current_variant.metafields.app--168074346497.discount_type.value != nil and current_variant.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.01
    assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value

    if current_variant.metafields.app--168074346497.discount_percentage.value > 0.01
      assign deducted_percentage = 1.0 | minus: current_variant.metafields.app--168074346497.discount_percentage.value
    endif

    assign current_variant_price_raw = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
    assign current_variant_compare_at_price_raw = current_variant.price

    if current_variant.compare_at_price > current_variant_compare_at_price_raw
      assign current_variant_compare_at_price_raw = current_variant.compare_at_price
    endif
  endif

  if settings.currency_code_enable
    assign current_variant_price = current_variant_price_raw | money_with_currency
    assign current_variant_compare_at_price = current_variant_compare_at_price_raw | money_with_currency
  else
    assign current_variant_price = current_variant_price_raw | money
    assign current_variant_compare_at_price = current_variant_compare_at_price_raw | money
  endif

  assign any_variant_available = false
  for variant in product.variants
    if variant.available
      assign any_variant_available = true
      break
    endif
  endfor
-%}

{% if product.selling_plan_groups.size > 0 and blocks_form.size > 0 and blocks_form[0].settings.subscriptions_enable_selectors %}
  {%- assign selling_plan_hide = false -%}
{% endif %}

{%- if product.has_only_default_variant and selling_plan_hide -%}
  {%- assign button_add = true -%}
{%- endif -%}

<div id="cart-bar" class="cart-bar">
  <div class="cart-bar__form__wrapper form__wrapper{% if button_add and current_variant.available != true %} variant--soldout{% endif %}{% if settings.show_newsletter %} show-product-notification{% endif %}{% unless any_variant_available %} all-variants--soldout{% endunless %}" data-form-wrapper>
    <div class="cart-bar__info">
      <h4 class="cart-bar__product__title">{{ product.title | strip_html }}</h4>

      <div class="h5--body cart-bar__product__price product__price" data-price-wrapper>
        <span data-product-price {% if current_variant_compare_at_price > current_variant_price %} class="product__price--sale"{% endif %}>
          {%- if current_variant_price == 0 -%}
            {{ 'general.money.free' | t }}
          {%- else -%}
            {{ current_variant_price }}
          {%- endif -%}
        </span>

        {% if product_compare_at_price_max > product_price %}
          <span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
          <s class="product__price--strike" data-compare-price>
            {% if current_variant_compare_at_price > current_variant_price %}
              {{ current_variant_compare_at_price }}
            {% endif %}
          </s>
        {% endif %}
      </div>
    </div>

    <div class="cart-bar__form">
      <div class="cart-bar__submit product__submit product__submit--spb">
        <button type="button"
          class="btn btn--primary btn--outline product__submit__add{% unless button_add %} product__submit__add--default{% endunless %}"
          {% if button_add %} data-add-to-cart-bar{% elsif any_variant_available %} data-cart-bar-scroll{% endif %}
          {% if any_variant_available == false or button_add and current_variant.available != true %} disabled="disabled"{% endif %}>
          <span class="btn__text"{% if button_add %} data-add-to-cart-text{% endif %}>
            {%- if button_add -%}
              {%- assign preorder_check = false -%}

              {%- if product.tags contains '_preorder' or product.metafields.theme.preorder.value -%}
                {%- assign preorder_check = true -%}
              {%- endif -%}

              {%- if current_variant.available and preorder_check -%}
                {{ 'products.product.pre_order' | t }}
              {%- elsif current_variant.available -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- else -%}
                {{ 'products.product.sold_out' | t }}
              {%- endif -%}
            {%- elsif any_variant_available -%}
              {{ 'products.product.configure' | t }}
            {%- else -%}
              {{ 'products.product.sold_out' | t }}
            {%- endif -%}
          </span>

          <span class="btn__loader">
            <svg height="18" width="18" class="svg-loader">
              <circle r="7" cx="9" cy="9" />
              <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
            </svg>
          </span>

          <span class="btn__added">&nbsp;</span>

          {%- unless button_add or any_variant_available == false -%}
            {%- render 'icon-nav-arrow-up' -%}
          {%- endunless -%}
        </button>

        {%- if settings.show_newsletter -%}
          {%- assign newsletter_text = 'general.newsletter_form.newsletter_product_availability' | t -%}
          {%- assign button_text = 'products.product.sold_out' | t | append: ' - ' | append: newsletter_text -%}

          <button type="button"
            class="btn btn--primary btn--outline product__submit__add product__submit__add--default product__cart-bar-notification-button"
            data-cart-bar-product-notification>
            <span class="btn__text">{{ button_text }}</span>
          </button>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

  {%- endif -%}
</div>

{% schema %}
  {
    "name": "Product pages",
    "class": "section-overlay-header",
    "settings": [
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "checkbox",
        "id": "product_sticky_enable",
        "label": "Enable sticky form",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "variant_image_scroll",
        "label": "Enable product image variant scroll",
        "info": "Clicking a variant scrolls user to assigned image",
        "default": true
      },
      {
        "type": "select",
        "id": "image_layout",
        "label": "Style",
        "default": "stacked",
        "options": [
          { "value": "thumbnails", "label": "Thumbnails - Bottom" },
          { "value": "thumbnails-left", "label": "Thumbnails - Left" },
          { "value": "stacked", "label": "Stacked" },
          { "value": "grid-1", "label": "Mosaic" },
          { "value": "grid-2", "label": "Grid" }
        ],
        "info": "Desktop only"
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "normal",
            "label": "Normal"
          },
          {
            "value": "stretch",
            "label": "Stretch - No thumbnails"
          }
        ],
        "default": "normal"
      },
      {
        "type": "header",
        "content": "Cart bar"
      },
      {
        "type": "checkbox",
        "id": "show_cart_bar",
        "label": "Enable cart bar",
        "default": true
      },
      {
        "type": "header",
        "content": "Media",
        "info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "label": "Enable zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": false
      },
      {
        "type": "header",
        "content": "Mobile"
      },
      {
        "type": "select",
        "id": "mobile_image_style",
        "label": "Style",
        "options": [
          {
            "value": "thumbs",
            "label": "Thumbnails"
          },
          {
            "value": "slider",
            "label": "Slider"
          }
        ],
        "default": "thumbs"
      },
      {
        "type": "header",
        "content": "Section padding"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 90
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding bottom",
        "default": 30
      }
    ],
    "blocks": [
      {
        "type": "@app"
      },
      {
        "type": "title",
        "name": "Title",
        "limit": 1,
        "settings": [
          {
            "type": "select",
            "id": "subheading_option",
            "label": "Navigation",
            "default": "none",
            "options": [
              { "value": "none", "label": "None" },
              { "value": "breadcrumb", "label": "Breadcrumb" },
              { "value": "collection", "label": "Collection" },
              { "value": "vendor", "label": "Vendor" }
            ]
          },
          {
            "type": "range",
            "id": "text_size",
            "label": "Text size",
            "min": 1,
            "max": 15,
            "step": 1,
            "default": 6
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 8
          }
        ]
      },
      {
        "type": "price",
        "name": "Price",
        "limit": 1,
        "settings": [
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "variants",
        "name": "Variant picker",
        "limit": 1,
        "settings": [
          {
            "type": "header",
            "content": "Size chart"
          },
          {
            "type": "page",
            "id": "info_page",
            "label": "Page",
            "info": "[Learn more](https://broadcast.invisiblethemes.com/products/product-pages/size-charts)"
          },
          {
            "type": "select",
            "id": "size_chart_style",
            "label": "Style",
            "default": "text",
            "options": [
              { "value": "text", "label": "Text" },
              { "value": "ruler", "label": "Ruler" },
              { "value": "question", "label": "Question mark" }
            ]
          },
          {
            "type": "header",
            "content": "Subscriptions",
            "info": "Learn more about [subscriptions](https://help.shopify.com/en/manual/products/subscriptions)"
          },
          {
            "type": "checkbox",
            "id": "subscriptions_enable_selectors",
            "label": "Enable subscription selectors",
            "info": "Shown on products with subscription options",
            "default": false
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "buttons",
        "name": "Buy buttons",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_quantity",
            "label": "Show quantity selector",
            "default": true
          },
          {
            "type": "checkbox",
            "id": "show_payment_button",
            "label": "Show dynamic checkout buttons",
            "info": "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/en/manual/online-store/os/dynamic-checkout)",
            "default": true
          },
          {
            "type": "checkbox",
            "id": "show_gift_card_recipient",
            "label": "Show recipient information form for gift card products",
            "default": false,
            "info": "Gift card products can optionally be sent direct to a recipient along with a personal message."
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 32
          }
        ]
      },
      {
        "type": "siblings",
        "name": "Siblings",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "Siblings allow you to split colors into separate products. [Learn more](https://broadcast.invisiblethemes.com/siblings/product-siblings/about-product-siblings)"
          },
          {
            "type": "text",
            "id": "siblings_collection",
            "label": "Product siblings collection handle",
            "info": "Use a metafield containing a collection handle for color siblings.  The collection should contain all color options as unique products."
          },
          {
            "type": "text",
            "id": "sibling_color",
            "label": "Product color metafield",
            "info": "Use a single line text metafield called 'theme.sibling_color' for product color."
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "description",
        "name": "Description",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_read_more",
            "label": "Show read more button",
            "default": true
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 0
          }
        ]
      },
      {
        "type": "tab_richtext",
        "name": "Tabs",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_description",
            "label": "Show description",
            "default": true
          },
          {
            "type": "checkbox",
            "id": "show_read_more",
            "label": "Show read more button",
            "default": false
          },
          {
            "type": "text",
            "id": "title_1",
            "label": "Tab heading",
            "default": "Tab"
          },
          {
            "type": "richtext",
            "id": "raw_content_1",
            "label": "Tab text",
            "default": "<p>This content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
          },
          {
            "type": "text",
            "id": "title_2",
            "label": "Tab heading",
            "default": "Info"
          },
          {
            "type": "richtext",
            "id": "raw_content_2",
            "label": "Tab text",
            "default": "<p>You can use product metafields to assign content to this tab that is unique to an individual product.  Use tabs to highlight unique features, sizing information, or other sales information.</p>"
          },
          {
            "type": "text",
            "id": "title_3",
            "label": "Tab heading"
          },
          {
            "type": "richtext",
            "id": "raw_content_3",
            "label": "Tab text"
          },
          {
            "type": "text",
            "id": "title_4",
            "label": "Tab heading"
          },
          {
            "type": "richtext",
            "id": "raw_content_4",
            "label": "Tab text"
          },
          {
            "type": "text",
            "id": "title_5",
            "label": "Tab heading"
          },
          {
            "type": "richtext",
            "id": "raw_content_5",
            "label": "Tab text"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 0
          }
        ]
      },
      {
        "type": "accordion",
        "name": "Accordion",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_description",
            "label": "Show description",
            "default": false
          },
          {
            "type": "checkbox",
            "id": "show_read_more",
            "label": "Show read more button",
            "default": true
          },
          {
            "type": "checkbox",
            "id": "default_open",
            "label": "Open by default",
            "default": false
          },
          {
            "type": "text",
            "id": "heading",
            "label": "Heading",
            "default": "Accordion"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>This content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 0
          }
        ]
      },
      {
        "type": "upsell",
        "name": "Upsell",
        "limit": 1,
        "settings": [
          {
            "type": "product",
            "id": "upsell_product",
            "label": "Single product"
          },
          {
            "type": "product_list",
            "id": "upsell_product_list",
            "label": "Product list",
            "limit": 3,
            "info": "Choose up to 3 upsell products"
          },
          {
            "type": "checkbox",
            "id": "show_avaialable_upsell_only",
            "label": "Show only items in stock",
            "default": false
          },
          {
            "type": "header",
            "content": "Cart"
          },
          {
            "type": "paragraph",
            "content": "Use a dynamic source with the metafield 'theme.upsell' for single product or 'theme.upsell_list' for product list to allow product upsells to follow users into the cart. Use any other name to limit this feature to the product page. [Learn more](https://broadcast.invisiblethemes.com/products/upselling)"
          },
          {
            "type": "header",
            "content": "Colors"
          },
          {
            "type": "color",
            "id": "bg_color",
            "label": "Background"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "inventory_countdown",
        "name": "Inventory countdown",
        "limit": 1,
        "settings": [
          {
            "type": "select",
            "id": "show_notice",
            "label": "Show notice",
            "default": "low-inventory",
            "options": [
              { "label": "Always", "value": "always" },
              { "label": "Low inventory", "value": "low-inventory" }
            ]
          },
          {
            "type": "range",
            "id": "max_inventory",
            "label": "Low inventory threshold",
            "min": 1,
            "max": 50,
            "step": 1,
            "default": 10
          },
          {
            "type": "checkbox",
            "id": "hide_inventory_counter",
            "label": "Hide inventory counter",
            "default": true
          },
          {
            "type": "range",
            "id": "icon_size",
            "label": "Icon size",
            "unit": "px",
            "min": 20,
            "max": 80,
            "step": 5,
            "default": 20
          },
          {
            "type": "header",
            "content": "Colors"
          },
          {
            "type": "color",
            "id": "in_stock_color",
            "label": "In stock",
            "default": "#56AD6A"
          },
          {
            "type": "color",
            "id": "low_stock_color",
            "label": "Low stock",
            "default": "#f79554"
          },
          {
            "type": "color",
            "id": "out_of_stock_color",
            "label": "Out of stock",
            "default": "#721C24"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "sharing",
        "name": "Sharing",
        "limit": 1,
        "settings": [
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "pickup",
        "name": "Local pickup",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 32
          }
        ]
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Have questions?"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Get in touch with us at any time.</p>"
          },
          {
            "type": "select",
            "id": "layout",
            "label": "Layout",
            "options": [
              {
                "value": "left",
                "label": "Left"
              },
              {
                "value": "inline",
                "label": "In-line"
              }
            ],
            "default": "left"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "code",
        "name": "Custom code",
        "settings": [
          {
            "type": "liquid",
            "id": "code",
            "label": "Custom code",
            "info": "Add app snippets or other Liquid code to create advanced customizations."
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "icon",
        "name": "Icon",
        "settings": [
          {
            "type": "select",
            "id": "icon_name",
            "label": "Icon",
            "default": "icon-award",
            "options": [
              { "label": "Award", "value": "icon-award" },
              { "label": "Box", "value": "icon-box" },
              { "label": "Chat", "value": "icon-chat" },
              { "label": "Cloud", "value": "icon-cloud" },
              { "label": "Diameter", "value": "icon-diameter" },
              { "label": "Discount", "value": "icon-discount" },
              { "label": "Donation", "value": "icon-donation" },
              { "label": "Droplet", "value": "icon-droplet" },
              { "label": "Info", "value": "icon-info-empty" },
              { "label": "Email", "value": "icon-email" },
              { "label": "Fast shipment", "value": "icon-fast-shipment" },
              { "label": "Flare", "value": "icon-flare" },
              { "label": "Flower", "value": "icon-flower" },
              { "label": "Gift", "value": "icon-gift" },
              { "label": "Green shipment", "value": "icon-green-shipment" },
              { "label": "Heart", "value": "icon-heart" },
              { "label": "Leaf", "value": "icon-leaf" },
              { "label": "Lightning", "value": "icon-lightning" },
              { "label": "Location", "value": "icon-location" },
              { "label": "Mail", "value": "icon-mail" },
              { "label": "Notes", "value": "icon-notes" },
              { "label": "Pants", "value": "icon-pants" },
              { "label": "Peace", "value": "icon-peace" },
              { "label": "Pin", "value": "icon-pin" },
              { "label": "Planet", "value": "icon-planet" },
              { "label": "Phone", "value": "icon-phone" },
              { "label": "Recycle", "value": "icon-recycle" },
              { "label": "Ruler", "value": "icon-ruler" },
              { "label": "Shield", "value": "icon-shield" },
              { "label": "Smile", "value": "icon-smile" },
              { "label": "Star", "value": "icon-star" },
              { "label": "Tree", "value": "icon-tree" },
              { "label": "Trophy", "value": "icon-trophy" },
              { "label": "Truck", "value": "icon-truck" },
              { "label": "Vegan", "value": "icon-vegan" },
              { "label": "Wash", "value": "icon-wash" },
              { "label": "Washing machine", "value": "icon-washing-machine" }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Alternative icon/image"
          },
          {
            "type": "range",
            "id": "icon_size",
            "label": "Size",
            "unit": "px",
            "min": 20,
            "max": 80,
            "step": 5,
            "default": 20
          },
          {
            "type": "color",
            "id": "icon_color",
            "label": "Icon color",
            "default": "#545454"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Title"
          },
          {
            "type": "range",
            "id": "text_size",
            "label": "Text size",
            "min": 1,
            "max": 15,
            "step": 1,
            "default": 3
          },
          {
            "type": "header",
            "content": "Layout"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Width",
            "default": "full",
            "options": [
              { "label": "Full width", "value": "full" },
              { "label": "Half", "value": "half" },
              { "label": "One third", "value": "third" },
              { "label": "One quarter", "value": "quarter" }
            ]
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "divider",
        "name": "Divider",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_line",
            "label": "Show line",
            "default": true
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "label": "Padding bottom",
            "default": 20
          }
        ]
      },
      {
        "type": "line-item",
        "name": "Line item property",
        "settings": [
          {
            "type": "text",
            "id": "label",
            "label": "Label",
            "default": "Your label"
          },
          {
            "type": "select",
            "id": "type",
            "label": "Type",
            "default": "text",
            "options": [
              { "label": "Text", "value": "text" },
              { "label": "Checkbox", "value": "checkbox" },
              { "label": "Dropdown", "value": "dropdown" }
            ]
          },
          {
            "type": "header",
            "content": "Text",
            "info": "For Type set to \"Text\"."
          },
          {
            "type": "checkbox",
            "id": "required",
            "label": "Required",
            "default": true
          },
          {
            "type": "header",
            "content": "Checkbox",
            "info": "For Type set to \"Checkbox\"."
          },
          {
            "type": "text",
            "id": "checked_value",
            "label": "Checked value",
            "default": "Yes"
          },
          {
            "type": "text",
            "id": "unchecked_value",
            "label": "Unchecked value",
            "default": "No"
          },
          {
            "type": "header",
            "content": "Dropdown",
            "info": "For Type set to \"Dropdown\"."
          },
          {
            "type": "text",
            "id": "option_1",
            "label": "Option 1",
            "default": "Option 1"
          },
          {
            "type": "text",
            "id": "option_2",
            "label": "Option 2",
            "default": "Option 2"
          },
          {
            "type": "text",
            "id": "option_3",
            "label": "Option 3",
            "default": "Option 3"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "features",
        "name": "Feature",
        "settings": [
          {
            "type": "select",
            "id": "icon_name",
            "label": "Icon",
            "default": "icon-award",
            "options": [
              { "label": "Award", "value": "icon-award" },
              { "label": "Box", "value": "icon-box" },
              { "label": "Chat", "value": "icon-chat" },
              { "label": "Cloud", "value": "icon-cloud" },
              { "label": "Diameter", "value": "icon-diameter" },
              { "label": "Discount", "value": "icon-discount" },
              { "label": "Donation", "value": "icon-donation" },
              { "label": "Droplet", "value": "icon-droplet" },
              { "label": "Info", "value": "icon-info-empty" },
              { "label": "Email", "value": "icon-email" },
              { "label": "Fast shipment", "value": "icon-fast-shipment" },
              { "label": "Flare", "value": "icon-flare" },
              { "label": "Flower", "value": "icon-flower" },
              { "label": "Gift", "value": "icon-gift" },
              { "label": "Green shipment", "value": "icon-green-shipment" },
              { "label": "Heart", "value": "icon-heart" },
              { "label": "Leaf", "value": "icon-leaf" },
              { "label": "Lightning", "value": "icon-lightning" },
              { "label": "Location", "value": "icon-location" },
              { "label": "Mail", "value": "icon-mail" },
              { "label": "Notes", "value": "icon-notes" },
              { "label": "Pants", "value": "icon-pants" },
              { "label": "Peace", "value": "icon-peace" },
              { "label": "Pin", "value": "icon-pin" },
              { "label": "Planet", "value": "icon-planet" },
              { "label": "Phone", "value": "icon-phone" },
              { "label": "Recycle", "value": "icon-recycle" },
              { "label": "Ruler", "value": "icon-ruler" },
              { "label": "Shield", "value": "icon-shield" },
              { "label": "Smile", "value": "icon-smile" },
              { "label": "Star", "value": "icon-star" },
              { "label": "Tree", "value": "icon-tree" },
              { "label": "Trophy", "value": "icon-trophy" },
              { "label": "Truck", "value": "icon-truck" },
              { "label": "Vegan", "value": "icon-vegan" },
              { "label": "Wash", "value": "icon-wash" },
              { "label": "Washing machine", "value": "icon-washing-machine" }
            ]
          },
          {
            "type": "image_picker",
            "id": "icon_alt",
            "label": "Alternative icon/image"
          },
          {
            "type": "range",
            "id": "icon_size",
            "label": "Size",
            "unit": "px",
            "min": 20,
            "max": 80,
            "step": 5,
            "default": 20
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Feature"
          },
          {
            "type": "range",
            "id": "text_size",
            "label": "Text size",
            "min": 1,
            "max": 15,
            "step": 1,
            "default": 3
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>This content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
          },
          {
            "type": "header",
            "content": "Colors"
          },
          {
            "id": "bg_color",
            "type": "color",
            "label": "Background",
            "default": "#F7F9FA"
          },
          {
            "type": "color",
            "id": "color",
            "label": "Text",
            "default": "#212121"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding",
            "default": 16
          }
        ]
      },
      {
        "type": "complementary-products",
        "name": "Complementary products",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
          },
          {
            "type": "range",
            "id": "complementary_limit",
            "min": 1,
            "max": 3,
            "step": 1,
            "label": "Number of products",
            "default": 3
          },
          {
            "type": "header",
            "content": "Colors"
          },
          {
            "type": "color",
            "id": "bg_color",
            "label": "Background"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "popup",
        "name": "Popup",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Link text",
            "default": "Popup text"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Additonal information about the product.</p>"
          },
          {
            "type": "page",
            "id": "page",
            "label": "Page"
          },
          {
            "type": "select",
            "id": "icon_name",
            "label": "Icon",
            "default": "icon-award",
            "options": [
              { "label": "Award", "value": "icon-award" },
              { "label": "Box", "value": "icon-box" },
              { "label": "Chat", "value": "icon-chat" },
              { "label": "Cloud", "value": "icon-cloud" },
              { "label": "Diameter", "value": "icon-diameter" },
              { "label": "Discount", "value": "icon-discount" },
              { "label": "Donation", "value": "icon-donation" },
              { "label": "Droplet", "value": "icon-droplet" },
              { "label": "Info", "value": "icon-info-empty" },
              { "label": "Email", "value": "icon-email" },
              { "label": "Fast shipment", "value": "icon-fast-shipment" },
              { "label": "Flare", "value": "icon-flare" },
              { "label": "Flower", "value": "icon-flower" },
              { "label": "Gift", "value": "icon-gift" },
              { "label": "Green shipment", "value": "icon-green-shipment" },
              { "label": "Heart", "value": "icon-heart" },
              { "label": "Leaf", "value": "icon-leaf" },
              { "label": "Lightning", "value": "icon-lightning" },
              { "label": "Location", "value": "icon-location" },
              { "label": "Mail", "value": "icon-mail" },
              { "label": "Notes", "value": "icon-notes" },
              { "label": "Pants", "value": "icon-pants" },
              { "label": "Peace", "value": "icon-peace" },
              { "label": "Pin", "value": "icon-pin" },
              { "label": "Planet", "value": "icon-planet" },
              { "label": "Phone", "value": "icon-phone" },
              { "label": "Recycle", "value": "icon-recycle" },
              { "label": "Ruler", "value": "icon-ruler" },
              { "label": "Shield", "value": "icon-shield" },
              { "label": "Smile", "value": "icon-smile" },
              { "label": "Star", "value": "icon-star" },
              { "label": "Tree", "value": "icon-tree" },
              { "label": "Trophy", "value": "icon-trophy" },
              { "label": "Truck", "value": "icon-truck" },
              { "label": "Vegan", "value": "icon-vegan" },
              { "label": "Wash", "value": "icon-wash" },
              { "label": "Washing machine", "value": "icon-washing-machine" }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Alternative icon/image"
          },
          {
            "type": "range",
            "id": "icon_size",
            "label": "Size",
            "unit": "px",
            "min": 20,
            "max": 80,
            "step": 5,
            "default": 20
          },
          {
            "type": "color",
            "id": "icon_color",
            "label": "Icon color",
            "default": "#545454"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "badges",
        "name": "Badges",
        "settings": [
          {
            "type": "checkbox",
            "id": "sale_badge",
            "label": "Show sale badges",
            "default": true
          },
          {
            "type": "checkbox",
            "id": "product_badges",
            "label": "Show product badges",
            "info": "Add tag '_preorder' or '_badge_with_custom_text' to a product in order to show the badge",
            "default": true
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 8
          }
        ]
      },
      {
        "type": "sku",
        "name": "SKU",
        "limit": 1,
        "settings": [
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      },
      {
        "type": "fit-guide",
        "name": "Fit guide",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Heading",
            "default": "Fit"
          },
          {
            "type": "text",
            "id": "selected_segment",
            "label": "Active segment",
            "default": "4",
            "info": "Enter a number from 1 - 5 to show active fit. Use a metafield for a custom fit per product."
          },
          {
            "type": "text",
            "id": "left_label",
            "label": "Left label",
            "default": "Small"
          },
          {
            "type": "text",
            "id": "middle_label",
            "label": "Middle label",
            "default": "True to size"
          },
          {
            "type": "text",
            "id": "right_label",
            "label": "Right label",
            "default": "Large"
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 8
          }
        ]
      },
      {
        "type": "countdown",
        "name": "Countdown timer",
        "settings": [
          {
            "type": "text",
            "id": "end_date",
            "label": "End date",
            "placeholder": "2023-12-31 23:59",
            "default": "2024-12-31",
            "info": "Use format \"YYYY-MM-DD\". Expiration date is based on the [store primary timezone](/admin/settings/general)."
          },
          {
            "type": "text",
            "id": "end_time",
            "label": "End time",
            "default": "11:59",
            "placeholder": "11:59",
            "info": "Use 12-hour time convention in format \"HH:MM\""
          },
          {
            "type": "radio",
            "id": "period",
            "label": "AM/PM",
            "options": [
              { "value": "am", "label": "AM" },
              { "value": "pm", "label": "PM" }
            ],
            "default": "am"
          },
          {
            "type": "richtext",
            "id": "end_message",
            "label": "End of timer message",
            "default": "<p>Offer has expired</p>"
          },
          {
            "type": "checkbox",
            "id": "hide_on_complete",
            "label": "Hide block after end of timer",
            "default": true
          },
          {
            "type": "range",
            "id": "text_size",
            "label": "Digits size",
            "min": 1,
            "max": 15,
            "step": 1,
            "default": 6
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Limited time offer</p>"
          },
          {
            "type": "range",
            "id": "heading_size",
            "label": "Heading size",
            "min": 1,
            "max": 15,
            "step": 1,
            "default": 2
          },
          {
            "type": "header",
            "content": "Colors"
          },
          {
            "type": "color",
            "id": "bg_color",
            "label": "Background",
            "default": "#F7F9FA"
          },
          {
            "type": "color",
            "id": "color",
            "label": "Text"
          },
          {
            "type": "header",
            "content": "Layout"
          },
          {
            "type": "select",
            "id": "text_align",
            "label": "Text alignment",
            "default": "text-center",
            "options": [
              { "value": "text-left","label": "Left" },
              { "value": "text-center","label": "Centered" }
            ]
          },
          {
            "type": "header",
            "content": "Block spacing"
          },
          {
            "type": "range",
            "id": "padding_bottom",
            "min": 0,
            "max": 50,
            "step": 2,
            "unit": "px",
            "label": "Padding bottom",
            "default": 16
          }
        ]
      }
    ]
  }
{% endschema %}