{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px!important;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px!important;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px!important;
      padding-bottom: {{ section.settings.padding_bottom }}px!important;
    }
  }
  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}
{%- endstyle -%}

<div class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient animate-section animate--hidden {{ section.settings.visibility }}">
<div class="section-{{ section.id }}-padding custom-image-slider {% if section.settings.desktop_slider_position == 'left' %}slider-left-desktop{% else %}slider-right-desktop{% endif %}">

  {% if section.settings.mobile_content_position == 'above' %}
    <div class="content-wrapper mobile-content-above animate-item animate-item">
      <h2 class="main-title{% if section.settings.override_heading_size %} {{ section.settings.theme_heading_size }}{% endif %}">{{ section.settings.heading }}</h2>
      <p class="subtitle">{{ section.settings.subheading }}</p>

      {% if section.settings.button_text != blank %}
        {% if section.settings.button_action == 'scroll' %}
          <a href="#ProductInfo-{{ section.id }}" class="claim-button scroll-button" data-scroll-target="ProductInfo-{{ section.id }}">
            {{ section.settings.button_text }}
          </a>
        {% else %}
          <a href="{{ section.settings.button_link }}" class="claim-button">
            {{ section.settings.button_text }}
          </a>
        {% endif %}
      {% endif %}

      {% for block in section.blocks %}
        {% if block.type == 'rating_stars' %}
          <div class="rating-section" style="display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;">
            <div class="rating-stars" {{ block.shopify_attributes }} style="--rating:{{ block.settings.rating }};--star-color:{{ block.settings.star_color }};--bg-star-color:{{ block.settings.bg_star_color }};--font-size:{{ block.settings.size | divided_by: 10.0 }}rem;--alignment:{{ block.settings.alignment }};">
              {% if block.settings.scroll_id != blank %}<a href="{{ block.settings.scroll_id }}">{% endif %}
              <div class="rating-stars-and-text font-size--desktop-auto flex-center">
                <div class="rating-stars__container rating-stars__container--underlay">
                  {% if block.settings.bg_stars_style == 'outlined' %}
                    {% for i in (1..5) %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>{% endfor %}
                  {% else %}
                    {% for i in (1..5) %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>{% endfor %}
                  {% endif %}
                  <div class="rating-stars__container rating-stars__container--overlay">
                    {% for i in (1..5) %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>{% endfor %}
                  </div>
                </div>
                <span class="rating-stars__label" style="color: {{ section.settings.textcolor }};">&nbsp;{{ block.settings.label }}</span>
              </div>
              {% if block.settings.scroll_id != blank %}</a>{% endif %}
            </div>
          </div>
        {% endif %}
        {% if block.type == 'tiktokpill' %}
          <div class="product-info__image-block product-info__image-block--mobile-alignment" style="--image-alignment:{{ block.settings.alignment }};--mobile-image-alignment:{{ block.settings.mobile_alignment }};margin-top:5px;">
            {% render 'social-media-pill', block: block %}
          </div>
        {% endif %}
        {% if block.type == 'trustpilot_stars' %}
          <div class="product-info__image-block product-info__image-block--mobile-alignment" style="--image-alignment:{{ block.settings.alignment }};--mobile-image-alignment:{{ block.settings.mobile_alignment }};margin-top:5px;">
            {% render 'trustpilot-stars-block', block: block, margins: false, block_attributes: true %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

  {%- assign review_images = section.blocks | where: 'type', 'review_image' -%}
  <div class="custom-marquee-track" id="marquee-{{ section.id }}">
    <div class="custom-marquee-inner">
      {% for block in review_images %}
        <div class="custom-marquee-slide" {{ block.shopify_attributes }}>
          <img
            src="{{ block.settings.review_image | img_url: '600x' }}"
            alt="{{ block.settings.review_image.alt | escape }}"
            class="custom-slide-image"
          >
        </div>
      {% endfor %}
      {% for block in review_images %}
        <div class="custom-marquee-slide" aria-hidden="true">
          <img
            src="{{ block.settings.review_image | img_url: '600x' }}"
            alt=""
            class="custom-slide-image"
          >
        </div>
      {% endfor %}
    </div>
  </div>

  {% if section.settings.mobile_content_position == 'below' or section.settings.mobile_content_position == blank %}
    <div class="content-wrapper mobile-content-below animate-item animate-item">
      <h2 class="main-title">{{ section.settings.heading }}</h2>
      <p class="subtitle">{{ section.settings.subheading }}</p>

      {% if section.settings.button_text != blank %}
        {% if section.settings.button_action == 'scroll' %}
          <a href="#ProductInfo-{{ section.id }}" class="claim-button scroll-button" data-scroll-target="ProductInfo-{{ section.id }}">
            {{ section.settings.button_text }}
          </a>
        {% else %}
          <a href="{{ section.settings.button_link }}" class="claim-button">
            {{ section.settings.button_text }}
          </a>
        {% endif %}
      {% endif %}

      {% for block in section.blocks %}
        {% if block.type == 'rating_stars' %}
          <div class="rating-section" {{ block.shopify_attributes }} style="display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;">
            <div class="rating-stars" style="--rating:{{ block.settings.rating }};--star-color:{{ block.settings.star_color }};--bg-star-color:{{ block.settings.bg_star_color }};--font-size:{{ block.settings.size | divided_by: 10.0 }}rem;--alignment:{{ block.settings.alignment }};">
              {% if block.settings.scroll_id != blank %}<a href="{{ block.settings.scroll_id }}">{% endif %}
              <div class="rating-stars-and-text font-size--desktop-auto flex-center">
                <div class="rating-stars__container rating-stars__container--underlay">
                  {% if block.settings.bg_stars_style == 'outlined' %}
                    {% for i in (1..5) %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>{% endfor %}
                  {% else %}
                    {% for i in (1..5) %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>{% endfor %}
                  {% endif %}
                  <div class="rating-stars__container rating-stars__container--overlay">
                    {% for i in (1..5) %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>{% endfor %}
                  </div>
                </div>
                <span class="rating-stars__label" style="color: {{ section.settings.textcolor }};">&nbsp;{{ block.settings.label }}</span>
              </div>
              {% if block.settings.scroll_id != blank %}</a>{% endif %}
            </div>
          </div>
        {% endif %}
        {% if block.type == 'tiktokpill' %}
          <div class="product-info__image-block product-info__image-block--mobile-alignment" style="--image-alignment:{{ block.settings.alignment }};--mobile-image-alignment:{{ block.settings.mobile_alignment }};margin-top:5px;{% if block.settings.enable_gradient_border %}margin-top: 10px!important;margin-bottom:10px;{% endif %}">
            {% render 'social-media-pill', block: block %}
          </div>
        {% endif %}
        {% if block.type == 'trustpilot_stars' %}
          <div class="product-info__image-block product-info__image-block--mobile-alignment" style="--image-alignment:{{ block.settings.alignment }};--mobile-image-alignment:{{ block.settings.mobile_alignment }};margin-top:5px;">
            {% render 'trustpilot-stars-block', block: block, margins: false, block_attributes: true %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}

</div>
</div>

<style>
  .custom-image-slider {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  /* Marquee track */
  .custom-marquee-track {
    width: 100%;
    overflow: hidden;
    margin-bottom: 25px;
    padding: 0;
  }

  .custom-marquee-inner {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: marquee-scroll-{{ section.id }} {{ section.settings.scroll_speed }}s linear infinite;
  }

  @keyframes marquee-scroll-{{ section.id }} {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .custom-marquee-slide {
    flex-shrink: 0;
  }

  .custom-slide-image {
    width: 160px;
    height: 240px;
    object-fit: cover;
    border-radius: {{ section.settings.imageborderradius }}px;
    display: block;
  }

  .content-wrapper {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
  }

  .main-title {
  {% unless section.settings.override_heading_size %}font-size: {{ section.settings.heading_font_size_mobile }}px;{% endunless %}
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  color: {{ section.settings.textcolor }};
}

  .subtitle {
    font-size: {{ section.settings.subheading_font_size_mobile }}px;
    margin-bottom: 20px;
    color: {{ section.settings.textcolor }};
    letter-spacing: -0.3px;
  }

  .claim-button {
    display: inline-block;
    background-color: rgba(var(--color-button),var(--alpha-button-background));
    color: rgb(var(--color-button-text));
    padding: 14px 30px;
    border-radius: var(--buttons-radius-outset);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 5px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
  }

  {% if section.settings.custombuttoncolors %}
  .claim-button {
    background-color: {{ section.settings.button_color }};
    color: {{ section.settings.button_textcolor }};
  }
  {% endif %}

  /* Mobile content positioning */
  @media screen and (max-width: 767px) {
    .mobile-content-above {
      order: -1;
      margin-bottom: 20px;
    }
    .mobile-content-below {
      order: 1;
      margin-top: 20px;
    }
  }

  @media screen and (min-width: 768px) {
    .custom-image-slider {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      padding: 60px 20px;
      align-items: center;
    }

    .slider-right-desktop {
      grid-template-areas: "content slider";
    }

    .slider-left-desktop {
      grid-template-areas: "slider content";
    }

    .slider-right-desktop .custom-marquee-track {
      grid-area: slider;
    }

    .slider-right-desktop .content-wrapper {
      grid-area: content;
    }

    .slider-left-desktop .custom-marquee-track {
      grid-area: slider;
    }

    .slider-left-desktop .content-wrapper {
      grid-area: content;
    }

    .custom-marquee-track {
      order: unset;
      margin-bottom: 0;
    }

    .content-wrapper {
      max-width: 550px;
      text-align: center;
      padding: 0;
    }

    .main-title {
  {% unless section.settings.override_heading_size %}font-size: {{ section.settings.heading_font_size_desktop }}px;{% endunless %}
  margin-bottom: 16px;
}

    .subtitle {
      font-size: {{ section.settings.subheading_font_size_desktop }}px;
      margin-bottom: 24px;
    }

    .claim-button {
      width: auto;
      font-size: 16px;
      padding: 16px 40px;
    }

    .custom-slide-image {
      width: 240px;
      height: 520px;
    }
  }
</style>

<script src="{{ 'customer-image-slider.js' | asset_url }}" defer="defer"></script>

{% schema %}
{
  "name": "Customer image slider",
  "settings": [
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "select",
      "id": "mobile_content_position",
      "label": "Mobile Content Position",
      "options": [
        { "value": "above", "label": "Above Image Slider" },
        { "value": "below", "label": "Below Image Slider" }
      ],
      "default": "below"
    },
    {
      "type": "select",
      "id": "desktop_slider_position",
      "label": "Desktop Slider Position",
      "options": [
        { "value": "left", "label": "Left Side" },
        { "value": "right", "label": "Right Side" }
      ],
      "default": "right"
    },
    {
      "type": "header",
      "content": "Section settings"
    },
    {
      "type": "color",
      "id": "textcolor",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "imageborderradius",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 12,
      "unit": "px",
      "label": "Image border radius"
    },
    {
      "type": "range",
      "id": "scroll_speed",
      "min": 10,
      "max": 60,
      "step": 5,
      "unit": "s",
      "label": "Scroll speed",
      "default": 30,
      "info": "Lower = faster. Changes take effect on save."
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Look At How Others Are Loving Their Product!"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Real Reviews From Real People"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "CLAIM OFFER",
      "info": "Leave blank to hide the button"
    },
    {
      "type": "header",
      "content": "Typography"
    },
    {
      "type": "checkbox",
      "id": "override_heading_size",
      "label": "Use theme heading size",
      "default": false,
      "info": "Overrides the custom font size settings below with Ascendify's global heading scale"
    },
    {
      "type": "select",
      "id": "theme_heading_size",
      "label": "Theme heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "visible_if": "{{ section.settings.override_heading_size }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_mobile",
      "min": 16,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Heading font size (Mobile)",
      "default": 29,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_desktop",
      "min": 28,
      "max": 48,
      "step": 1,
      "unit": "px",
      "label": "Heading font size (Desktop)",
      "default": 38,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "range",
      "id": "subheading_font_size_mobile",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Subheading font size (Mobile)",
      "default": 15
    },
    {
      "type": "range",
      "id": "subheading_font_size_desktop",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Subheading font size (Desktop)",
      "default": 18
    },
    {
      "type": "select",
      "id": "button_action",
      "label": "Button Action",
      "options": [
        { "value": "link", "label": "Link to URL" },
        { "value": "scroll", "label": "Scroll to ProductInfo" }
      ],
      "default": "scroll"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "checkbox",
      "id": "custombuttoncolors",
      "label": "Enable custom button colors"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_textcolor",
      "label": "Button text color",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is configured below."
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied when Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the desktop image is used on mobile.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#121212",
      "label": "Text color",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "review_image",
      "name": "Review Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "review_image",
          "label": "Review Screenshot"
        }
      ]
    },
    {
      "type": "rating_stars",
      "name": "Rating stars",
      "limit": 1,
      "settings": [
        {
          "type": "range",
          "id": "rating",
          "label": "Rating",
          "min": 1,
          "max": 5,
          "step": 0.1,
          "default": 4.8
        },
        {
          "type": "color",
          "id": "star_color",
          "default": "#ffcc00",
          "label": "Stars color"
        },
        {
          "type": "select",
          "id": "bg_stars_style",
          "options": [
            { "value": "outlined", "label": "Outlined" },
            { "value": "full", "label": "Full" }
          ],
          "label": "Background stars style",
          "default": "full"
        },
        {
          "type": "color",
          "id": "bg_star_color",
          "default": "#ececec",
          "label": "Background stars color"
        },
        {
          "type": "inline_richtext",
          "id": "label",
          "label": "Text",
          "default": "(xxxx Reviews)"
        },
        {
          "type": "range",
          "id": "size",
          "min": 10,
          "max": 15,
          "step": 1,
          "unit": "px",
          "default": 14,
          "label": "Text size"
        },
        {
          "type": "text",
          "id": "scroll_id",
          "label": "ID of the section to scroll to"
        }
      ]
    },
    {
      "type": "trustpilot_stars",
      "name": "Trustpilot stars",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "alignment",
          "label": "Text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "mobile_alignment",
          "label": "Mobile text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "range",
          "id": "rating",
          "label": "Rating",
          "min": 1,
          "max": 5,
          "step": 0.1,
          "default": 5
        },
        {
          "type": "color",
          "id": "star_color",
          "default": "#00b67a",
          "label": "Active stars container color"
        },
        {
          "type": "color",
          "id": "bg_star_color",
          "default": "#c8c8c8",
          "label": "Background stars container color"
        },
        {
          "type": "color",
          "id": "star_symbol_color",
          "default": "#fff",
          "label": "Stars inside symbol color"
        },
        {
          "type": "inline_richtext",
          "id": "label",
          "label": "Text",
          "default": "(xxxx Reviews)"
        },
        {
          "type": "range",
          "id": "size",
          "min": 10,
          "max": 24,
          "step": 1,
          "unit": "px",
          "default": 16,
          "label": "Text size"
        },
        {
          "type": "text",
          "id": "scroll_id",
          "label": "ID of the section to scroll to"
        }
      ]
    },
    {
      "type": "tiktokpill",
      "name": "Social media pill",
      "settings": [
        {
          "type": "select",
          "id": "alignment",
          "label": "Text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "mobile_alignment",
          "label": "Mobile text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "header",
          "content": "Logo"
        },
        {
          "type": "select",
          "id": "featuredlogo",
          "label": "Choose social media logo",
          "options": [
            { "value": "tiktoklogo", "label": "Tiktok" },
            { "value": "facebooklogo", "label": "Facebook" },
            { "value": "facebooklogoblue", "label": "Facebook Blue" },
            { "value": "youtubelogo", "label": "Youtube logo" },
            { "value": "instagramlogo", "label": "Instagram logo" }
          ],
          "default": "tiktoklogo"
        },
        {
          "type": "text",
          "id": "tiktokpilltext",
          "label": "Featured text",
          "default": "Over 4M Views on TikTok"
        },
        {
          "type": "checkbox",
          "id": "enable_gradient_border",
          "label": "Enable Gradient Border",
          "default": false
        },
        {
          "type": "color",
          "id": "pillbackground",
          "label": "Background color",
          "default": "#FAFAFA"
        },
        {
          "type": "color",
          "id": "pillborder",
          "label": "Border color",
          "default": "#000000"
        },
        {
          "type": "color",
          "id": "pilltextcolor",
          "label": "Text color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "tiktokpillborderradius",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "label": "Border radius",
          "default": 20
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Customer image slider",
      "category": "Testimonials",
      "blocks": [
        { "type": "rating_stars" },
        { "type": "review_image" },
        { "type": "review_image" },
        { "type": "review_image" }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}