Adding an icon with a text slider to your Shopify store is a simple yet effective way to make your site more engaging. Here’s a quick guide to get you started.
Step 1: Create a New Section
First, create a new section in your Shopify theme. Name it icons-slider.liquid. This will allow you to add a custom slider without needing any additional paid apps.
{% comment %} Morosoft Technologies - Icon Slider Code {% endcomment %}
{% comment %} This code adds a simple icon and text slider to your Shopify store{% endcomment %}
{%- 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 }} .mspk-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 }} .mspk-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 }} .mspk-pack__small-heading + .mspk-pack__text {
margin-top: 10px;
}
#WP--{{ section.id }} .mspk-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 }} .mspk-pack__icons {
display: block;
max-width: calc(100% - 100px);
margin-left: auto;
margin-right: auto;
}
#WP--{{ section.id }} .mspk-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 }} .mspk-pack__stretch-height .mspk-pack__flex-item {
height: 100%;
}
#WP--{{ section.id }} .mspk-pack__flex-item > a {
text-decoration: none;
}
#WP--{{ section.id }} .mspk-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 }} .mspk-pack__image__wrapper svg {
width: 100%;
fill: {{ section.settings.text_color }};
}
#WP--{{ section.id }} .mspk-pack__item img {
width: 100%;
object-fit: contain;
}
#WP--{{ section.id }} .mspk-pack__inner-content {
height: 100%;
display: flex;
gap: 10px;
padding: {{ section.settings.gap | divided_by: 2.0 }};
position: relative;
overflow: hidden;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-left {
align-items: center;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-left .mspk-pack__inner-content {
gap: 20px;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-left .mspk-pack__text-wrapper {
text-align: left;
flex: 1 1 auto;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-left .mspk-pack__text-wrapper a{
text-decoration: none;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-center .mspk-pack__text-wrapper {
text-align: center;
flex: 1 1 100%;
padding: 10px;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-center .mspk-pack__text-wrapper a {
text-decoration: none;
}
#WP--{{ section.id }} .mspk-pack__icon-alignment-center .mspk-pack__image__wrapper {
width: {{ section.settings.icon_size }}%;
flex: none;
position: relative;
}
#WP--{{ section.id }} .mspk-pack__icons:not(.flickity-enabled) {
display: flex;
gap: 10px;
}
#WP--{{ section.id }} .mspk-pack__icons:not(.flickity-enabled) .mspk-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 }}.mspk-pack__animation-applied [style*="--mspk-pack-animate"] {
/* animation-duration: 0.5s; */
/* --mspk-pack-animation-multiplier: 1s; */
animation-name: mspk-pack__animation--{{ section.settings.animation }};
}
{%- else -%}
#WP--{{ section.id }} [style*="--mspk-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 }} .mspk-pack__icons {
max-width: calc(100% - 40px);
}
#WP--{{ section.id }} .mspk-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 }} .mspk-pack__mobile-icon-alignment-left {
align-items: center;
}
#WP--{{ section.id }} .mspk-pack__mobile-icon-alignment-left .mspk-pack__text-wrapper {
text-align: left;
}
#WP--{{ section.id }} .mspk-pack__mobile-icon-alignment-center {
flex-direction: column;
}
#WP--{{ section.id }} .mspk-pack__mobile-icon-alignment-center .mspk-pack__text-wrapper {
text-align: center;
}
#WP--{{ section.id }} .mspk-pack__mobile-icon-alignment-center .mspk-pack__image__wrapper {
width: {{ section.settings.mobile_icon_size }}%;
}
#WP--{{ section.id }} .mspk-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 }} .mspk-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 }} .mspk-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 -%}
}
.mspk-pack__image__wrapper svg{
display: block;
}
.mspk-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 }} .mspk-pack__icon-alignment-center {
flex-direction: column;
justify-content: center;
}
}
</style>
{%- comment -%} HTML {%- endcomment -%}
<section id="WP--{{ section.id }}" class="WP--{{ section.id }} mspk-pack__value-prop-horizontal mspk-pack__section" {%- if section.settings.animation != 'none' -%}data-animated-section{%- endif -%}>
<div class="mspk-pack__sizer
mspk-pack__sizer--value-prop-horizontal">
<div id="slider-{{ section.id }}" class="mspk-pack__icons mspk-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="mspk-pack__flex-item mspk-pack__item mspk-pack__block-{{ block.id }}" {{ block.shopify_attributes }} style="--mspk-pack-animate: {{ forloop.index }};">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
<div class="mspk-pack__inner-content mspk-pack__icon-alignment-{{ section.settings.icon_alignment }} mspk-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="mspk-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="mspk-pack__image__wrapper mspk-pack__flex mspk-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="mspk-pack__text-wrapper">
{%- if block.settings.title != blank -%}
<h3 class="mspk-pack__small-heading">
{{ block.settings.title }}
</h3>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="mspk-pack__text mspk-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-mspk-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-mspk-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-mspk-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('mspk-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('mspk-pack__stretch-height');
}, 500);
}
}
});
},
unload: function(section){
section.classList.remove('mspk-pack__animation-applied')
}
}
window.addEventListener('shopify:section:unload', function (e) {
const settings = document.querySelector(`[data-mspk-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-mspk-pack="{{ section.id }}"]').innerHTML);
const sectionId = {{ section.id | json }};
const section = document.querySelector(`#WP--${sectionId}`);
if (sectionId == wbsPack.settings.id){
wbsPack.load(section);
}
})()
</script>Step 2: Customize the Slider
After adding the code, customize the slider by uploading your icons and text through the Shopify theme editor. The slider will automatically adjust based on the content you add.
Step 3: Embed the Slider
Finally, insert the slider section into your desired page or section of your Shopify store. This could be your homepage or any other relevant page where you want to display the icons.
And that’s it! You’ve successfully added an icon with a text slider to your Shopify store using the code provided by Morosoft Technologies. This feature enhances the visual appeal and user interaction on your site.
