How To Add Autoplay Video Section in Shopify Without App [Dawn V15]

Step1: Create a new section named autoplay-video-section.liquid and paste the following code

{%- comment -%} Images: check image crop aspect ratio {%- endcomment -%}
{%- if section.settings.image_crop == 'none' -%}
  {%- assign image_crop_width = section.settings.aspect_ratio | split: ':' | first | times: 1000 -%}
  {%- assign image_crop_height = section.settings.aspect_ratio | split: ':' | last | times: 1000 -%}
{%- else -%}
  {%- assign image_crop_width = section.settings.image_crop | split: ':' | first | times: 1000 -%}
  {%- assign image_crop_height = section.settings.image_crop | split: ':' | last | times: 1000 -%}
{%- endif -%}

{% comment %} Images: responsive image widths {% endcomment %}
{%- assign widths = '180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1950, 2100, 2260, 2450, 2700, 3000, 3350, 3750, 4100' -%}

{%- comment -%} Layout: has user entered measurement value into max-width field? {%- endcomment -%}
{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
  {%- assign max_width = section.settings.max_width -%}
{%- else -%}
  {%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}

{%- comment -%} Text: check text position {%- endcomment -%}
{%- assign horizontal_text_position = section.settings.text_position | split: ' ' | first -%}
{%- assign vertical_text_position = section.settings.text_position | split: ' ' | last -%}

{%- comment -%} Text: custom font_picker values {%- endcomment -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.heading_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}

{%- capture minify -%}
{%- comment -%} CSS {%- endcomment -%}
<style>

/*** Global styles ***/

[id^="DP--"] {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-transform: unset;
  letter-spacing: unset;
  margin: unset;
  padding: unset;
  z-index: 1;
}

.wbs-pck__section * {
  box-sizing: border-box !important;
}

.wbs-pck__section img {
  max-width: 100%;
}

[class^="wbs_pack_-_fixed"] {
  display: none;
}

.wbs-pck__section h1,
.wbs-pck__section h2,
.wbs-pck__section h3,
.wbs-pck__section h4,
.wbs-pck__section h5,
.wbs-pck__section h6 {
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}

.wbs-pck__rte,
.wbs-pck__rte p,
.wbs-pck__rte a,
.wbs-pck__rte a:hover,
.wbs-pck__rte a:visited,
.wbs-pck__rte a:focus {
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}

.wbs-pck__rte a {
  text-decoration: underline;
}

.wbs-pck__rte p {
  margin-bottom: 0.8em;
}

.wbs-pck__rte p:last-of-type {
  margin-bottom: 0;
}

.wbs-pck__rte ul {
  margin: 1em 0;
  padding-left: 40px;
}

.wbs-pck__rte li {
  list-style: unset;
}

.wbs-pck__absolute-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 2;
}

.wbs-pck__relative {
  position: relative;
}

h1.wbs-pck__heading,
h2.wbs-pck__heading,
h3.wbs-pck__heading,
h4.wbs-pck__heading,
h5.wbs-pck__heading,
h6.wbs-pck__heading {
  margin-bottom: 1.2rem;
}

.wbs-pck__text {
  margin: 0;
  color: inherit;
}

.wbs-pck__button {
  font-family: inherit;
  cursor: pointer;
  text-transform: unset;
  -webkit-appearance: none;
}

.wbs-pck__button::after {
  display: none;
}

.wbs-pck__section button,
.wbs-pck__section input[type="text"],
.wbs-pck__section input[type="email"] {
  -webkit-appearance: none;
}

.wbs-pck__sizer {
  margin-left: auto;
  margin-right: auto;
}

.wbs-pck__height-sizer {
  display: table;
}

.wbs-pck__height--x-small {
  height: 125px;
}

.wbs-pck__height--small {
  height: 300px;
}

.wbs-pck__height--medium {
  height: 475px;
}

.wbs-pck__height--large {
  height: 650px;
}

.wbs-pck__height--x-large {
  height: 775px;
}

@media only screen and (max-width: 767px) {
  .wbs-pck__height--x-small {
    height: 94px;
  }

  .wbs-pck__height--small {
    height: 225px;
  }

  .wbs-pck__height--medium {
    height: 357px;
  }

  .wbs-pck__height--large {
    height: 488px;
  }

  .wbs-pck__height--x-large {
    height: 582px;
  }
}

/*** Videos ***/

.wbs-pck__video__wrapper video[loading=lazy],
.wbs-pck__background-video[loading=lazy] {
  opacity: 1;
}

/*** Images ***/
.wbs-pck__image__wrapper {
  display: grid;
  position: relative;
  margin: 0;
}

.wbs-pck__image__wrapper svg {
  display: block;
}

.wbs-pck__image__wrapper:not(.wbs-pck__image__wrapper--contain) svg {
  width: inherit;
  height: inherit;
}

.wbs-pck__image__wrapper > * {
  grid-area: 1 / 1 / 2 / 2;
}

.wbs-pck__image__wrapper img,
.wbs-pck__image__wrapper .wbs-pck__placeholder {
  object-fit: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.wbs-pck__image__wrapper--contain img {
  object-fit: contain;
}

.wbs_pck__image-link {
  display: block;
  overflow: hidden;
}

/*** Widths ***/

div.DP__widths {
  display: inline-block !important;
  vertical-align: top;
  font-size: 0;
  margin-left: auto;
  margin-right: auto;
}

div.DP__widths * {
  font-size: initial;
}

@media (max-width: 767px) {
  div.DP__widths {
    width: 100% !important;
  }
}

/*** Flex ***/
.wbs-pck__flex {
  display: flex;
}

.wbs-pck__flex-wrap {
  flex-wrap: wrap;
}

.wbs-pck__flex--1-per-row .wbs-pck__flex-item {
  flex-basis: 100%;
}

.wbs-pck__flex--2-per-row .wbs-pck__flex-item {
  flex-basis: 50%;
}

.wbs-pck__flex--3-per-row .wbs-pck__flex-item {
  flex-basis: 33.3333%;
}

.wbs-pck__flex--4-per-row .wbs-pck__flex-item {
  flex-basis: 25%;
}

.wbs-pck__flex--5-per-row .wbs-pck__flex-item {
  flex-basis: 20%;
}

.wbs-pck__flex--6-per-row .wbs-pck__flex-item {
  flex-basis: 16.6666%;
}

.wbs-pck__flex--7-per-row .wbs-pck__flex-item {
  flex-basis: 14.3%;
}

.wbs-pck__flex--8-per-row .wbs-pck__flex-item {
  flex-basis: 12.5%;
}

.wbs-pck__flex-row-reverse {
  flex-direction: row-reverse;
}

.wbs-pck__grid-row-reverse {
  direction: rtl;
}

.wbs-pck__grid-row-reverse * {
  direction: ltr;
}

.wbs-pck__justify-left {
  justify-content: flex-start;
  text-align: left;
}

.wbs-pck__justify-center {
  justify-content: center;
  text-align: center;
}

.wbs-pck__justify-right {
  justify-content: flex-end;
  text-align: right;
}

.wbs-pck__justify-justify {
  justify-content: space-between;
  text-align: justify;
}

.wbs-pck__align-top {
  align-items: flex-start;
}

.wbs-pck__align-center {
  align-items: center;
}

.wbs-pck__align-bottom {
  align-items: flex-end;
}

/** Text alignment **/

.wbs-pck__text-alignment-left {
  text-align: left;
}

.wbs-pck__text-alignment-center {
  text-align: center;
}

.wbs-pck__text-alignment-right {
  text-align: right;
}

.wbs-pck__text-alignment-justify {
  text-align: justify;
}

/*** Grid ***/
.wbs-pck__grid {
  display: grid;
}

.wbs-pck__grid--1-per-row {
  grid-template-columns: 1fr;
}

.wbs-pck__grid--2-per-row {
  grid-template-columns: 1fr 1fr;
}

.wbs-pck__grid--3-per-row {
  grid-template-columns: 1fr 1fr 1fr;
}

.wbs-pck__grid--4-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.wbs-pck__grid--5-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.wbs-pck__grid--6-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.wbs-pck__grid--7-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.wbs-pck__grid--8-per-row {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.wbs-pck__grid-reverse {
  direction: rtl;
}

.wbs-pck__grid-reverse * {
  direction: ltr;
}

/*** Helpers ***/
.wbs-pck__unset {
  font-family: unset;
  font-size: unset;
  letter-spacing: unset;
  line-height: unset;
  margin: unset;
  padding: unset;
  list-style: none;
}

.wbs-pck__force-full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.wbs-pck__visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.wbs-pck__recaptcha-message {
  margin-top: 0.8em;
  font-size: 0.8em;
}

.wbs-pck__recaptcha-message a,
.wbs-pck__recaptcha-message a:hover,
.wbs-pck__recaptcha-message a:focus {
  font-style: italic;
  color: inherit;
  font-size: inherit;
}

/** Pages **/
.wbs-pck__page-intro {
  width: 100%;
}

/** Theme editor warnings **/

.wbs-pck__no-app-warning {
  position: relative;
  overflow: hidden;
  padding: 1em;
}

.wbs-pck__no-app-warning-text {
  position: relative;
  background: #ff0;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px;
  max-width: 50%;
  margin: 0 auto;
}

.wbs-pck__no-app-warning-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 130%;
  background: repeating-linear-gradient(-45deg, #ff0, #ff0 20px, #000 20px, #000 40px);
  animation: wbs-pck__warning-background 1s linear infinite;
}

@keyframes wbs-pck__warning-background {
  to {
    transform: translateX(-56px);
  }
}

/** Animations **/

[style*="--wbs-pck-animate"] {
  will-change: transform;
  transform: translateZ(0);
  opacity: 0;
}

.wbs-pck__animation-applied {
  overflow: hidden;
}

.wbs-pck__animation-applied [style*="--wbs-pck-animate"] {
  --wbs-pck-animation-multiplier: 0.3s;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: calc(var(--wbs-pck-animation-multiplier) * var(--wbs-pck-animate));
}

@keyframes wbs-pck__animation--fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes wbs-pck__animation--fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wbs-pck__animation--fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wbs-pck__animation--fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wbs-pck__animation--fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/** Parallax **/
.wbs-pck__parallax {
  position: relative;
  z-index: 1;
}

.wbs-pck__parallax > .wbs-pck__parallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/** Responsive helpers **/

.wbs-pck__desktop--visible {
  display: inherit;
}



/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  .wbs-pck__tablet--visible {
    display: block !important;
  }


}

/* Landscape phones and down */
@media (max-width: 480px) {
  .wbs-pck__mobile--visible {
    display: block !important;
  }


}

/** Theme specific **/

/* Dawn */
[class*="wbs-pck"]:empty {
  display: inherit;
}

/* Debut - offset margin from the header */
/* .main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
.main-content[id="MainContent"] [id*="DP__"] {
  margin-top: -35px;
}

@media only screen and (min-width: 750px) {
  .main-content[id="MainContent"] .shopify-section[class*="DP__"]:first-child,
  .main-content[id="MainContent"] .DP__widths.DP__width--half:first-child,
  .main-content[id="MainContent"] .DP__widths.DP__width--half:first-child + .DP__widths.DP__width--half,
  .main-content[id="MainContent"] [id*="DP__"] {
    margin-top: -55px;
  }
} */

/* Brooklyn - prevent default margins (but leave them on theme sections) */
.index-sections [class*="DP__"] {
  margin-top: 0;
}

.index-sections [class*="DP__"].shopify-section:first-child:not(.shopify-section--full-width) {
  margin-top: 0;
}

/* Impulse - prevent default margins (but leave them on theme sections) */
.main-content [class*="DP__"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* Cornerstone - override overflow: hidden */
[class*="DP__"].shopify-section {
  overflow: unset;
}

  
{%- if section.settings.override_theme_font != blank -%}
  {%- for font in font_array -%}
    {%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
  {%- endfor -%}
  #DP--{{ section.id }} {
    --main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
    --main-font-weight: {{ section.settings.main_font.weight }};
    --main-font-style: {{ section.settings.main_font.style }};
    --heading-font: {{ section.settings.heading_font.family }}, {{ section.settings.heading_font.fallback_families }};
    --heading-font-weight: {{ section.settings.heading_font.weight }};
    --heading-font-style: {{ section.settings.heading_font.style }};
  }
{%- endif -%}

#DP--{{ section.id }} {
  margin-top: {{ section.settings.outer_margin_top }}px;
  margin-bottom: {{ section.settings.outer_margin_bottom }}px;
}

#DP--{{ section.id }} .wbs-pck__sizer {
  width: 90%;
  margin: auto;
  max-width: {{ max_width }};
}

#DP--{{ section.id }} .wbs-pck__background {
  width: 100%;
}

#DP--{{ section.id }} .wbs-pck__background-image::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  background: {{ section.settings.image_overlay_color }};
}

#DP--{{ section.id }} .wbs-pck__background-video {
  object-fit: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

#DP--{{ section.id }} .wbs-pck__background-video::-webkit-media-controls-panel {
  background-image: none !important;
  filter: brightness(0.4);
}

#DP--{{ section.id }} .wbs-pck__grid--main {
  height: 100%;
}

#DP--{{ section.id }} .wbs-pck__content {
  z-index: 2;
  height: 100%;
  grid-template-columns: 1fr;
  grid-area: 1 / 1 / 2 / 2;
  padding: 5% 0;
}

#DP--{{ section.id }} .wbs-pck__inner-content {
  z-index: 2;
  max-width: {{ section.settings.text_width }}px;
  width: 100%;
  padding: {%- if section.settings.text_background_color != blank -%}clamp(10px, 5%, 40px){%- endif -%};
  background: {{ section.settings.text_background_color }};
}

{% comment %} Block styling {% endcomment %}
#DP--{{ section.id }} .wbs-pck__rte p,
#DP--{{ section.id }} .wbs-pck__rte ul {
  line-height: calc(3px + 2.5ex + 3px);
  color: {{ section.settings.text_color }};
  font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- if section.settings.override_theme_font != blank -%}
  font-family: var(--main-font);
  font-weight: var(--main-font-weight);
  font-style: var(--main-font-style);
  {%- endif -%}
}

#DP--{{ section.id }} .wbs-pck__small-text p,
#DP--{{ section.id }} .wbs-pck__small-text ul {
  font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.008 }});
}

{%- if section.settings.text_alignment == 'center' -%}
  #DP--{{ section.id }} .wbs-pck__rte ul {
    display: table;
    margin: 0 auto;
    text-align: left;
  }
{%- elsif section.settings.text_alignment == 'right' -%}
  #DP--{{ section.id }} .wbs-pck__rte ul {
    display: table;
    margin-left: auto;
    text-align: left;
  }
{%- endif -%}

#DP--{{ section.id }} .wbs-pck__block {
  color: {{ section.settings.text_color }};
}

#DP--{{ section.id }} .wbs-pck__block + .wbs-pck__block {
  margin-top: 15px;
}
{% comment %} End block styling {% endcomment %}

/* Animation */
{%- if section.settings.animation != 'none' -%}
  #DP--{{ section.id }}.wbs-pck__animation-applied [style*="--wbs-pck-animate"] {
    animation-name: wbs-pck__animation--{{ section.settings.animation }};
  }
{%- else -%}
  #DP--{{ section.id }} [style*="--wbs-pck-animate"] {
    opacity: 1;
  }
{% endif %}

{%- if section.settings.custom_css != blank -%}
  {%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
  {%- for declaration in custom_section_declarations -%}
    {%- if declaration contains '{' -%}
      #DP--{{ section.id }} {{ declaration }} }
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

/* Landscape phones and down */
@media (max-width: 480px) {
  #DP--{{ section.id }} {
    margin-top: {{ section.settings.outer_margin_top | divided_by: 2 }}px;
    margin-bottom: {{ section.settings.outer_margin_bottom | divided_by: 2 }}px;
  }

  #DP--{{ section.id }} .wbs-pck__inner-content {
    min-width: 100%;
  }

  {%- if section.settings.mobile_aspect_ratio != blank -%}
    #DP--{{ section.id }} .wbs-pck__background-image .wbs-pck__svg-sizer {
      aspect-ratio: {{ section.settings.mobile_aspect_ratio | replace: ':', ' / ' }};
    }
  {%- endif -%}

  {%- if section.settings.mobile_custom_css != blank -%}
    {%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
    {%- for declaration in mobile_custom_declarations -%}
      {%- if declaration contains '{' -%}
        #DP--{{ section.id }} {{ declaration }} }
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
}
</style>

{%- comment -%} HTML {%- endcomment -%}
<section id="DP--{{ section.id }}" class="DP--{{ section.id }} wbs-pck__banner-video wbs-pck__section">
  <div class="wbs-pck__background">
    {%- if section.settings.link != blank -%}
      <a class="wbs-pck__absolute-link" href="{{ section.settings.link }}">{{ section.settings.link.title }}</a>
    {% endif %}
    <div class="wbs-pck__image__wrapper wbs-pck__background-image">
      <svg class="wbs-pck__svg-sizer" viewBox="0 0 {{ image_crop_width }} {{ image_crop_height }}"></svg>
      {%- assign video = section.settings.video -%}
      <video class="wbs-pck__background-video" width="{{ video.aspect_ratio | times: 100 }}" height="100" autoplay muted playsinline loading="lazy" {% if section.settings.loop %}loop{% endif %} poster="{{ video.preview_image | image_url: width: 2800 }}">
        {%- for source in video.sources -%}
          <source src="{{ source.url }}" data-wbs-pck-default-src>
        {%- endfor -%}
      </video>
      <div class="wbs-pck__sizer wbs-pck__grid wbs-pck__grid--main">
        <div class="wbs-pck__content
                    wbs-pck__flex wbs-pck__justify-{{ horizontal_text_position }}
                    wbs-pck__align-{{ vertical_text_position }}
                    wbs-pck__text-alignment-{{ section.settings.text_alignment }}">
          {%- if section.settings.link != blank -%}
            <a class="wbs-pck__absolute-link" href="{{ section.settings.link }}">{{ section.settings.background_image.alt }}</a>
          {%- endif -%}
          {%- if section.blocks.size > 0 -%}
            <div class="wbs-pck__inner-content wbs-pck__relative">
              {%- for block in section.blocks -%}
                <div id="DP--{{ block.id }}" class="wbs-pck__block wbs-pck__block-id-{{ block.id }} wbs-pck__block--{{ block.type }} wbs-pck__block--{{ forloop.index }}" {{ block.shopify_attributes }} style="--wbs-pck-animate: {{ forloop.index }};">
                  {%- case block.type -%}

                    {% when 'feature_range' %}
                      <style>
                      .wbs-pck__block-id-{{ block.id }} {
                        --dot-color: {{ block.settings.dot_color }};
                        --line-color: {{ block.settings.line_color }};
                        --dot-size: {{ block.settings.dot_size }}px;
                        --line-size: {{ block.settings.line_size }}px;
                      }

                      .wbs-pck__block-id-{{ block.id }} .wbs-pck__feature-range {
                        display: grid;
                        grid-template-columns: 1fr 4fr 1fr;
                        gap: 12px;
                        align-items: center;
                        justify-content: center;
                        padding: 2rem 0;
                      }

                      .wbs-pck__block-id-{{ block.id }} input[type=range] {
                        width: 100%;
                        appearance: none;
                        background: var(--line-color);
                        height: var(--line-size);
                        min-height: unset;
                        border: none;
                      }

                      .wbs-pck__block-id-{{ block.id }} input[type=range]::-webkit-slider-thumb   {
                        -webkit-appearance: none;
                        height: var(--dot-size);
                        width: var(--dot-size);
                        border-radius: var(--dot-size);
                        background: var(--dot-color);
                      }

                      .wbs-pck__block-id-{{ block.id }} input[type=range]::-moz-range-thumb {
                        -webkit-appearance: none;
                        height: var(--dot-size);
                        width: var(--dot-size);
                        border-radius: var(--dot-size);
                        background: var(--dot-color);
                      }

                    </style>
                      <div class="wbs-pck__feature-range-container wbs-pck__justify-{{ section.settings.text_alignment }}">
                        <div class="wbs-pck__feature-range-title">
                          <h3 class="wbs-pck__small-heading">{{ block.settings.title }}</h3>
                        </div>
                        <div class="wbs-pck__feature-range">
                          <div class="wbs-pck__text wbs-pck__rte">
                            <p>{{ block.settings.low_range_label }}</p>
                          </div>
                          <input type="range" aria-hidden="true" disabled="" id="Flavor" readonly="" min="0" max="10"  value="{{ block.settings.level }}">
                          <div class="wbs-pck__text wbs-pck__rte">
                            <p>{{ block.settings.high_range_label }}</p>
                          </div>
                        </div>
                      </div>
                    {%- when 'collapsible_content' -%}
                      {%- comment -%}Icons: SVG URI encoded icons{%- endcomment -%}
                      {%- capture closed_icon -%}
                        {%- case block.settings.icon_style -%}
                          {%- when 'plus_minus' -%}
                            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
                          {%- when 'caret' -%}
                            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
                          {%- when 'plus_minus_square' -%}
                            url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 3.998c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm6.75 6.752h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z' fill-rule='nonzero' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
                        {%- endcase -%}
                      {%- endcapture -%}

                      {%- capture open_icon -%}
                        {%- case block.settings.icon_style -%}
                          {%- when 'plus_minus' -%}
                            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 10h24v4h-24z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
                          {%- when 'caret' -%}
                            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E")
                          {%- when 'plus_minus_square' -%}
                            url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 4c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm11.75 6.752h-8.5c-.414 0-.75.336-.75.75s.336.75.75.75h8.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z' fill-rule='nonzero' fill='{{ section.settings.text_color | replace: "#", "%23" }}'/%3E%3C/svg%3E");
                        {%- endcase -%}
                      {%- endcapture -%}
                      <style>
                        #DP--{{ section.id }} .wbs-pck__block--collapsible_content + .wbs-pck__block--collapsible_content {
                          margin-top: 0;
                        }

                        #DP--{{ section.id }} .wbs-pck__block--collapsible_content + .wbs-pck__block--collapsible_content .wbs-pck__accordion {
                          border-top: 0;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__accordion {
                          border-top: thin solid {{ section.settings.text_color }};
                          border-bottom: thin solid {{ section.settings.text_color }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__question {
                          position: relative;
                          cursor: pointer;
                          display: block;
                          padding: 10px 25px 10px 0;
                          color: {{ section.settings.text_color }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__small-heading {
                          margin: 0;
                          font-size: calc(var(--dp-g-small-heading-size, var(--dp-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.008 }});
                          {%- if section.settings.override_theme_font != blank -%}
                            font-family: var(--heading-font);
                            font-weight: var(--heading-font-weight);
                            font-style: var(--heading-font-style);
                          {%- endif -%}
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__question::-webkit-details-marker {
                          display: none;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__accordion[open] > .wbs-pck__question:after {
                          background-image: {{ open_icon }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__question:after {
                          content: '';
                          position: absolute;
                          top: 50%;
                          transform: translateY(-50%);
                          right: 0;
                          height: 20px;
                          width: 20px;
                          background-image: {{ closed_icon }};
                          background-size: contain;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__answer {
                          padding-top: 10px;
                          margin-bottom: 0;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__inner-answer {
                          padding: 10px;
                          padding-top: 0;
                        }
                      </style>
                      <details class="wbs-pck__accordion wbs-pck__icon-style-{{ block.settings.icon_style }}" {%- if block.settings.show_open == true -%} open {%- endif -%}>
                        <summary class="wbs-pck__question">
                          <h3 class="wbs-pck__small-heading">{{ block.settings.title }}</h3>
                        </summary>
                        <div class="wbs-pck__answer">
                          <div class="wbs-pck__inner-answer wbs-pck__text wbs-pck__rte">
                            {{ block.settings.text }}
                          </div>
                        </div>
                      </details>
                  {%- when 'fancy_heading' -%}
                        <style>
                          {%- if block.settings.highlight_enable_custom_font != blank -%}
                            {{ block.settings.highlight_custom_font | font_face: font_display: 'swap' }}
                            {{ block.settings.highlight_custom_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
                            {{ block.settings.highlight_custom_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
                            {{ block.settings.highlight_custom_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
                            .wbs-pck__block-id-{{ block.id }} {
                              --highlight-custom-font: {{ block.settings.highlight_custom_font.family }}, {{ block.settings.highlight_custom_font.fallback_families }};
                              --highlight-custom-font-weight: {{ block.settings.highlight_custom_font.weight }};
                              --highlight-custom-font-style: {{ block.settings.highlight_custom_font.style }};
                            }
                          {% endif %}

                          {%- assign highlight_background_text_color_alpha = block.settings.highlight_background_color | color_extract: 'alpha' -%}
                          {%- assign highlight_text_color_alpha = block.settings.highlight_text_color | color_extract: 'alpha' -%}

                          .wbs-pck__block-id-{{ block.id }} .wbs-pck__heading {
                            margin: 0;
                            line-height: calc(3px + 2ex + 3px);
                            {%- if block_heading_alpha != 0 -%}
                              color: {{ block.settings.block_heading_color }};
                            {%- endif -%}
                            {%- if block.settings.block_heading_size != blank -%}
                              font-size: calc({{ block.settings.block_heading_size }} * {{ section.settings.text_size | times: 0.01 }});
                            {%- else -%}
                              font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
                            {%- endif -%}
                            {%- if section.settings.override_theme_font != blank -%}
                            font-family: var(--heading-font);
                            font-weight: var(--heading-font-weight);
                            font-style: var(--heading-font-style);
                            {%- endif -%}
                          }
                          .wbs-pck__block-id-{{ block.id }} .wbs-pck__fancy {      
                            padding-left: {{ block.settings.padding-left-fancy }}px;
                            padding-right: {{ block.settings.padding-left-fancy }}px;
                            padding-top: {{ block.settings.padding-fancy }}px;
                            padding-bottom: {{ block.settings.padding-fancy }}px;
                            border-radius: {{ block.settings.border-fancy }}px;
                            position: relative;                
                            {%- if block.settings.highlight_heading_size != blank -%}
                              font-size: calc({{ block.settings.highlight_heading_size }} * {{ section.settings.text_size | times: 0.01 }});
                            {%- else -%}
                              font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
                            {%- endif -%}
                            {%- if block.settings.highlight_enable_custom_font -%}
                            font-family: var(--highlight-custom-font);
                            font-weight: var(--highlight-custom-font-weight);
                            font-style: var(--highlight-custom-font-style);
                            {%- elsif section.settings.override_theme_font != blank -%}
                            font-family: var(--heading-font);
                            font-weight: var(--heading-font-weight);
                            font-style: var(--heading-font-style);
                            {%- endif -%}
                            background-color: {%- if highlight_background_text_color_alpha != 0 -%}
                              {{ block.settings.highlight_background_color }}
                            {%- endif -%};
                            color: {%- if highlight_text_color_alpha != 0 -%}
                              {{ block.settings.highlight_text_color }}
                            {%- endif -%};
                          }

                          {%- if block.settings.custom_css != blank -%}
                            {%- assign custom_block_declarations = block.settings.custom_css | split: '}' -%}
                            {%- for declaration in custom_block_declarations -%}
                              {%- if declaration contains '{' -%}
                                .wbs-pck__block-id-{{ block.id }} {{ declaration }} }
                              {%- endif -%}
                            {%- endfor -%}
                          {%- endif -%}

                          @media (max-width: 480px) {
                            .wbs-pck__block-id-{{ block.id }} .wbs-pck__heading {
                              {%- if block.settings.block_heading_size != blank -%}
                                font-size: min({{ block.settings.block_heading_size }}, 50px);
                              {%- endif -%}
                            }
                          }

                        </style>
                        {%- if block.settings.title != blank -%}
                          <{{- block.settings.heading_level }} class="wbs-pck__heading">
                            {{ block.settings.title | replace: '[', '<span class="wbs-pck__fancy">' | replace: ']', '</span>' }}
                          </{{- block.settings.heading_level -}}>
                        {%- endif -%}

                  {%- when 'video' -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} video {
                          width: 100%    !important;
                          height: auto   !important;
                        }
                      </style>
                      <div class="wbs-pck__video__wrapper">
                        {%- assign video = block.settings.video -%}
                        <video width="{{ video.aspect_ratio | times: 100 }}" height="100"
                          {% if block.settings.autoplay %}autoplay muted{% endif %} playsinline
                          {% if block.settings.loop %}loop{% endif %}
                          {% if block.settings.show_controls %}controls{% endif %}
                          loading="lazy" poster="{{ video.preview_image | image_url: width: 2800 }}">
                          {%- for source in video.sources -%}
                            <source src="{{ source.url }}">
                          {%- endfor -%}
                        </video>
                      </div>
                    {%- when 'newsletter' -%}
                      <style>
                        {%- assign button_alpha = block.settings.button_background_color | color_extract: 'alpha' -%}

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__form {
                          --form-gap: 5px;
                          width: 100%;
                          display: flex;
                          flex-wrap: wrap;
                          gap: calc(var(--form-gap) * 2);
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__form-text {
                          color: inherit;
                          font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__form input {
                          margin: unset;
                          padding: 0.8em;
                          font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__form input[type="text"],
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__form input[type="email"] {
                          padding: 0.8em;
                          background: transparent;
                          border: thin solid {{ section.settings.text_color }};
                          color: {{ section.settings.text_color }};
                          {%- if section.settings.override_theme_font != blank -%}
                          font-family: var(--main-font);
                          font-weight: var(--main-font-weight);
                          font-style: var(--main-font-style);
                          {%- endif -%}
                        }

                        .wbs-pck__form--{{ block.id }} input {
                          width: 100%;
                        }

                        {%- if block.settings.show_first_name and block.settings.show_last_name -%}
                          .wbs-pck__form--{{ block.id }}-compact .wbs-pck__newsletter_first-name,
                          .wbs-pck__form--{{ block.id }}-compact .wbs-pck__newsletter_last-name {
                            width: calc(50% - var(--form-gap));
                          }
                        {%- endif -%}

                        .wbs-pck__form--{{ block.id }}-compact .wbs-pck__newsletter_email {
                          width: calc(70% - var(--form-gap));
                        }

                        .wbs-pck__form--{{ block.id }}-compact .wbs-pck__button {
                          width: calc(30% - var(--form-gap));
                        }

                        .wbs-pck__block-id-{{ block.id }} input::placeholder {
                          opacity: 0.6;
                          color: {{ section.settings.text_color }};
                          {%- if section.settings.override_theme_font != blank -%}
                          font-family: var(--main-font);
                          font-weight: var(--main-font-weight);
                          font-style: var(--main-font-style);
                          {%- endif -%}
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button {
                          justify-content: center;
                          text-align: center;
                          transition: all 0.3s ease-in-out;
                          border: thin solid;
                          border-radius: {{ block.settings.button_radius }}px;
                          color: {{ block.settings.button_label_color }};
                          font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
                          border-color: {%- if button_alpha != 0 -%}{{ block.settings.button_background_color }}{%- else -%}{{ block.settings.button_label_color }}{%- endif -%};
                          background-color: {{ block.settings.button_background_color }};
                          {%- if section.settings.override_theme_font != blank -%}
                          font-family: var(--main-font);
                          font-weight: var(--main-font-weight);
                          font-style: var(--main-font-style);
                          {%- endif -%}
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button:hover {
                          opacity: 1;
                          {%- if button_alpha != 0 -%}
                          background-color: {{ block.settings.button_background_color | color_darken: 10 }};
                          border-color: transparent;
                          {%- else -%}
                          background-color: {{ block.settings.button_label_color | color_modify: 'alpha', 0.1 }}
                          {%- endif -%};
                        }
                      </style>
                      {%- capture form_id -%}wbs-pck__form-{{ section.id }}{%- endcapture -%}
                      {%- form 'customer', id: form_id -%}

                        {%- comment -%} Error and success messages for submitted form {%- endcomment -%}
                        <div class="wbs-pck__form-response wbs-pck__text">
                          {%- if form.posted_successfully? -%}
                            <p class="wbs-pck__form-reply--success">{{ 'success' | t }}</p>
                          {%- elsif form.errors -%}
                            {%- for field in form.errors -%}
                              <p class="wbs-pck__form-reply--error">{{ field }} - {{ form.errors.messages[field] }}</p>
                            {%- endfor -%}
                          {%- endif -%}
                        </div>

                        {%- comment -%} Hidden newsletter fields {%- endcomment -%}
                        <input type="hidden" name="contact[tags]" value="newsletter"/>
                        <input type="hidden" name="challenge" value="false" />

                        <div class="wbs-pck__form wbs-pck__form--{{ block.id }} wbs-pck__form--{{ block.id }}-{{ block.settings.layout }}">
                          {%- if block.settings.show_first_name -%}
                            <label class="wbs-pck__visually-hidden" for="first-name-{{ block.id }}">{{ block.settings.first_name_label }}</label>
                            <input class="wbs-pck__newsletter_first-name" type="text" name="contact[first_name]" id="first-name-{{ block.id }}" placeholder="{{ block.settings.first_name_label }}" />
                          {%- endif -%}
                          {%- if block.settings.show_last_name -%}
                            <label class="wbs-pck__visually-hidden" for="last-name-{{ block.id }}">{{ block.settings.last_name_label }}</label>
                            <input class="wbs-pck__newsletter_last-name" type="text" name="contact[last_name]" id="last-name-{{ block.id }}" placeholder="{{ block.settings.last_name_label }}" />
                          {%- endif -%}
                          <label class="wbs-pck__visually-hidden" for="email-{{ block.id }}">{{ block.settings.email_label }}</label>
                          <input class="wbs-pck__newsletter_email" type="email" name="contact[email]" required id="email-{{ block.id }}" placeholder="{{ block.settings.email_label }}" />
                          <input class="wbs-pck__button" type="submit" value="{{ block.settings.submit_label }}" />
                        </div>

                      {%- endform -%}
                    {%- when 'list' -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__list {
                          margin: 0;
                          {%- case block.settings.list_style -%}
                            {%- when 'decimal' -%}
                              list-style: decimal;
                            {%- when 'square' -%}
                              list-style: square;
                            {%- when 'circle' -%}
                              list-style: circle;
                            {%- else -%}
                              list-style: inherit;
                          {%- endcase -%}
                        }
                      </style>
                      {%- assign list = block.settings.text | split: '**' -%}
                      <div class="wbs-pck__list-wrapper wbs-pck__rte">
                        <ul class="wbs-pck__list wbs-pck__text-alignment-left">
                          {%- for list_item in list -%}
                            {%- if forloop.first == false -%}
                              <li>{{ list_item }}</li>
                            {%- endif -%}
                          {%- endfor -%}
                        </ul>
                      </div>
                    {%- when 'icons' -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__icons {
                          --flex-gap: {{ block.settings.gap }}px;
                          gap: var(--flex-gap);
                          flex-wrap: wrap;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__icon {
                          --flex-items: {{ 100.00 | divided_by: block.settings.icon_width }};
                          text-align: center;
                          flex: 0 1 calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
                          width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__icon a,
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__icon p {
                          color: {{ section.settings.text_color }};
                          line-height: 1.2;
                          margin: 0;
                          text-decoration: none;
                          font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.007 }});
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__icon img {
                          position: relative;
                          width: {{ block.settings.image_size }}%;
                          height: auto;
                          display: inline-block;
                        }

                        @media (max-width: 480px) {
                          .wbs-pck__block-id-{{ block.id }} .wbs-pck__icon {
                            --flex-items: {{ 100.00 | divided_by: block.settings.mobile_icon_width }};
                          }
                        }
                      </style>
                      <div class="wbs-pck__flex wbs-pck__icons {% if block.settings.icon_alignment == 'default' %}wbs-pck__justify-{{ section.settings.text_alignment }}{% else %}wbs-pck__justify-{{ block.settings.icon_alignment }}{% endif %}">
                        {%- for index in (1..4) -%}
                          {%- capture icon -%}icon_{{ forloop.index }}{%- endcapture -%}
                          {%- capture text -%}text_{{ forloop.index }}{%- endcapture -%}
                          {%- capture link -%}link_{{ forloop.index }}{%- endcapture -%}
                          {%- if block.settings[icon] != blank -%}
                            <div class="wbs-pck__flex-item wbs-pck__icon wbs-pck__rte">
                              {%- if block.settings[link] != blank -%}
                                <a href="{{ block.settings[link] }}">
                              {%- endif -%}
                                {%- capture sizes -%}
                                  (max-width: 480px) calc(100vw / {{ block.settings.icon_width }}), calc({{ section.settings.text_width | default: 50 }}vw / {{ block.settings.icon_width }})
                                {%- endcapture -%}
                                {{ block.settings[icon] | image_url: width: block.settings[icon].width | image_tag:  widths: widths, sizes: sizes }}
                                {%- if block.settings[text] != blank -%}
                                  <p class="wbs-pck__icon-text">
                                    {{ block.settings[text] }}
                                  </p>
                                {%- endif -%}
                              {%- if block.settings[link] != blank -%}
                                </a>
                              {%- endif -%}
                            </div>
                          {%- endif -%}
                        {%- endfor -%}
                      </div>
                    {%- when 'text_columns' -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__columns {
                          gap: {{ block.settings.gap }}px;
                        }
                      </style>
                      <div class="wbs-pck__flex wbs-pck__columns wbs-pck__flex--2-per-row wbs-pck__justify-{{ block.settings.text_alignment }}">
                        {%- for index in (1..2) -%}
                          {%- capture heading -%}heading_{{ forloop.index }}{%- endcapture -%}
                          {%- capture column -%}column_{{ forloop.index }}{%- endcapture -%}
                          <div class="wbs-pck__flex-item">
                            {%- if block.settings[heading] != blank -%}
                              <h3 class="wbs-pck__small-heading wbs-pck__column-heading">{{ block.settings[heading] }}</h3>
                            {%- endif -%}
                            {%- if block.settings[column] != blank -%}
                              <div class="wbs-pck__rte">
                                {{ block.settings[column] }}
                              </div>
                            {%- endif -%}
                        </div>
                        {%- endfor -%}
                      </div>
                    {%- when 'countdown_timer' -%}
                      {%- comment -%} Schedule: timezone value {%- endcomment -%}
                      {%- assign timezone = block.settings.timezone | split: '~' | first | strip -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__clock-wrap {
                          max-width: 450px;
                          flex: 1 0 auto;
                          margin: 0 auto;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__clock {
                          grid-template-columns: repeat(4, minmax(0, 1fr));
                          text-transform: uppercase;
                          font-weight: bold;
                          letter-spacing: 1px;
                          {%- if section.settings.override_theme_font != blank -%}
                          font-family: var(--main-font);
                          font-weight: var(--main-font-weight);
                          font-style: var(--main-font-style);
                          {%- endif -%}
                          color: {{ section.settings.text_color }};
                          border: thin solid {{ section.settings.text_color }};
                          font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__measurement {
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          padding: 8px 20px;
                          border-left: thin solid {{ section.settings.text_color }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__measurement:first-child {
                          border-left: none;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__number {
                          width: 100%;
                          text-align: center;
                          font-weight: bold;
                          padding: 5px 0;
                          font-size: 1.5em;
                          min-height: 2em;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__label {
                          font-size: clamp(9px, 0.5em, 45px);
                          width: max-content;
                          padding: 0.5em 0.8em;
                        }
                      </style>
                      <div class="wbs-pck__clock-wrap"
                        data-timer-start="{{ block.settings.start_month }} {{ block.settings.start_day }} {{ block.settings.start_year }} {{ block.settings.start_time }} {{ timezone }}"
                        data-timer-end="{{ block.settings.end_month }} {{ block.settings.end_day }} {{ block.settings.end_year }} {{ block.settings.end_time }} {{ timezone }}">
                          <div class="wbs-pck__clock wbs-pck__grid">
                            <div class="wbs-pck__measurement wbs-pck__days">
                              <span class="wbs-pck__number">--</span>
                              <span class="wbs-pck__label">{{ 'days' | t }}</span>
                            </div>
                            <div class="wbs-pck__measurement wbs-pck__hours">
                              <span class="wbs-pck__number">--</span>
                              <span class="wbs-pck__label">{{ 'hours' | t }}</span>
                            </div>
                            <div class="wbs-pck__measurement wbs-pck__minutes">
                              <span class="wbs-pck__number">--</span>
                              <span class="wbs-pck__label">{{ 'minutes' | t }}</span>
                            </div>
                            <div class="wbs-pck__measurement wbs-pck__seconds">
                              <span class="wbs-pck__number">--</span>
                              <span class="wbs-pck__label wbs-pck__seconds-text">{{ 'seconds' | t }}</span>
                            </div>
                          </div>
                      </div>
                    {%- when 'small_text' -%}
                      {%- if block.settings.small_text != blank -%}
                        <div class="wbs-pck__small-text wbs-pck__rte">
                          {{ block.settings.small_text }}
                        </div>
                      {%- endif -%}
                    {%- when 'heading' -%}
                      <style>
                        {%- if block.settings.enable_custom_font != blank -%}
                          {{ block.settings.custom_font | font_face: font_display: 'swap' }}
                          {{ block.settings.custom_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
                          {{ block.settings.custom_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}
                          {{ block.settings.custom_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
                          .wbs-pck__block-id-{{ block.id }} {
                            --custom-font: {{ block.settings.custom_font.family }}, {{ block.settings.custom_font.fallback_families }};
                            --custom-font-weight: {{ block.settings.custom_font.weight }};
                            --custom-font-style: {{ block.settings.custom_font.style }};
                          }
                        {% endif %}

                        {%- assign block_heading_alpha = block.settings.block_heading_color | color_extract: 'alpha' -%}

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__heading {
                          margin: 0;
                          line-height: calc(3px + 2ex + 3px);
                          {%- if block_heading_alpha != 0 -%}
                            color: {{ block.settings.block_heading_color }};
                          {%- endif -%}
                          {%- if block.settings.block_heading_size != blank -%}
                            font-size: calc({{ block.settings.block_heading_size }} * {{ section.settings.text_size | times: 0.01 }});
                          {%- else -%}
                            font-size: calc(var(--dp-g-heading-size, var(--dp-heading-size, 35px)) * {{ section.settings.text_size | times: 0.01 }});
                          {%- endif -%}
                          {%- if block.settings.enable_custom_font != blank -%}
                          font-family: var(--custom-font);
                          font-weight: var(--custom-font-weight);
                          font-style: var(--custom-font-style);
                          {%- elsif section.settings.override_theme_font != blank -%}
                          font-family: var(--heading-font);
                          font-weight: var(--heading-font-weight);
                          font-style: var(--heading-font-style);
                          {%- endif -%}
                        }

                        @media (max-width: 480px) {
                          .wbs-pck__block-id-{{ block.id }} .wbs-pck__heading {
                            {%- if block.settings.block_heading_size != blank -%}
                              font-size: min({{ block.settings.block_heading_size }}, 50px);
                            {%- endif -%}
                          }
                        }

                      </style>
                      {%- if block.settings.title != blank -%}
                        <{{- block.settings.heading_level }} class="wbs-pck__heading">
                          {{ block.settings.title | newline_to_br }}
                        </{{- block.settings.heading_level -}}>
                      {%- endif -%}

                    {%- when 'text' -%}
                      {%- if block.settings.text != blank -%}
                        <div class="wbs-pck__text wbs-pck__rte">
                          {{ block.settings.text }}
                        </div>
                      {%- endif -%}
                    {%- when 'buttons' -%}
                      <style>
                        {%- assign button_alpha_primary = block.settings.button_background_color_primary | color_extract: 'alpha' -%}
                        {%- assign button_alpha_secondary = block.settings.button_background_color_secondary | color_extract: 'alpha' -%}

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button-area {
                          display: grid;
                          grid-gap: 1.3em;
                          {%- if section.settings.text_alignment == 'center' -%}
                            margin: 0 auto;
                          {%- elsif section.settings.text_alignment == 'right' -%}
                            margin: 0 0 0 auto;
                          {%- endif -%}
                          {%- if block.settings.button_label_primary != blank and block.settings.button_label_secondary != blank -%}
                            grid-template-columns: repeat(2, 1fr);
                          {%- else -%}
                            grid-template-columns: 1fr;
                            max-width: 200px;
                          {%- endif -%}
                          max-width: 100%;
                          width: fit-content;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button {
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          text-align: center;
                          text-decoration: none;
                          padding: 0.5em 1.2em;
                          margin-top: 0;
                          border: thin solid;
                          transition: all 0.3s ease-in-out;
                          border-radius: {{ block.settings.button_radius }}px;
                          line-height: calc(3px + 2ex + 3px);
                          font-size: calc(var(--dp-g-body-size, var(--dp-body-size, 18px)) * {{ section.settings.text_size | times: 0.01 }});
                          {%- if section.settings.override_theme_font != blank -%}
                          font-family: var(--main-font);
                          font-weight: var(--main-font-weight);
                          font-style: var(--main-font-style);
                          {%- endif -%}
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button-primary {
                          color: {{ block.settings.button_label_color_primary }};
                          border-color: {%- if button_alpha_primary != 0 -%}{{ block.settings.button_background_color_primary }}{%- else -%}{{ block.settings.button_label_color_primary }}{%- endif -%};
                          background-color: {{ block.settings.button_background_color_primary }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button-secondary {
                          color: {{ block.settings.button_label_color_secondary }};
                          border-color: {%- if button_alpha_secondary != 0 -%}{{ block.settings.button_background_color_secondary }}{%- else -%}{{ block.settings.button_label_color_secondary }}{%- endif -%};
                          background-color: {{ block.settings.button_background_color_secondary }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button-primary:hover {
                          opacity: 1;
                          {%- if button_alpha_primary != 0 -%}
                          background-color: {{ block.settings.button_background_color_primary | color_darken: 10 }};
                          border-color: transparent;
                          {%- else -%}
                          background-color: {{ block.settings.button_label_color_primary | color_modify: 'alpha', 0.1 }}
                          {%- endif -%};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__button-secondary:hover {
                          opacity: 1;
                          {%- if button_alpha_secondary != 0 -%}
                          background-color: {{ block.settings.button_background_color_secondary | color_darken: 10 }};
                          border-color: transparent;
                          {%- else -%}
                          background-color: {{ block.settings.button_label_color_secondary | color_modify: 'alpha', 0.1 }}
                          {%- endif -%};
                        }

                        @media (max-width: 480px) {
                          .wbs-pck__block-id-{{ block.id }} div.wbs-pck__button-area {
                            grid-template-columns: 1fr;
                            width: 100%;
                            gap: 10px;
                          }
                        }
                      </style>
                      <div class="wbs-pck__button-area">
                        {%- if block.settings.button_label_primary != blank -%}
                          <a class="wbs-pck__button wbs-pck__button-primary" {%- if block.settings.link_primary != blank -%} href="{{ block.settings.link_primary }}" {%- endif -%} {% if block.settings.external_link_primary %}target="_blank"{% endif %}>{{ block.settings.button_label_primary }}</a>
                        {%- endif -%}
                        {%- if block.settings.button_label_secondary != blank -%}
                          <a class="wbs-pck__button wbs-pck__button-secondary" {%- if block.settings.link_secondary != blank -%}href="{{ block.settings.link_secondary }}"{%- endif -%} {% if block.settings.external_link_secondary %}target="_blank"{% endif %}>{{ block.settings.button_label_secondary }}</a>
                        {%- endif -%}
                      </div>
                    {%- when 'inset_image' -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__image__wrapper {
                          width: {{ block.settings.inset_image_size }}%;
                          display: inline-block;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__image__wrapper svg {
                          width: 100%;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__image__wrapper path {
                          fill: {{ section.settings.text_color }};
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__item img {
                          width: 100%;
                          object-fit: contain;
                        }
                      </style>
                      {%- capture placeholder_image -%}
                        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.651 12.851c-2.13 1.94-5.17 2.91-9.07 2.91-.91 0-1.87-.04-2.88-.17-.38.86-.6 1.71-.6 2.51 0 .55-.45 1-1 1s-1-.45-1-1c0-.24.01-.48.04-.72.02-.13.03-.26.06-.39.18-1.13.64-2.27 1.29-3.39 2.32-4.02 9.3-8.68 12.61-9.5-4.76-.03-12 3-13.91 6.93 0-2.89 2.3-6.42 5.46-8.38 4.54-2.82 10.47-1.14 12.06 0 .23.16.37.42.38.7.08 2.31-.25 6.62-3.44 9.5z" fill="#5C5F62"/></svg>
                      {%- endcapture -%}
                      <div class="wbs-pck__inset-image wbs-pck__flex wbs-pck__justify-{%- if block.settings.image_alignment != 'default' -%}{{ block.settings.image_alignment }}{%- else -%}{{ section.settings.text_alignment }}{%- endif -%}">
                        {%- if block.settings.inset_image != blank -%}
                          <div class="wbs-pck__image__wrapper">
                            <svg viewBox="0 0 {{ block.settings.inset_image.width }} {{ block.settings.inset_image.height }}"></svg>
                            {%- capture sizes -%}
                              (max-width: 480px) {{ block.settings.inset_image_size }}vw,(max-width: 767px) {{ block.settings.inset_image_size }}vw, {{ 0.5 | times: block.settings.inset_image_size | divided_by: 100.0 | times: 100.0 | round }}vw
                            {%- endcapture -%}
                            {{ block.settings.inset_image | image_url: width: 1000 | image_tag:  widths: widths, sizes: sizes }}
                          </div>
                        {%- else -%}
                          <div class="wbs-pck__image__wrapper">
                            {{ placeholder_image | strip }}
                          </div>
                        {%- endif -%}
                      </div>
                    {%- when 'divider' -%}
                      <style>
                        .wbs-pck__block-id-{{ block.id }} {
                          padding-top: {{ block.settings.padding_top }}px;
                          padding-bottom: {{ block.settings.padding_bottom }}px;
                        }

                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__divider {
                          height: 0;
                          border: none;
                          background: transparent;
                          {%- if section.settings.text_alignment == 'left' -%}
                            margin: 0;
                          {%- elsif section.settings.text_alignment == 'right' -%}
                            margin: 0 0 0 auto;
                          {%- else -%}
                            margin: 0 auto;
                          {%- endif -%}
                          width: {{ block.settings.base_width }}%;
                          border-top: {{ block.settings.thickness }}px {{ block.settings.style }} {{ block.settings.divider_color }};
                        }
                      </style>
                      <hr class="wbs-pck__divider" aria-hidden="true">
                    {%- when 'liquid' -%}
                      {{ block.settings.liquid }}
                    {%- when '@app' -%}
                      {% render block %}
                    {%- when 'spacer' -%}
                      <style>
                        #shopify-section-{{ section.id }} #DP--{{ section.id }} .wbs-pck__block-id-{{ block.id }},
                        #shopify-section-{{ section.id }} #DP--{{ section.id }} .wbs-pck__block-id-{{ block.id }} + .wbs-pck__block {
                          margin-top: 0;
                        }
                        .wbs-pck__block-id-{{ block.id }} .wbs-pck__spacer {
                          height: {{ block.settings.size }}px;
                          display: block !important;
                        }
                        @media (max-width: 480px) {
                          .wbs-pck__block-id-{{ block.id }} .wbs-pck__spacer {
                            height: {{ block.settings.size | times: 0.75 | round: 0 }}px;
                          }
                        }
                      </style>
                      <div class="wbs-pck__spacer" aria-hidden="true"></div>
                  {%- endcase -%}
                </div>
              {%- endfor -%}
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}

{% schema %}
{
  "name": "Autoplay video",
  "class": "DP__banner-video-background",
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Attention-grabbing headline"
        },
        {
          "type": "header",
          "content": "Advanced"
        },
        {
          "type": "color",
          "id": "block_heading_color",
          "label": "Heading color"
        },
        {
          "type": "text",
          "id": "block_heading_size",
          "label": "Base text size",
          "info": "Set custom base size for heading. Leave empty to default to base size of 35px. Base size is affected by section text size setting."
        },
        {
          "type": "checkbox",
          "id": "enable_custom_font",
          "label": "Enable custom font",
          "default": false
        },
        {
          "type": "font_picker",
          "id": "custom_font",
          "label": "Custom font",
          "default": "abel_n4"
        },
        {
          "type": "select",
          "id": "heading_level",
          "label": "Heading level",
          "options": [
            {
              "value": "h1",
              "label": "h1"
            },
            {
              "value": "h2",
              "label": "h2"
            },
            {
              "value": "h3",
              "label": "h3"
            },
            {
              "value": "h4",
              "label": "h4"
            },
            {
              "value": "h5",
              "label": "h5"
            },
            {
              "value": "h6",
              "label": "h6"
            }
          ],
          "default": "h2",
          "info": "The most important heading has the rank 1 (<h1>) and the least important heading has rank 6 (<h6>). Only use one h1 on a page."
        }
      ]
    },
    {
      "type": "fancy_heading",
      "name": "Fancy heading",
      "settings": [
        {
          "type": "paragraph",
          "content": "Use square brackets [] around text that you would like to look different."
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "[Attention-grabbing] headline"
        },
        {
          "type": "color",
          "id": "highlight_text_color",
          "label": "Text",
          "default": "#FFFFFF"
        },
        {
          "type": "color",
          "id": "highlight_background_color",
          "label": "Background",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "padding-left-fancy",
          "label": "Padding Left Right",
          "min": 0,
          "max": 60,
          "step": 5,
          "unit": "px",
          "default": 25
        },
        {
          "type": "range",
          "id": "padding-fancy",
          "label": "Padding Top Bottom",
          "min": 0,
          "max": 60,
          "step": 5,
          "default": 10
         },
         {
          "type": "range",
          "id": "border-fancy",
          "label": "Border Radius",
          "min": 0,
          "max": 50,
          "default": 0,
          "step": 2,
          "unit": "px"
         },
         {
          "type": "text",
          "id": "highlight_heading_size",
          "label": "Base text size",
          "placeholder": "eg. 40px",
          "info": "Set custom base size for highlight text. Leave empty to default to base size of 35px. Base size is affected by section text size setting."
        },
        {
          "type": "checkbox",
          "id": "highlight_enable_custom_font",
          "label": "Enable custom font on selected text",
          "default": false
        },
        {
          "type": "font_picker",
          "id": "highlight_custom_font",
          "label": "Custom font",
          "default": "abel_n4"
        },
        {
          "type": "select",
          "id": "heading_level",
          "label": "Heading level",
          "options": [
            {
              "value": "h1",
              "label": "h1"
            },
            {
              "value": "h2",
              "label": "h2"
            },
            {
              "value": "h3",
              "label": "h3"
            },
            {
              "value": "h4",
              "label": "h4"
            },
            {
              "value": "h5",
              "label": "h5"
            },
            {
              "value": "h6",
              "label": "h6"
            }
          ],
          "default": "h2",
          "info": "The most important heading has the rank 1 (<h1>) and the least important heading has rank 6 (<h6>). Only use one h1 on a page."
        },
        {
          "type": "html",
          "id": "custom_css",
          "label": "CSS"
        }
      ]
    },
    {
      "type": "spacer",
      "name": "Spacer",
      "settings": [
        {
          "type": "range",
          "id": "size",
          "label": "Spacing height",
          "min": 0,
          "max": 100,
          "default": 40,
          "unit": "px"
        }
      ]
    },
    {
      "type": "divider",
      "name": "Divider",
      "settings": [
        {
          "type": "range",
          "id": "base_width",
          "label": "Width",
          "min": 20,
          "max": 100,
          "step": 5,
          "default": 50,
          "unit": "%"
        },
        {
          "type": "range",
          "id": "thickness",
          "label": "Thickness",
          "min": 0,
          "max": 10,
          "default": 1,
          "unit": "px"
        },
        {
          "type": "select",
          "id": "style",
          "label": "Style",
          "default": "solid",
          "options": [
            {
              "value": "solid",
              "label": "Solid line"
            },
            {
              "value": "dotted",
              "label": "Dotted line"
            },
            {
              "value": "dashed",
              "label": "Dashed line"
            },
            {
              "value": "double",
              "label": "Double line"
            }
          ]
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "divider_color",
          "label": "Color",
          "default": "#FFFFFF"
        },
        {
          "type": "header",
          "content": "Layout"
        },
        {
          "type": "range",
          "id": "padding_top",
          "label": "Padding - top",
          "min": 0,
          "max": 100,
          "default": 40,
          "step": 5,
          "unit": "px"
        },
        {
          "type": "range",
          "id": "padding_bottom",
          "label": "Padding - bottom",
          "min": 0,
          "max": 100,
          "default": 40,
          "step": 5,
          "unit": "px"
        }
      ]
    },
    {
      "type": "text",
      "name": "Regular text",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Drag and drop block options like heading, text, buttons, dividers, and more.</p>"
        }
      ]
    },
    {
      "type": "collapsible_content",
      "name": "Collapsible content",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Shipping information"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Collapsed content",
          "default": "<p>Lorem ipsum dolor.</p>"
        },
        {
          "type": "select",
          "id": "icon_style",
          "label": "Icon style",
          "options": [
            {
              "value": "plus_minus",
              "label": "Plus and minus"
            },
            {
              "value": "plus_minus_square",
              "label": "Plus and minus buttons"
            },
            {
              "value": "caret",
              "label": "Carets"
            }
          ],
          "default": "plus_minus_square"
        },
        {
          "type": "checkbox",
          "id": "show_open",
          "label": "Show open by default",
          "default": false
        }
      ]
    },
    {
      "type": "small_text",
      "name": "Small text",
      "settings": [
        {
          "type": "richtext",
          "id": "small_text",
          "label": "Small text",
          "default": "<p>New arrivals</p>"
        }
      ]
    },
    {
      "type": "list",
      "name": "List",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "List items",
          "default": "<p>** Important point number one</p><p>** Next point in the list</p>",
          "info": "Use two asterisks (**) to create a new list item"
        },
        {
          "type": "select",
          "id": "list_style",
          "label": "Style",
          "options": [
            {
              "value": "decimal",
              "label": "Numbered"
            },
            {
              "value": "square",
              "label": "Square"
            },
            {
              "value": "circle",
              "label": "Circle outline"
            },
            {
              "value": "inherit",
              "label": "Disc (default)"
            }
          ],
          "default": "inherit"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "Buttons",
      "settings": [
        {
          "type": "range",
          "id": "button_radius",
          "label": "Button border radius",
          "min": 0,
          "max": 50,
          "default": 0,
          "unit": "px"
        },
        {
          "type": "header",
          "content": "Primary button"
        },
        {
          "type": "text",
          "id": "button_label_primary",
          "label": "Primary button",
          "default": "Learn more"
        },
        {
          "type": "url",
          "id": "link_primary",
          "label": "Primary link"
        },
        {
          "type": "checkbox",
          "id": "external_link_primary",
          "label": "Open primary link in a new window"
        },
        {
          "type": "color",
          "id": "button_label_color_primary",
          "label": "Primary button label",
          "default": "#121212"
        },
        {
          "type": "color",
          "id": "button_background_color_primary",
          "label": "Primary button background",
          "default": "rgba(0,0,0,0)"
        },
        {
          "type": "header",
          "content": "Secondary button"
        },
        {
          "type": "text",
          "id": "button_label_secondary",
          "label": "Secondary button",
          "default": "Shop now"
        },
        {
          "type": "url",
          "id": "link_secondary",
          "label": "Secondary link"
        },
        {
          "type": "checkbox",
          "id": "external_link_secondary",
          "label": "Open secondary link in a new window"
        },
        {
          "type": "color",
          "id": "button_label_color_secondary",
          "label": "Secondary button label",
          "default": "#FFFFFF"
        },
        {
          "type": "color",
          "id": "button_background_color_secondary",
          "label": "Secondary button background",
          "default": "#121212"
        }
      ]
    },
    {
      "type": "icons",
      "name": "Icons",
      "settings": [
        {
          "type": "range",
          "id": "icon_width",
          "label": "Icon width",
          "default": 25,
          "min": 10,
          "max": 100,
          "unit": "%"
        },
        {
          "type": "range",
          "id": "image_size",
          "min": 10,
          "max": 100,
          "label": "Image size",
          "default": 100,
          "unit": "%"
        },
        {
          "type": "range",
          "id": "gap",
          "min": 0,
          "max": 40,
          "label": "Spacing gap",
          "unit": "px",
          "default": 20
        },
        {
          "type": "select",
          "id": "icon_alignment",
          "label": "Icon alignment",
          "default": "default",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            },
            {
              "value": "default",
              "label": "Default"
            }
          ]
        },
        {
          "type": "header",
          "content": "Mobile"
        },
        {
          "type": "range",
          "id": "mobile_icon_width",
          "label": "Icon size",
          "default": 50,
          "min": 10,
          "max": 100,
          "unit": "%"
        },
        {
          "type": "header",
          "content": "Icon 1"
        },
        {
          "type": "image_picker",
          "id": "icon_1",
          "label": "Icon 1"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "Text 1"
        },
        {
          "type": "url",
          "id": "link_1",
          "label": "Link 1"
        },
        {
          "type": "header",
          "content": "Icon 2"
        },
        {
          "type": "image_picker",
          "id": "icon_2",
          "label": "Icon 2"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "Text 2"
        },
        {
          "type": "url",
          "id": "link_2",
          "label": "Link 2"
        },
        {
          "type": "header",
          "content": "Icon 3"
        },
        {
          "type": "image_picker",
          "id": "icon_3",
          "label": "Icon 3"
        },
        {
          "type": "text",
          "id": "text_3",
          "label": "Text 3"
        },
        {
          "type": "url",
          "id": "link_3",
          "label": "Link 3"
        },
        {
          "type": "header",
          "content": "Icon 4"
        },
        {
          "type": "image_picker",
          "id": "icon_4",
          "label": "Icon 4"
        },
        {
          "type": "text",
          "id": "text_4",
          "label": "Text 4"
        },
        {
          "type": "url",
          "id": "link_4",
          "label": "Link 4"
        }
      ]
    },
    {
      "type": "text_columns",
      "name": "Text columns",
      "settings": [
        {
          "type": "range",
          "id": "gap",
          "min": 0,
          "max": 40,
          "label": "Spacing gap",
          "unit": "px",
          "default": 10
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text alignment",
          "default": "center",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            },
            {
              "value": "justify",
              "label": "Justify"
            }
          ]
        },
        {
          "type": "header",
          "content": "Column 1"
        },
        {
          "type": "text",
          "id": "heading_1",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "column_1",
          "label": "Text",
          "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero. Curabitur id nulla ut nunc aliquam sodales.</p>"
        },
        {
          "type": "header",
          "content": "Column 2"
        },
        {
          "type": "text",
          "id": "heading_2",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "column_2",
          "label": "Text",
          "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero. Curabitur id nulla ut nunc aliquam sodales.</p>"
        }
      ]
    },
    {
      "type": "inset_image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "inset_image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "inset_image_size",
          "label": "Image size",
          "default": 10,
          "min": 5,
          "max": 100,
          "step": 5,
          "unit": "%"
        },
        {
          "type": "select",
          "id": "image_alignment",
          "label": "Image alignment",
          "default": "default",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            },
            {
              "value": "default",
              "label": "Default"
            }
          ]
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter form",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
        },
        {
          "type": "select",
          "id": "layout",
          "label": "Layout",
          "options": [
            {
              "value": "stacked",
              "label": "Stacked"
            },
            {
              "value": "compact",
              "label": "Compact"
            }
          ],
          "default": "compact"
        },
        {
          "type": "text",
          "id": "email_label",
          "label": "Email label",
          "default": "Email address"
        },
        {
          "type": "text",
          "id": "submit_label",
          "label": "Submit label",
          "default": "Submit"
        },
        {
          "type": "header",
          "content": "First name"
        },
        {
          "type": "checkbox",
          "id": "show_first_name",
          "label": "Show first name",
          "default": false
        },
        {
          "type": "text",
          "id": "first_name_label",
          "label": "First name label",
          "default": "First name"
        },
        {
          "type": "header",
          "content": "Last name"
        },
        {
          "type": "checkbox",
          "id": "show_last_name",
          "label": "Show last name",
          "default": false
        },
        {
          "type": "text",
          "id": "last_name_label",
          "label": "Last name label",
          "default": "Last name"
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "button_label_color",
          "label": "Button label",
          "default": "#FFFFFF"
        },
        {
          "type": "color",
          "id": "button_background_color",
          "label": "Button background",
          "default": "#283144"
        },
        {
          "type": "range",
          "id": "button_radius",
          "label": "Button border radius",
          "min": 0,
          "max": 50,
          "default": 0,
          "unit": "px"
        }
      ]
    },
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "video",
          "id": "video",
          "label": "Video"
        },
        {
          "type": "checkbox",
          "id": "autoplay",
          "label": "Autoplay",
          "info": "Video will be muted.",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "loop",
          "label": "Loop video",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "show_controls",
          "label": "Show controls",
          "default": true
        }
      ]
    },
    {
      "type": "feature_range",
      "name": "Feature range",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Heading"
        },
        {
          "type": "text",
          "id": "low_range_label",
          "label": "Low range label",
          "default": "Mild"
        },
        {
          "type": "text",
          "id": "high_range_label",
          "label": "High range label",
          "default": "Spicy"
        },
        {
          "type": "range",
          "id": "level",
          "label": "Level",
          "default": 5,
          "min": 0,
          "max": 10,
          "step": 0.1
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "line_color",
          "label": "Line",
          "default": "#283144"
        },
        {
          "type": "color",
          "id": "dot_color",
          "label": "Dot",
          "default": "#283144"
        },
        {
          "type": "range",
          "id": "line_size",
          "label": "Line size",
          "default": 1,
          "min": 1,
          "max": 8
        },
        {
          "type": "range",
          "id": "dot_size",
          "label": "Dot size",
          "default": 18,
          "min": 10,
          "max": 40
        }
      ]
    },
    {
      "type": "countdown_timer",
      "name": "Countdown timer",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "timezone",
          "label": "Timezone",
          "default": "-05:00 ~ (GMT-05:00) Eastern Time (US & Canada)",
          "options": [
            {
              "value": "-11:00 ~ (GMT-11:00) International Date Line West",
              "label": "(GMT-11:00) International Date Line West"
            },
            {
              "value": "-11:00 ~ (GMT-11:00) Midway Island",
              "label": "(GMT-11:00) Midway Island"
            },
            {
              "value": "-11:00 ~ (GMT-11:00) American Samoa",
              "label": "(GMT-11:00) American Samoa"
            },
            {
              "value": "-10:00 ~ (GMT-10:00) Hawaii",
              "label": "(GMT-10:00) Hawaii"
            },
            {
              "value": "-09:00 ~ (GMT-09:00) Alaska",
              "label": "(GMT-09:00) Alaska"
            },
            {
              "value": "-08:00 ~ (GMT-08:00) Pacific Time (US & Canada)",
              "label": "(GMT-08:00) Pacific Time (US & Canada)"
            },
            {
              "value": "-08:00 ~ (GMT-08:00) Tijuana",
              "label": "(GMT-08:00) Tijuana"
            },
            {
              "value": "-07:00 ~ (GMT-07:00) Mountain Time (US & Canada)",
              "label": "(GMT-07:00) Mountain Time (US & Canada)"
            },
            {
              "value": "-07:00 ~ (GMT-07:00) Arizona",
              "label": "(GMT-07:00) Arizona"
            },
            {
              "value": "-07:00 ~ (GMT-07:00) Chihuahua",
              "label": "(GMT-07:00) Chihuahua"
            },
            {
              "value": "-06:00 ~ (GMT-06:00) Central Time (US & Canada)",
              "label": "(GMT-06:00) Central Time (US & Canada)"
            },
            {
              "value": "-06:00 ~ (GMT-06:00) Saskatchewan",
              "label": "(GMT-06:00) Saskatchewan"
            },
            {
              "value": "-06:00 ~ (GMT-06:00) Monterrey",
              "label": "(GMT-06:00) Monterrey"
            },
            {
              "value": "-05:00 ~ (GMT-05:00) Eastern Time (US & Canada)",
              "label": "(GMT-05:00) Eastern Time (US & Canada)"
            },
            {
              "value": "-05:00 ~ (GMT-05:00) Indiana (East)",
              "label": "(GMT-05:00) Indiana (East)"
            },
            {
              "value": "-05:00 ~ (GMT-05:00) Bogota",
              "label": "(GMT-05:00) Bogota"
            },
            {
              "value": "-05:00 ~ (GMT-05:00) Lima",
              "label": "(GMT-05:00) Lima"
            },
            {
              "value": "-05:00 ~ (GMT-05:00) Quito",
              "label": "(GMT-05:00) Quito"
            },
            {
              "value": "-04:00 ~ (GMT-04:00) Atlantic Time (Canada)",
              "label": "(GMT-04:00) Atlantic Time (Canada)"
            },
            {
              "value": "-04:30 ~ (GMT-04:30) Caracas",
              "label": "(GMT-04:30) Caracas"
            },
            {
              "value": "-04:00 ~ (GMT-04:00) La Paz",
              "label": "(GMT-04:00) La Paz"
            },
            {
              "value": "-04:00 ~ (GMT-04:00) Santiago",
              "label": "(GMT-04:00) Santiago"
            },
            {
              "value": "-03:30 ~ (GMT-03:30) Newfoundland",
              "label": "(GMT-03:30) Newfoundland"
            },
            {
              "value": "-03:00 ~ (GMT-03:00) Brasilia",
              "label": "(GMT-03:00) Brasilia"
            },
            {
              "value": "-03:00 ~ (GMT-03:00) Buenos Aires",
              "label": "(GMT-03:00) Buenos Aires"
            },
            {
              "value": "-04:00 ~ (GMT-04:00) Georgetown",
              "label": "(GMT-04:00) Georgetown"
            },
            {
              "value": "-03:00 ~ (GMT-03:00) Greenland",
              "label": "(GMT-03:00) Greenland"
            },
            {
              "value": "-01:00 ~ (GMT-01:00) Azores",
              "label": "(GMT-01:00) Azores"
            },
            {
              "value": "-01:00 ~ (GMT-01:00) Cape Verde Is.",
              "label": "(GMT-01:00) Cape Verde Is."
            },
            {
              "value": "+00:00 ~ (GMT+00:00) Dublin",
              "label": "(GMT+00:00) Dublin"
            },
            {
              "value": "+00:00 ~ (GMT+00:00) Edinburgh",
              "label": "(GMT+00:00) Edinburgh"
            },
            {
              "value": "+00:00 ~ (GMT+00:00) Lisbon",
              "label": "(GMT+00:00) Lisbon"
            },
            {
              "value": "+00:00 ~ (GMT+00:00) Casablanca",
              "label": "(GMT+00:00) Casablanca"
            },
            {
              "value": "+00:00 ~ (GMT+00:00) Monrovia",
              "label": "(GMT+00:00) Monrovia"
            },
            {
              "value": "+00:00 ~ (GMT+00:00) UTC",
              "label": "(GMT+00:00) UTC"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Belgrade",
              "label": "(GMT+01:00) Belgrade"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Bratislava",
              "label": "(GMT+01:00) Bratislava"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Budapest",
              "label": "(GMT+01:00) Budapest"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Ljubljana",
              "label": "(GMT+01:00) Ljubljana"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Prague",
              "label": "(GMT+01:00) Prague"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Sarajevo",
              "label": "(GMT+01:00) Sarajevo"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Skopje",
              "label": "(GMT+01:00) Skopje"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Warsaw",
              "label": "(GMT+01:00) Warsaw"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Zagreb",
              "label": "(GMT+01:00) Zagreb"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Brussels",
              "label": "(GMT+01:00) Brussels"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Copenhagen",
              "label": "(GMT+01:00) Copenhagen"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Madrid",
              "label": "(GMT+01:00) Madrid"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Paris",
              "label": "(GMT+01:00) Paris"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Amsterdam",
              "label": "(GMT+01:00) Amsterdam"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Berlin",
              "label": "(GMT+01:00) Berlin"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Bern",
              "label": "(GMT+01:00) Bern"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Rome",
              "label": "(GMT+01:00) Rome"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Stockholm",
              "label": "(GMT+01:00) Stockholm"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) Vienna",
              "label": "(GMT+01:00) Vienna"
            },
            {
              "value": "+01:00 ~ (GMT+01:00) West Central Africa",
              "label": "(GMT+01:00) West Central Africa"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Bucharest",
              "label": "(GMT+02:00) Bucharest"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Cairo",
              "label": "(GMT+02:00) Cairo"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Helsinki",
              "label": "(GMT+02:00) Helsinki"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Kyiv",
              "label": "(GMT+02:00) Kyiv"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Riga",
              "label": "(GMT+02:00) Riga"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Sofia",
              "label": "(GMT+02:00) Sofia"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Tallinn",
              "label": "(GMT+02:00) Tallinn"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Vilnius",
              "label": "(GMT+02:00) Vilnius"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Athens",
              "label": "(GMT+02:00) Athens"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Istanbul",
              "label": "(GMT+02:00) Istanbul"
            },
            {
              "value": "+03:00 ~ (GMT+03:00) Minsk",
              "label": "(GMT+03:00) Minsk"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Jerusalem",
              "label": "(GMT+02:00) Jerusalem"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Harare",
              "label": "(GMT+02:00) Harare"
            },
            {
              "value": "+02:00 ~ (GMT+02:00) Pretoria",
              "label": "(GMT+02:00) Pretoria"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Moscow",
              "label": "(GMT+04:00) Moscow"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Volgograd",
              "label": "(GMT+04:00) Volgograd"
            },
            {
              "value": "+03:00 ~ (GMT+03:00) Kuwait",
              "label": "(GMT+03:00) Kuwait"
            },
            {
              "value": "+03:00 ~ (GMT+03:00) Riyadh",
              "label": "(GMT+03:00) Riyadh"
            },
            {
              "value": "+03:00 ~ (GMT+03:00) Nairobi",
              "label": "(GMT+03:00) Nairobi"
            },
            {
              "value": "+03:00 ~ (GMT+03:00) Baghdad",
              "label": "(GMT+03:00) Baghdad"
            },
            {
              "value": "+03:30 ~ (GMT+03:30) Tehran",
              "label": "(GMT+03:30) Tehran"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Abu Dhabi",
              "label": "(GMT+04:00) Abu Dhabi"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Muscat",
              "label": "(GMT+04:00) Muscat"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Baku",
              "label": "(GMT+04:00) Baku"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Tbilisi",
              "label": "(GMT+04:00) Tbilisi"
            },
            {
              "value": "+04:00 ~ (GMT+04:00) Yerevan",
              "label": "(GMT+04:00) Yerevan"
            },
            {
              "value": "+04:30 ~ (GMT+04:30) Kabul",
              "label": "(GMT+04:30) Kabul"
            },
            {
              "value": "+06:00 ~ (GMT+06:00) Ekaterinburg",
              "label": "(GMT+06:00) Ekaterinburg"
            },
            {
              "value": "+05:00 ~ (GMT+05:00) Islamabad",
              "label": "(GMT+05:00) Islamabad"
            },
            {
              "value": "+05:00 ~ (GMT+05:00) Karachi",
              "label": "(GMT+05:00) Karachi"
            },
            {
              "value": "+05:00 ~ (GMT+05:00) Tashkent",
              "label": "(GMT+05:00) Tashkent"
            },
            {
              "value": "+05:30 ~ (GMT+05:30) Chennai",
              "label": "(GMT+05:30) Chennai"
            },
            {
              "value": "+05:30 ~ (GMT+05:30) Kolkata",
              "label": "(GMT+05:30) Kolkata"
            },
            {
              "value": "+05:45 ~ (GMT+05:45) Kathmandu",
              "label": "(GMT+05:45) Kathmandu"
            },
            {
              "value": "+06:00 ~ (GMT+06:00) Astana",
              "label": "(GMT+06:00) Astana"
            },
            {
              "value": "+06:00 ~ (GMT+06:00) Dhaka",
              "label": "(GMT+06:00) Dhaka"
            },
            {
              "value": "+05:30 ~ (GMT+05:30) Sri Jayawardenepura",
              "label": "(GMT+05:30) Sri Jayawardenepura"
            },
            {
              "value": "+06:00 ~ (GMT+06:00) Almaty",
              "label": "(GMT+06:00) Almaty"
            },
            {
              "value": "+07:00 ~ (GMT+07:00) Novosibirsk",
              "label": "(GMT+07:00) Novosibirsk"
            },
            {
              "value": "+06:30 ~ (GMT+06:30) Rangoon",
              "label": "(GMT+06:30) Rangoon"
            },
            {
              "value": "+07:00 ~ (GMT+07:00) Bangkok",
              "label": "(GMT+07:00) Bangkok"
            },
            {
              "value": "+07:00 ~ (GMT+07:00) Hanoi",
              "label": "(GMT+07:00) Hanoi"
            },
            {
              "value": "+07:00 ~ (GMT+07:00) Jakarta",
              "label": "(GMT+07:00) Jakarta"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Krasnoyarsk",
              "label": "(GMT+08:00) Krasnoyarsk"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Beijing",
              "label": "(GMT+08:00) Beijing"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Chongqing",
              "label": "(GMT+08:00) Chongqing"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Hong Kong",
              "label": "(GMT+08:00) Hong Kong"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Urumqi",
              "label": "(GMT+08:00) Urumqi"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Kuala Lumpur",
              "label": "(GMT+08:00) Kuala Lumpur"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Singapore",
              "label": "(GMT+08:00) Singapore"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Taipei",
              "label": "(GMT+08:00) Taipei"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Perth",
              "label": "(GMT+08:00) Perth"
            },
            {
              "value": "+09:00 ~ (GMT+09:00) Irkutsk",
              "label": "(GMT+09:00) Irkutsk"
            },
            {
              "value": "+08:00 ~ (GMT+08:00) Ulaan Bataar",
              "label": "(GMT+08:00) Ulaan Bataar"
            },
            {
              "value": "+09:00 ~ (GMT+09:00) Seoul",
              "label": "(GMT+09:00) Seoul"
            },
            {
              "value": "+09:00 ~ (GMT+09:00) Osaka",
              "label": "(GMT+09:00) Osaka"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Yakutsk",
              "label": "(GMT+10:00) Yakutsk"
            },
            {
              "value": "+09:30 ~ (GMT+09:30) Darwin",
              "label": "(GMT+09:30) Darwin"
            },
            {
              "value": "+09:30 ~ (GMT+09:30) Adelaide",
              "label": "(GMT+09:30) Adelaide"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Canberra",
              "label": "(GMT+10:00) Canberra"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Melbourne",
              "label": "(GMT+10:00) Melbourne"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Sydney",
              "label": "(GMT+10:00) Sydney"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Brisbane",
              "label": "(GMT+10:00) Brisbane"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Hobart",
              "label": "(GMT+10:00) Hobart"
            },
            {
              "value": "+11:00 ~ (GMT+11:00) Vladivostok",
              "label": "(GMT+11:00) Vladivostok"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Guam",
              "label": "(GMT+10:00) Guam"
            },
            {
              "value": "+10:00 ~ (GMT+10:00) Port Moresby",
              "label": "(GMT+10:00) Port Moresby"
            },
            {
              "value": "+12:00 ~ (GMT+12:00) Magadan",
              "label": "(GMT+12:00) Magadan"
            },
            {
              "value": "+12:00 ~ (GMT+12:00) Solomon Is.",
              "label": "(GMT+12:00) Solomon Is."
            },
            {
              "value": "+12:00 ~ (GMT+12:00) Fiji",
              "label": "(GMT+12:00) Fiji"
            },
            {
              "value": "+12:00 ~ (GMT+12:00) Kamchatka",
              "label": "(GMT+12:00) Kamchatka"
            },
            {
              "value": "+12:00 ~ (GMT+12:00) Marshall Is.",
              "label": "(GMT+12:00) Marshall Is."
            },
            {
              "value": "+12:00 ~ (GMT+12:00) Auckland",
              "label": "(GMT+12:00) Auckland"
            },
            {
              "value": "+13:00 ~ (GMT+13:00) Nuku'alofa",
              "label": "(GMT+13:00) Nuku'alofa"
            },
            {
              "value": "+13:00 ~ (GMT+13:00) Tokelau Is.",
              "label": "(GMT+13:00) Tokelau Is."
            },
            {
              "value": "+13:00 ~ (GMT+13:00) Samoa",
              "label": "(GMT+13:00) Samoa"
            }
          ]
        },
        {
          "type": "header",
          "content": "⏱ Start"
        },
        {
          "type": "select",
          "id": "start_month",
          "label": "Month",
          "default": "January",
          "options": [
            {
              "value": "January",
              "label": "January"
            },
            {
              "value": "February",
              "label": "February"
            },
            {
              "value": "March",
              "label": "March"
            },
            {
              "value": "April",
              "label": "April"
            },
            {
              "value": "May",
              "label": "May"
            },
            {
              "value": "June",
              "label": "June"
            },
            {
              "value": "July",
              "label": "July"
            },
            {
              "value": "August",
              "label": "August"
            },
            {
              "value": "September",
              "label": "September"
            },
            {
              "value": "October",
              "label": "October"
            },
            {
              "value": "November",
              "label": "November"
            },
            {
              "value": "December",
              "label": "December"
            }
          ]
        },
        {
          "type": "range",
          "id": "start_day",
          "label": "Day",
          "min": 1,
          "max": 31,
          "step": 1,
          "default": 1
        },
        {
          "type": "text",
          "id": "start_year",
          "label": "Year",
          "default": "2021"
        },
        {
          "type": "select",
          "id": "start_time",
          "label": "Start time",
          "default": "23:30:00",
          "options": [
            {
              "value": "00:00:00",
              "label": "12:00 am (0:00)"
            },
            {
              "value": "00:30:00",
              "label": "12:30 am (0:30)"
            },
            {
              "value": "01:00:00",
              "label": "1:00 am (1:00)"
            },
            {
              "value": "01:30:00",
              "label": "1:30 am (1:30)"
            },
            {
              "value": "02:00:00",
              "label": "2:00 am (2:00)"
            },
            {
              "value": "02:30:00",
              "label": "2:30 am (2:30)"
            },
            {
              "value": "03:00:00",
              "label": "3:00 am (3:00)"
            },
            {
              "value": "03:30:00",
              "label": "3:30 am (3:30)"
            },
            {
              "value": "04:00:00",
              "label": "4:00 am (4:00)"
            },
            {
              "value": "04:30:00",
              "label": "4:30 am (4:30)"
            },
            {
              "value": "05:00:00",
              "label": "5:00 am (5:00)"
            },
            {
              "value": "05:30:00",
              "label": "5:30 am (5:30)"
            },
            {
              "value": "06:00:00",
              "label": "6:00 am (6:00)"
            },
            {
              "value": "06:30:00",
              "label": "6:30 am (6:30)"
            },
            {
              "value": "07:00:00",
              "label": "7:00 am (7:00)"
            },
            {
              "value": "07:30:00",
              "label": "7:30 am (7:30)"
            },
            {
              "value": "08:00:00",
              "label": "8:00 am (8:00)"
            },
            {
              "value": "08:30:00",
              "label": "8:30 am (8:30)"
            },
            {
              "value": "09:00:00",
              "label": "9:00 am (9:00)"
            },
            {
              "value": "09:30:00",
              "label": "9:30 am (9:30)"
            },
            {
              "value": "10:00:00",
              "label": "10:00 am (10:00)"
            },
            {
              "value": "10:30:00",
              "label": "10:30 am (10:30)"
            },
            {
              "value": "11:00:00",
              "label": "11:00 am (11:00)"
            },
            {
              "value": "11:30:00",
              "label": "11:30 am (11:30)"
            },
            {
              "value": "12:00:00",
              "label": "12:00 pm (12:00)"
            },
            {
              "value": "12:30:00",
              "label": "12:30 pm (12:30)"
            },
            {
              "value": "13:00:00",
              "label": "1:00 pm (13:00)"
            },
            {
              "value": "13:30:00",
              "label": "1:30 pm (13:30)"
            },
            {
              "value": "14:00:00",
              "label": "2:00 pm (14:00)"
            },
            {
              "value": "14:30:00",
              "label": "2:30 pm (14:30)"
            },
            {
              "value": "15:00:00",
              "label": "3:00 pm (15:00)"
            },
            {
              "value": "15:30:00",
              "label": "3:30 pm (15:30)"
            },
            {
              "value": "16:00:00",
              "label": "4:00 pm (16:00)"
            },
            {
              "value": "16:30:00",
              "label": "4:30 pm (16:30)"
            },
            {
              "value": "17:00:00",
              "label": "5:00 pm (17:00)"
            },
            {
              "value": "17:30:00",
              "label": "5:30 pm (17:30)"
            },
            {
              "value": "18:00:00",
              "label": "6:00 pm (18:00)"
            },
            {
              "value": "18:30:00",
              "label": "6:30 pm (18:30)"
            },
            {
              "value": "19:00:00",
              "label": "7:00 pm (19:00)"
            },
            {
              "value": "19:30:00",
              "label": "7:30 pm (19:30)"
            },
            {
              "value": "20:00:00",
              "label": "8:00 pm (20:00)"
            },
            {
              "value": "20:30:00",
              "label": "8:30 pm (20:30)"
            },
            {
              "value": "21:00:00",
              "label": "9:00 pm (21:00)"
            },
            {
              "value": "21:30:00",
              "label": "9:30 pm (21:30)"
            },
            {
              "value": "22:00:00",
              "label": "10:00 pm (22:00)"
            },
            {
              "value": "22:30:00",
              "label": "10:30 pm (22:30)"
            },
            {
              "value": "23:00:00",
              "label": "11:00 pm (23:00)"
            },
            {
              "value": "23:30:00",
              "label": "11:30 pm (23:30)"
            }
          ]
        },
        {
          "type": "header",
          "content": "End"
        },
        {
          "type": "select",
          "id": "end_month",
          "label": "Month",
          "default": "December",
          "options": [
            {
              "value": "January",
              "label": "January"
            },
            {
              "value": "February",
              "label": "February"
            },
            {
              "value": "March",
              "label": "March"
            },
            {
              "value": "April",
              "label": "April"
            },
            {
              "value": "May",
              "label": "May"
            },
            {
              "value": "June",
              "label": "June"
            },
            {
              "value": "July",
              "label": "July"
            },
            {
              "value": "August",
              "label": "August"
            },
            {
              "value": "September",
              "label": "September"
            },
            {
              "value": "October",
              "label": "October"
            },
            {
              "value": "November",
              "label": "November"
            },
            {
              "value": "December",
              "label": "December"
            }
          ]
        },
        {
          "type": "range",
          "id": "end_day",
          "label": "Day",
          "min": 1,
          "max": 31,
          "step": 1,
          "default": 1
        },
        {
          "type": "text",
          "id": "end_year",
          "label": "Year",
          "default": "2024"
        },
        {
          "type": "select",
          "id": "end_time",
          "label": "End time",
          "default": "23:30:00",
          "options": [
            {
              "value": "00:00:00",
              "label": "12:00 am (0:00)"
            },
            {
              "value": "00:30:00",
              "label": "12:30 am (0:30)"
            },
            {
              "value": "01:00:00",
              "label": "1:00 am (1:00)"
            },
            {
              "value": "01:30:00",
              "label": "1:30 am (1:30)"
            },
            {
              "value": "02:00:00",
              "label": "2:00 am (2:00)"
            },
            {
              "value": "02:30:00",
              "label": "2:30 am (2:30)"
            },
            {
              "value": "03:00:00",
              "label": "3:00 am (3:00)"
            },
            {
              "value": "03:30:00",
              "label": "3:30 am (3:30)"
            },
            {
              "value": "04:00:00",
              "label": "4:00 am (4:00)"
            },
            {
              "value": "04:30:00",
              "label": "4:30 am (4:30)"
            },
            {
              "value": "05:00:00",
              "label": "5:00 am (5:00)"
            },
            {
              "value": "05:30:00",
              "label": "5:30 am (5:30)"
            },
            {
              "value": "06:00:00",
              "label": "6:00 am (6:00)"
            },
            {
              "value": "06:30:00",
              "label": "6:30 am (6:30)"
            },
            {
              "value": "07:00:00",
              "label": "7:00 am (7:00)"
            },
            {
              "value": "07:30:00",
              "label": "7:30 am (7:30)"
            },
            {
              "value": "08:00:00",
              "label": "8:00 am (8:00)"
            },
            {
              "value": "08:30:00",
              "label": "8:30 am (8:30)"
            },
            {
              "value": "09:00:00",
              "label": "9:00 am (9:00)"
            },
            {
              "value": "09:30:00",
              "label": "9:30 am (9:30)"
            },
            {
              "value": "10:00:00",
              "label": "10:00 am (10:00)"
            },
            {
              "value": "10:30:00",
              "label": "10:30 am (10:30)"
            },
            {
              "value": "11:00:00",
              "label": "11:00 am (11:00)"
            },
            {
              "value": "11:30:00",
              "label": "11:30 am (11:30)"
            },
            {
              "value": "12:00:00",
              "label": "12:00 pm (12:00)"
            },
            {
              "value": "12:30:00",
              "label": "12:30 pm (12:30)"
            },
            {
              "value": "13:00:00",
              "label": "1:00 pm (13:00)"
            },
            {
              "value": "13:30:00",
              "label": "1:30 pm (13:30)"
            },
            {
              "value": "14:00:00",
              "label": "2:00 pm (14:00)"
            },
            {
              "value": "14:30:00",
              "label": "2:30 pm (14:30)"
            },
            {
              "value": "15:00:00",
              "label": "3:00 pm (15:00)"
            },
            {
              "value": "15:30:00",
              "label": "3:30 pm (15:30)"
            },
            {
              "value": "16:00:00",
              "label": "4:00 pm (16:00)"
            },
            {
              "value": "16:30:00",
              "label": "4:30 pm (16:30)"
            },
            {
              "value": "17:00:00",
              "label": "5:00 pm (17:00)"
            },
            {
              "value": "17:30:00",
              "label": "5:30 pm (17:30)"
            },
            {
              "value": "18:00:00",
              "label": "6:00 pm (18:00)"
            },
            {
              "value": "18:30:00",
              "label": "6:30 pm (18:30)"
            },
            {
              "value": "19:00:00",
              "label": "7:00 pm (19:00)"
            },
            {
              "value": "19:30:00",
              "label": "7:30 pm (19:30)"
            },
            {
              "value": "20:00:00",
              "label": "8:00 pm (20:00)"
            },
            {
              "value": "20:30:00",
              "label": "8:30 pm (20:30)"
            },
            {
              "value": "21:00:00",
              "label": "9:00 pm (21:00)"
            },
            {
              "value": "21:30:00",
              "label": "9:30 pm (21:30)"
            },
            {
              "value": "22:00:00",
              "label": "10:00 pm (22:00)"
            },
            {
              "value": "22:30:00",
              "label": "10:30 pm (22:30)"
            },
            {
              "value": "23:00:00",
              "label": "11:00 pm (23:00)"
            },
            {
              "value": "23:30:00",
              "label": "11:30 pm (23:30)"
            }
          ]
        }
      ]
    },
    {
      "type": "liquid",
      "name": "Liquid/HTML",
      "settings": [
        {
          "type": "paragraph",
          "content": "Copy and paste your custom code."
        },
        {
          "type": "liquid",
          "id": "liquid",
          "label": "Liquid and/or HTML"
        }
      ]
    },
    {
      "type": "@app"
    }
  ],
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "Video",
      "info": "Upload your video file here. Does not support YouTube videos or Vimeo videos."
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "Loop video",
      "default": true
    },
    {
      "type": "select",
      "id": "image_crop",
      "label": "Banner height",
      "default": "1200:600",
      "options": [
        {
          "label": "Defined aspect ratio (see below)",
          "value": "none"
        },
        {
          "label": "Extra small",
          "value": "1200:200"
        },
        {
          "label": "Small",
          "value": "1200:400"
        },
        {
          "label": "Medium",
          "value": "1200:600"
        },
        {
          "label": "Large",
          "value": "1200:800"
        },
        {
          "label": "Extra large",
          "value": "1200:1000"
        }
      ]
    },
    {
      "type": "text",
      "id": "aspect_ratio",
      "label": "Aspect ratio",
      "default": "16:9",
      "info": "eg. 16:9, 4:3. Will only be applied if 'Defined aspect ratio' is selected as banner height."
    },
    {
      "type": "header",
      "content": "Text appearance"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 80,
      "max": 150,
      "step": 5,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text position",
      "default": "left center",
      "options": [
        {
          "value": "left top",
          "label": "Top left"
        },
        {
          "value": "center top",
          "label": "Top center"
        },
        {
          "value": "right top",
          "label": "Top right"
        },
        {
          "value": "left center",
          "label": "Left"
        },
        {
          "value": "center center",
          "label": "Center"
        },
        {
          "value": "right center",
          "label": "Right"
        },
        {
          "value": "left bottom",
          "label": "Bottom left"
        },
        {
          "value": "center bottom",
          "label": "Bottom center"
        },
        {
          "value": "right bottom",
          "label": "Bottom right"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_width",
      "label": "Text box width",
      "min": 400,
      "max": 1000,
      "step": 10,
      "default": 600,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#121212"
    },
    {
      "type": "color_background",
      "id": "text_background_color",
      "label": "Text background"
    },
    {
      "type": "color_background",
      "id": "image_overlay_color",
      "label": "Image overlay",
      "default": "radial-gradient(rgba(251, 51, 166, 0), rgba(48, 145, 211, 0.4) 36%, rgba(0, 0, 0, 0.8) 100%)"
    },
    {
      "type": "select",
      "id": "animation",
      "label": "Animation",
      "default": "none",
      "options": [
        {
          "value": "fade-in",
          "label": "Fade-in"
        },
        {
          "value": "fade-in-left",
          "label": "Fade-in left"
        },
        {
          "value": "fade-in-right",
          "label": "Fade-in right"
        },
        {
          "value": "fade-in-up",
          "label": "Fade-in up"
        },
        {
          "value": "fade-in-down",
          "label": "Fade-in down"
        },
        {
          "value": "none",
          "label": "None"
        }
      ]
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "Maximum width",
      "placeholder": "eg. 1200px",
      "info": "Sets width constraint. Prevents inner content from moving too far to the edge on large screens."
    },
    {
      "type": "range",
      "id": "outer_margin_top",
      "label": "Outer margin - top",
      "min": 0,
      "max": 100,
      "default": 40,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "outer_margin_bottom",
      "label": "Outer margin - bottom",
      "min": 0,
      "max": 100,
      "default": 40,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Advanced"
    },
    {
      "type": "liquid",
      "id": "custom_css",
      "label": "CSS"
    },
    {
      "type": "liquid",
      "id": "mobile_custom_css",
      "label": "Mobile CSS",
      "info": "Applied on screens less than 480px."
    },
    {
      "type": "checkbox",
      "id": "override_theme_font",
      "label": "Override default theme font",
      "default": false
    },
    {
      "type": "font_picker",
      "id": "heading_font",
      "label": "Heading",
      "default": "serif"
    },
    {
      "type": "font_picker",
      "id": "main_font",
      "label": "Text",
      "default": "sans-serif"
    }
  ],
  "presets": [
    {
      "name": "Autoplay video",
      "settings": {
        "text_alignment": "center",
        "text_position": "center center"
      },
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        }
      ]
    }
  ],
  "locales": {
    "en": {
      "success": "Thanks for contacting us. We'll get back to you as soon as possible.",
      "days": "Days",
      "hours": "Hours",
      "minutes": "Minutes",
      "seconds": "Seconds"
    }
  }
}
{% endschema %}

{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wbs-pck="{{ section.id }}">
  {
    "id": {{ section.id | json }},
    "animation": {{ section.settings.animation | json }}
  }
</script>
{%- comment -%} JavaScript {%- endcomment -%}
<script
  data-wbs-pck-js="{{ section.id }}"
  type="module"
  defer
>
(function(){

  const wbsPack = {
    settings: {},
    animateSection: function(entries, observer){
      // Target the first entry available.
      let observedSection = entries[0];
      if (observedSection.isIntersecting) {
        observedSection.target.classList.add('wbs-pck__animation-applied');
      }
    },
    initializeClock(selector, endtime, section) {
      function updateClock() {
        const t = wbsPack.getTimeRemaining(endtime);
        const daysSpan = clock.querySelector('.wbs-pck__days .wbs-pck__number');
        const hoursSpan = clock.querySelector('.wbs-pck__hours .wbs-pck__number');
        const minutesSpan = clock.querySelector('.wbs-pck__minutes .wbs-pck__number');
        const secondsSpan = clock.querySelector('.wbs-pck__seconds .wbs-pck__number');

        if (daysSpan.innerHTML != t.days){
          daysSpan.innerHTML = t.days;
        }
        if (hoursSpan.innerHTML != t.hours){
          hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        }
        if (minutesSpan.innerHTML != t.minutes){
          minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        }
        if (secondsSpan.innerHTML != t.seconds){
          secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
        }

        if (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }

      const clock = section.querySelector(selector);
      updateClock();
      const timeinterval = setInterval(updateClock, 1000);
    },
    getTimeRemaining(endtime){
      const total = Date.parse(endtime) - Date.parse(new Date());
      const seconds = Math.floor( (total/1000) % 60 );
      const minutes = Math.floor( (total/1000/60) % 60 );
      const hours = Math.floor( (total/(1000*60*60)) % 24 );
      const days = Math.floor( total/(1000*60*60*24) );

      return {
        total,
        days,
        hours,
        minutes,
        seconds
      };
    },
    enableCountdownTimer: function(section){
      const clock = '.wbs-pck__clock';
      const startDate = section.querySelector('[data-timer-start]').dataset.timerStart;
      const endDate = section.querySelector('[data-timer-end]').dataset.timerEnd;

      const startMs = Date.parse(startDate);
      const endMs = Date.parse(endDate);
      const currentMs = Date.parse(new Date());

      if (endMs > currentMs && currentMs >= startMs ) {
        wbsPack.initializeClock(clock, endDate, section);
      } else {
        section.querySelector(`.wbs-pck__clock-wrap`).style.display = 'none';
      }
    },
    swapVideoSource: function(mq, mobileSrc, section){
      const videoElement = section.querySelector('video');
      const defaultSrc = videoElement.querySelector('[data-wbs-pck-default-src][src*=".mp4"]');
      if (mq.matches){
        videoElement.src = mobileSrc.src;
      } else {
        videoElement.src = defaultSrc.src;
      }
    },
    load: function(section){

      const videoElement = section.querySelector('video');

      document.addEventListener('touchstart', function () {
        if (!videoElement.playing) {
          videoElement.play();
        }
      });

      const mobileSrc = section.querySelector('[data-wbs-pck-mobile-src]');
      if (typeof mobileSrc !== 'undefined' && mobileSrc !== null){
        const mq = window.matchMedia('(max-width: 480px)');
        if (mq.matches) {
          wbsPack.swapVideoSource(mq, mobileSrc, section);
        }
        mq.addEventListener('change', function () {
          wbsPack.swapVideoSource(mq, mobileSrc, section);
        });
      }

      if (this.settings.animation !== 'none'){
        const options = {
          root: null,
          rootMargin: '0px',
          threshold: [0, 0.25, 0.5, 0.75, 1]
        };
        // Construct Intersection Observer.
        const observer = new IntersectionObserver( this.animateSection, options );
        // Observe if element is present.
        if (section) {
          observer.observe(section);
        }
      }

      const countdownTimer = section.querySelector('.wbs-pck__clock');
      if (typeof countdownTimer !== 'undefined' && countdownTimer !== null){
        wbsPack.enableCountdownTimer(section);
      }
    },
    unload: function(section){
      section.classList.remove('wbs-pck__animation-applied')
    }
  }

  window.addEventListener('shopify:section:unload', function (e) {
    const settings = document.querySelector(`[data-wbs-pck="${e.detail.sectionId}"]`);
    const sectionId = e.detail.sectionId;
    const section = document.querySelector(`#DP--${e.detail.sectionId}`);
    if (sectionId == wbsPack.settings.id){
      wbsPack.unload(section);
    }
  });

  wbsPack.settings = JSON.parse(document.querySelector('[data-wbs-pck="{{ section.id }}"]').innerHTML);
  const sectionId = {{ section.id | json }};
  const section = document.querySelector(`#DP--${sectionId}`);

  if (sectionId == wbsPack.settings.id){
    wbsPack.load(section);
  }
})()
</script>
5/5 - (8 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *