How To Add Icons Slider in Shopify [Slick Icon Slider]

Step1: Create a new section name icons-slider.liquid and paste the following code

Icon Slider Shopify For All Themes: Easily add icon slider on your Shopify theme without any additional paid APP

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

{%- 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 -%}

{%- 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>
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0;box-shadow: none;}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}

{%- if section.settings.override_theme_font != blank -%}
  {%- for font in font_array -%}
    {%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
  {%- endfor -%}
  #WP--{{ 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 -%}

#WP--{{ section.id }} {
  background: {{ section.settings.background_color }};
  margin-top: {{ section.settings.outer_margin }}px;
  margin-bottom: {{ section.settings.outer_margin }}px;
  overflow-x: hidden;
  {%- if section.settings.per_row >= section.blocks.size -%}
    --draggable: false;
    --show-arrows: false;
  {%- else -%}
    --draggable: true;
    --show-arrows: {{ section.settings.show_arrows }};
  {%- endif -%}
}

#WP--{{ section.id }} .wbs-pack__sizer {
  padding-top: {{ section.settings.inner_padding }}px;
  padding-bottom: {{ section.settings.inner_padding }}px;
  width: {{ section.settings.base_width }}%;
  max-width: {{ max_width }};
  margin: 0 auto;
}

#WP--{{ section.id }} .wbs-pack__small-heading {
  color: {{ section.settings.heading_color }};
  line-height: calc(3px + 2ex + 3px);
  font-size: calc(var(--WP-g-small-heading-size, var(--WP-small-heading-size, 24px)) * {{ section.settings.text_size | times: 0.01 }});
  {%- 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 -%}
}

#WP--{{ section.id }} .wbs-pack__small-heading + .wbs-pack__text {
  margin-top: 10px;
}

#WP--{{ section.id }} .wbs-pack__text p {
  line-height: calc(3px + 2ex + 3px);
  color: {{ section.settings.text_color }};
  font-size: calc(var(--WP-g-body-size, var(--WP-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 -%}
}

#WP--{{ section.id }} .wbs-pack__icons {
  display: block;
  max-width: calc(100% - 100px);
  margin-left: auto;
  margin-right: auto;
}

#WP--{{ section.id }} .wbs-pack__flex-item {
  height: auto;
  margin-right: calc( ({{ section.settings.per_row }} * {{ section.settings.gap }}px) / ({{ section.settings.per_row }} - 1));
  width: calc(100% / {{ section.settings.per_row }} - {{ section.settings.gap }}px);
  display: inline-block;
}

#WP--{{ section.id }} .wbs-pack__stretch-height .wbs-pack__flex-item {
  height: 100%;
}

#WP--{{ section.id }} .wbs-pack__flex-item > a {
  text-decoration: none;
}

#WP--{{ section.id }} .wbs-pack__image__wrapper {
  display: block;
  align-self: center;
  margin: auto;
  flex: 1 0 {{ section.settings.icon_size }}%;
  max-width: {{ section.settings.icon_size }}%;
  position: relative;
}

#WP--{{ section.id }} .wbs-pack__image__wrapper svg {
  width: 100%;
  fill: {{ section.settings.text_color }};
}

#WP--{{ section.id }} .wbs-pack__item img {
  width: 100%;
  object-fit: contain;
}

#WP--{{ section.id }} .wbs-pack__inner-content {
  height: 100%;
  display: flex;
  gap: 10px;
  padding: {{ section.settings.gap | divided_by: 2.0 }};
  position: relative;
  overflow: hidden;
}

#WP--{{ section.id }} .wbs-pack__icon-alignment-left {
  align-items: center;
}

#WP--{{ section.id }} .wbs-pack__icon-alignment-left .wbs-pack__inner-content {
  gap: 20px;
}

#WP--{{ section.id }} .wbs-pack__icon-alignment-left .wbs-pack__text-wrapper {
  text-align: left;
  flex: 1 1 auto;
}

  #WP--{{ section.id }} .wbs-pack__icon-alignment-left .wbs-pack__text-wrapper a{
  text-decoration: none;
}


  
#WP--{{ section.id }} .wbs-pack__icon-alignment-center .wbs-pack__text-wrapper {
  text-align: center;
  flex: 1 1 100%;
  padding: 10px;
}

#WP--{{ section.id }} .wbs-pack__icon-alignment-center .wbs-pack__text-wrapper a {
  text-decoration: none;
}
  
#WP--{{ section.id }} .wbs-pack__icon-alignment-center .wbs-pack__image__wrapper {
  width: {{ section.settings.icon_size }}%;
  flex: none;
  position: relative;
}

#WP--{{ section.id }} .wbs-pack__icons:not(.flickity-enabled) {
  display: flex;
  gap: 10px;
}

#WP--{{ section.id }} .wbs-pack__icons:not(.flickity-enabled) .wbs-pack__flex-item:nth-child(n+{{ section.settings.per_row | plus: 1 }}){
  display: none;
}

#WP--{{ section.id }} .flickity-button {
  background: transparent;
  color: {{ section.settings.text_color }};
  transition: all 0.3s ease-in-out;
  {%- if enable_slider == false -%}
    visibility: hidden;
  {%- endif -%}
}

#WP--{{ section.id }} button svg.flickity-button-icon path {
  fill: currentColor;
}

#WP--{{ section.id }} .flickity-prev-next-button.next {
  right: -40px;
}

#WP--{{ section.id }} .flickity-prev-next-button.previous {
  left: -40px;
}

/* Animation */
{%- if section.settings.animation != 'none' -%}
  #WP--{{ section.id }}.wbs-pack__animation-applied [style*="--wbs-pack-animate"] {
    /* animation-duration: 0.5s; */
    /* --wbs-pack-animation-multiplier: 1s; */
    animation-name: wbs-pack__animation--{{ section.settings.animation }};
  }
{%- else -%}
  #WP--{{ section.id }} [style*="--wbs-pack-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 '{' -%}
      #WP--{{ section.id }} {{ declaration }} }
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  #WP--{{ section.id }} {
    {%- assign mobile_per_row = section.settings.mobile_per_row | plus: 0 -%}
    {%- if mobile_per_row >= section.blocks.size -%}
      --draggable: false;
      --show-arrows: false;
    {%- else -%}
      --draggable: true;
      --show-arrows: {{ section.settings.show_arrows }};
    {%- endif -%}
  }

  #WP--{{ section.id }} .wbs-pack__icons {
    max-width: calc(100% - 40px);
  }

  #WP--{{ section.id }} .wbs-pack__item {
    width: calc(100% / {{ section.settings.mobile_per_row }});
    {% if section.settings.mobile_per_row == "2" %}
      margin-left: 0;
      margin-right: 0;
    {% endif %}
  }

  #WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-left {
    align-items: center;
  }

  #WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-left .wbs-pack__text-wrapper {
    text-align: left;
  }

  #WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-center {
    flex-direction: column;
  }

  #WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-center .wbs-pack__text-wrapper {
    text-align: center;
  }

  #WP--{{ section.id }} .wbs-pack__mobile-icon-alignment-center .wbs-pack__image__wrapper {
    width: {{ section.settings.mobile_icon_size }}%;
  }

  #WP--{{ section.id }} .wbs-pack__image__wrapper {
    display: block;
    align-self: center;
    margin: auto;
    flex: 1 0 {{ section.settings.mobile_icon_size }}%;
    max-width: {{ section.settings.mobile_icon_size }}%;
  }

  #WP--{{ section.id }} .wbs-pack__inner-content {
    padding: 1em 0;
    {% if section.settings.mobile_per_row == "2" %}
      padding: 1em 1.4em;
    {% endif %}
  }

  #WP--{{ section.id }} .flickity-button {
    visibility: visible;
  }

  #WP--{{ section.id }} .flickity-prev-next-button.next {
    right: -20px;
  }

  #WP--{{ section.id }} .flickity-prev-next-button.previous {
    left: -20px;
  }

}

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

  #WP--{{ section.id }} .wbs-pack__sizer {
    min-width: 100%;
    padding-top: {{ section.settings.inner_padding | divided_by: 2 }}px;
    padding-bottom: {{ section.settings.inner_padding | divided_by: 2 }}px;
  }

  {%- 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 '{' -%}
        #WP--{{ section.id }} {{ declaration }} }
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
}


.wbs-pack__image__wrapper svg{
  display: block;
}
  
.wbs-pack__image__wrapper img{
  object-fit: cover;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}


@media only screen and (min-width: 768px)
  {
    #WP--{{ section.id }} .wbs-pack__icon-alignment-center {
  flex-direction: column;
  justify-content: center;
}
  }
  
</style>

{%- comment -%} HTML {%- endcomment -%}
<section id="WP--{{ section.id }}" class="WP--{{ section.id }} wbs-pack__value-prop-horizontal wbs-pack__section" {%- if section.settings.animation != 'none' -%}data-animated-section{%- endif -%}>
  <div class="wbs-pack__sizer
              wbs-pack__sizer--value-prop-horizontal">
    <div id="slider-{{ section.id }}" class="wbs-pack__icons wbs-pack__flex--{{ section.settings.per_row }}-per-row">
      {%- for block in section.blocks -%}
        {%- capture placeholder_image -%}
              <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>icons</title><g data-name="24. circle in circle"><path d="M88.47,50C88.19,66.07,78.32,80.78,63,86.23a38.48,38.48,0,0,1-46-56A38.85,38.85,0,0,1,57.82,12.32C75.7,16,88.16,32,88.47,50c0,1.93,3,1.93,3,0A42,42,0,0,0,64.41,11.11a41.48,41.48,0,0,0-50,60.19A41.89,41.89,0,0,0,57.29,90.83c19.79-3.48,33.84-21,34.19-40.83C91.5,48.07,88.5,48.07,88.47,50Z"/><path d="M77.63,50C77.28,65.05,65.32,77.63,50,77.63A27.89,27.89,0,0,1,22.37,50,27.88,27.88,0,0,1,50,22.37c15.33,0,27.28,12.55,27.63,27.63,0,1.93,3,1.93,3,0A31.09,31.09,0,0,0,60.83,21.35a30.88,30.88,0,0,0-34.62,9.37C8.63,52.48,28.32,85.28,55.78,80.08,70.27,77.33,80.29,64.5,80.63,50,80.67,48.07,77.67,48.07,77.63,50Z"/></g></svg>
        {%- endcapture -%}
        <div class="wbs-pack__flex-item wbs-pack__item wbs-pack__block-{{ block.id }}" {{ block.shopify_attributes }} style="--wbs-pack-animate: {{ forloop.index }};">
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}">
          {%- endif -%}
          <div class="wbs-pack__inner-content wbs-pack__icon-alignment-{{ section.settings.icon_alignment }} wbs-pack__mobile-icon-alignment-{{ section.settings.mobile_icon_alignment }}">
            {%- comment -%} Icon {%- endcomment -%}
            {%- if block.settings.show_icon != blank -%}
              {%- if block.settings.image != blank -%}
                <div class="wbs-pack__image__wrapper">
                  {%- if block.settings.link != blank -%}
                    <a href="{{ block.settings.link }}">
                  {%- endif -%}
                  <svg viewBox="0 0 {{ block.settings.image.width }} {{ block.settings.image.height }}"></svg>
                  {%- capture sizes -%}
                    (max-width: 480px) {{ section.settings.base_width | divided_by: section.settings.mobile_per_row | divided_by: 2 | append: 'vw' | default: '33vw' }}, {{ section.settings.base_width | divided_by: section.settings.per_row | divided_by: 2 | append: 'vw' | default: '33vw' }}
                  {%- endcapture -%}
                  {{ block.settings.image | image_url: width: 1000 | image_tag:  widths: widths, sizes: sizes }}
                  {%- if block.settings.link != blank -%}
                    </a>
                  {%- endif -%}
                </div>
              {%- else -%}
                <div class="wbs-pack__image__wrapper wbs-pack__flex wbs-pack__justify-center">
                  {%- if block.settings.link != blank -%}
                    <a href="{{ block.settings.link }}">
                  {%- endif -%}
                    {{ placeholder_image | strip }}
                  {%- if block.settings.link != blank -%}
                    </a>
                  {%- endif -%}
                </div>
              {%- endif -%}
            {%- endif -%}
            {%- comment -%} End Icon {%- endcomment -%}
            <div class="wbs-pack__text-wrapper">
              {%- if block.settings.title != blank -%}
                <h3 class="wbs-pack__small-heading">
                  {{ block.settings.title }}
                </h3>
              {%- endif -%}
              {%- if block.settings.text != blank -%}
                <div class="wbs-pack__text wbs-pack__rte">
                  {{ block.settings.text }}
                </div>
              {%- endif -%}
            </div>
          </div>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>
{%- endcapture -%}
{{ minify | strip_newlines }}

{% schema %}
{
  "name": "Icons Slider",
  "class": "WP__value-prop-slider",
  "settings": [
    {
      "type": "select",
      "id": "icon_alignment",
      "label": "Icon alignment",
      "default": "center",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ]
    },
    {
      "type": "range",
      "id": "icon_size",
      "label": "Icon size",
      "default": 30,
      "min": 10,
      "max": 100,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "per_row",
      "label": "Icons per slide",
      "default": 3,
      "min": 2,
      "max": 8
    },
    {
      "type": "range",
      "id": "gap",
      "min": 0,
      "max": 40,
      "label": "Spacing gap",
      "unit": "px",
      "default": 20
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show arrows",
      "default": true
    },
    {
      "type": "header",
      "content": "Text appearance"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 60,
      "max": 150,
      "step": 5,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Design"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Headings",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#666666"
    },
    {
      "type": "color_background",
      "id": "background_color",
      "label": "Background",
      "default": "linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 100%)"
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "select",
      "id": "mobile_icon_alignment",
      "label": "Icon alignment",
      "default": "center",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ]
    },
    {
      "type": "range",
      "id": "mobile_icon_size",
      "label": "Mobile icon size",
      "default": 30,
      "min": 10,
      "max": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "mobile_per_row",
      "label": "Mobile icons per slide",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ]
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "base_width",
      "label": "Size",
      "min": 80,
      "max": 100,
      "step": 5,
      "default": 95,
      "unit": "%"
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "Maximum width",
      "placeholder": "eg. 1200px",
      "info": "Sets width constraint for content."
    },
    {
      "type": "range",
      "id": "inner_padding",
      "label": "Inner padding",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 40,
      "step": 5,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "outer_margin",
      "label": "Outer margin",
      "info": "Only applies to top and bottom.",
      "min": 0,
      "max": 100,
      "default": 0,
      "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"
    }
  ],
  "blocks": [
    {
      "type": "icon",
      "name": "Icon",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Icon"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Icon link"
        },
        {
          "type": "checkbox",
          "id": "show_icon",
          "label": "Show icon",
          "default": true
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Unique value"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icons Slider",
      "blocks": [
        {
          "type": "icon",
          "settings": {
            "title": "Easy.",
            "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
          }
        },
        {
          "type": "icon",
          "settings": {
            "title": "Breezy.",
            "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
          }
        },
        {
          "type": "icon",
          "settings": {
            "title": "Beautiful.",
            "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
          }
        },
        {
          "type": "icon",
          "settings": {
            "title": "Effortless.",
            "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
          }
        },
        {
          "type": "icon",
          "settings": {
            "title": "Simple.",
            "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
          }
        },
        {
          "type": "icon",
          "settings": {
            "title": "Refined.",
            "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh enim, ornare at consequat sed, placerat quis libero.</p><p><a>Learn more</a></p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}
{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wbs-pack="{{ section.id }}">
  { 
    "id": {{ section.id | json }},
    "animation": {{ section.settings.animation | json }},
    "show_arrows": {{ section.settings.show_arrows | json }},
    "show_dots": {{ section.settings.show_dots | json }},
    "autoplay": {{ section.settings.autoplay | times: 1000 | json }}
  }
</script>
{%- comment -%} External scripts {%- endcomment -%}
<script data-wbs-pack-external-js="{{ section.id }}" src="https://cdn.shopify.com/s/files/1/0577/7673/4361/files/flickity-2.3.0.pkgd.min.js?v=1671485005" defer></script>
{%- comment -%} JavaScript {%- endcomment -%}
<script data-wbs-pack-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-pack__animation-applied');
      }
    },
    load: function(section){
      if (this.settings.animation !== 'none'){
        const options = {
          root: null,
          rootMargin: '0px',
          threshold: 0
        };
        // Construct Intersection Observer.
        const observer = new IntersectionObserver( this.animateSection, options );
        // Observe if element is present.
        if (section) {
          observer.observe(section);
        }
      }

      const elem = section.querySelector(`#slider-${wbsPack.settings.id}`);
      wbsPack.flkty = new Flickity( elem, {
        cellAlign: 'left',
        autoPlay: this.settings.autoplay,
        draggable: JSON.parse(getComputedStyle(section).getPropertyValue('--draggable')),
        contain: true,
        wrapAround: true,
        adaptiveHeight: false,
        imagesLoaded: true,
        prevNextButtons: JSON.parse(getComputedStyle(section).getPropertyValue('--show-arrows')),
        pageDots: false,
        on: {
          ready: () => {
            setTimeout(() => {
              elem.classList.add('wbs-pack__stretch-height');
            }, 500);
          }
        }
      });
    },
    unload: function(section){
      section.classList.remove('wbs-pack__animation-applied')
    }
  }

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

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

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

About

Leave a Comment

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