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>
