How to make this slideable for mobile

Store Design
, ,

Topic summary

A user is seeking help to make a “Trust Icons” section slideable on mobile devices for their Shopify store. They provided an image showing the desired mobile layout and shared their custom Liquid code for the section.

Current Setup:

  • The code displays trust/feature icons (Free Shipping, Price-match guarantee, Hassle-free exchange, Google Reviews)
  • Includes configurable settings for layout, styling, borders, shadows, and responsive behavior
  • Uses blocks for each trust icon with title, text, image, and URL options

Solution Provided:
Another user responded with modified code that:

  • Integrates Swiper.js library (via CDN links) to enable touch-based sliding functionality
  • Wraps the feature items in Swiper container markup
  • Adds custom CSS to show the slider only on mobile devices (max-width: 749px)
  • Initializes Swiper with configuration for mobile sliding while maintaining the grid layout on desktop

The solution appears complete but hasn’t been confirmed as tested or implemented by the original poster.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

image.jpg
image.jpg449×223 4.63 KB

I want it like this only for mobile.Please help me making this. Thank you. Here is my custom code :

{%- liquid

  assign padding_horizontal = section.settings.padding_horizontal
  assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom
  assign border_color = section.settings.border_color
  assign border_thickness = section.settings.border_thickness
  assign margin_top = section.settings.margin_top
  assign margin_bottom = section.settings.margin_bottom
  assign background_color = section.settings.background_color
  assign background_gradient = section.settings.background_gradient
  assign full_width = section.settings.full_width
  assign content_width = section.settings.content_width
  assign lazy = section.settings.lazy

  assign feature_row = section.settings.feature_row
  assign feature_row_mobile = section.settings.feature_row_mobile
  assign feature_gap_mobile = section.settings.feature_gap_mobile
  assign feature_gap = section.settings.feature_gap
  assign feature_padding_vertical = section.settings.feature_padding_vertical
  assign feature_padding_horizontal = section.settings.feature_padding_horizontal
  assign feature_border_thickness = section.settings.feature_border_thickness
  assign feature_border_color = section.settings.feature_border_color
  assign feature_bg = section.settings.feature_bg
  assign feature_radius = section.settings.feature_radius
  assign feature_shadow_color = section.settings.feature_shadow_color
  assign feature_shadow = section.settings.feature_shadow
  
  assign feature_heading_size = section.settings.feature_heading_size
  assign feature_heading_size_mobile = section.settings.feature_heading_size_mobile
  assign feature_heading_color = section.settings.feature_heading_color
  assign feature_heading_custom = section.settings.feature_heading_custom
  assign feature_heading_font = section.settings.feature_heading_font
  assign feature_heading_height = section.settings.feature_heading_height

  assign feature_text_size = section.settings.feature_text_size
  assign feature_text_size_mobile = section.settings.feature_text_size_mobile
  assign feature_text_color = section.settings.feature_text_color
  assign feature_text_custom = section.settings.feature_text_custom
  assign feature_text_font = section.settings.feature_text_font
  assign feature_text_height = section.settings.feature_text_height
  assign feature_text_mt = section.settings.feature_text_mt

  assign feature_icon_size_mobile = section.settings.feature_icon_size_mobile
  assign feature_icon_size = section.settings.feature_icon_size
  assign feature_icon_color = section.settings.feature_icon_color
   
-%}
{% style %}

  {{ feature_text_font | font_face: font_display: 'swap' }}
  {{ feature_heading_font | font_face: font_display: 'swap' }}

  .section-{{ section.id }} {
    border-top: solid {{ border_color }} {{ border_thickness }}px;
    border-bottom: solid {{ border_color }} {{ border_thickness }}px;
    margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
    margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
  }
  
  .section-{{ section.id }}-settings {
    margin: 0 auto;
    padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
    padding-left: {{ padding_horizontal_mobile }}rem;
    padding-right: {{ padding_horizontal_mobile }}rem;
  }

  .feature-{{ section.id }} .box__title {
    margin: 0px;
    font-size: {{ feature_heading_size_mobile }}px;
    color: {{ feature_heading_color }};
    line-height: {{ feature_heading_height }}%;
    text-transform: unset;
    font-weight: bold;
    margin-top: {{section.settings.feature_heading_mt}}px;
  }
  
  .feature-{{ section.id }} .box__description {
    margin: 0px;
    margin-top: {{ feature_text_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ feature_text_size_mobile }}px;
    color: {{ feature_text_color }};
    line-height: {{ feature_text_height }}%;
    text-transform: unset;
  }

  .feature-{{ section.id }} .wrapper-box {
    display: grid;
    grid-template-columns: repeat({{ feature_row_mobile}}, 1fr);
    background-color: {{ feature_bg }}; 
    border: {{ feature_border_thickness }}px solid {{ feature_border_color }};
    border-radius: {{ feature_radius }}px;
    padding: {{ feature_padding_vertical | times: 0.75 | round: 0 }}px {{ feature_padding_horizontal | times: 0.75 | round: 0 }}px;
    gap: {{ feature_gap_mobile }}px;
  }
  
  .feature-{{ section.id }} .box:not(:nth-child(2)) .box__content-wrapper {
    padding-right: 10px;
  }
  
  .feature-{{ section.id }} .box {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    text-align: center;
    text-decoration: none;
    gap: 5px;
  }
  
  .feature-{{ section.id }} .box__image {
    display:flex;
    margin-right: 10px;
    flex: 0 0 {{ feature_icon_size_mobile }}px;
    height: {{ feature_icon_size_mobile }}px;
  }

  .feature-{{ section.id }} .box__image img,
  .feature-{{ section.id }} .box__image svg {
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .feature-{{ section.id }} .box__image svg path {
    fill: {{ feature_icon_color }};
  }

  @media(min-width: 768px) {

    .section-{{ section.id }} {
      margin-top: {{ margin_top }}px;
      margin-bottom: {{ margin_bottom }}px;
    }
    
    .section-{{ section.id }}-settings {
      padding: 0 5rem;
      padding-top: {{ padding_top }}px;
      padding-bottom: {{ padding_bottom }}px;
      padding-left: {{ padding_horizontal }}rem;
      padding-right: {{ padding_horizontal }}rem;
    }

    .feature-{{ section.id }} .wrapper-box {
      grid-template-columns: repeat({{ feature_row }}, 1fr);
      padding: {{ feature_padding_vertical }}px {{ feature_padding_horizontal }}px;
      gap: {{ feature_gap }}px;
    }

    .feature-{{ section.id }} .box {
      flex: 1 0 auto;
    }
    
    .feature-{{ section.id }} .box__title {
      font-size: {{ feature_heading_size }}px;
    }

    .feature-{{ section.id }} .box__description {
      margin-top: {{ feature_text_mt }}px;
      font-size: {{ feature_text_size }}px;
    }

    .section-{{ section.id }}-settings .box__image {
      flex: 0 0 {{ feature_icon_size }}px;
      height: {{ feature_icon_size }}px;
    }
  }
{% endstyle %}

{% if feature_heading_custom %}
  <style>
    .feature-{{ section.id }} .box__title {
      font-family: {{ feature_heading_font.family }}, {{ feature_heading_font.fallback_families }};
      font-weight: {{ feature_heading_font.weight }};
      font-style: {{ feature_heading_font.style }};
    }
  </style>
{% endif %}

{% if feature_text_custom %}
  <style>
    .feature-{{ section.id }} .box__description {
      font-family: {{ feature_text_font.family }}, {{ feature_text_font.fallback_families }};
      font-weight: {{ feature_text_font.weight }};
      font-style: {{ feature_text_font.style }};
    }
  </style>
{% endif %}

{% unless full_width %}
  <style>
    .section-{{ section.id }}-settings {
      max-width: {{ content_width }}rem;
    }
  </style>
{% endunless %}

{% if feature_shadow %}
  <style>
    .feature-{{ section.id }} .wrapper-box {
       box-shadow: 4px 4px 20px {{ feature_shadow_color | hex_to_rgba: 0.2 }};
    }
  </style>
{% endif %}

{% capture svg_example_1 %}
 <svg class='icon icon--medium icon--type-truck' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.64 6.92L9.5 5.12V4a.5.5 0 00-.5-.5H1a.5.5 0 00-.5.5v8.5c0 .28.22.5.5.5h1.27a2.1 2.1 0 004.06 0h3.94a2.1 2.1 0 004.06 0h1.17a.5.5 0 00.5-.5V7.4a.5.5 0 00-.36-.48zM4.3 13.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM6.33 12a2.1 2.1 0 00-4.06 0H1.5V4.5h7V12H6.33zm5.97 1.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM15 12h-.67a2.1 2.1 0 00-4.06 0H9.5V6.17l5.5 1.6V12z'></path></svg>
{% endcapture %}
{% capture svg_example_2 %}
  <svg class='icon icon--medium icon--type-price_tag' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.59 1.34a1 1 0 01.7-.29h5.66a1 1 0 011 1v5.66a1 1 0 01-.3.7L7.6 15.5a1 1 0 01-1.42 0L.52 9.83a1 1 0 010-1.42l7.07-7.07zm6.36 6.37l-7.07 7.07-5.66-5.66L8.3 2.05h5.66v5.66z' fill-rule='evenodd'></path><path d='M9.7 6.3a1 1 0 101.42-1.42 1 1 0 00-1.41 1.41zM9 7a2 2 0 102.83-2.83A2 2 0 009 7z' fill-rule='evenodd'></path></svg>
{% endcapture %}
{% capture svg_example_3 %}
  <svg class='icon icon--medium icon--type-return' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9 .5a.5.5 0 000 1h1a4.5 4.5 0 110 9H2.2l3.15-3.15a.5.5 0 10-.7-.7l-4 4a.5.5 0 000 .7l4 4a.5.5 0 00.7-.7L2.21 11.5H10a5.5 5.5 0 100-11H9z'></path></svg>
{% endcapture %}
{% capture svg_example_4 %}
  <svg class='icon icon--medium icon--type-star' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1c.21 0 .4.13.47.33l1.62 4.54 4.92.1a.5.5 0 01.29.9l-3.92 2.9 1.42 4.58a.5.5 0 01-.75.56L8 12.17 3.95 14.9a.5.5 0 01-.75-.56l1.42-4.58L.7 6.87a.5.5 0 01.29-.9l4.92-.1 1.62-4.54A.5.5 0 018 1zm0 2L6.74 6.52a.5.5 0 01-.46.33l-3.8.08L5.5 9.17a.5.5 0 01.18.55l-1.1 3.56 3.14-2.13a.5.5 0 01.56 0l3.15 2.13-1.1-3.56a.5.5 0 01.17-.55l3.02-2.23-3.8-.08a.5.5 0 01-.46-.33L8 2.99z'></path></svg>
{% endcapture %}

<div class="section-{{ section.id }} feature-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
    <div class="section-{{ section.id }}-settings ">
      <div class="wrapper-box">
          {%- for block in section.blocks -%}
              <{% if block.settings.feature_url != blank %}a href="{{ block.settings.feature_url }}"{% else %}div{% endif %} class="box">
                  {% unless block.settings.hide_image %}
                  <div class="box__image">
                      {%- if block.settings.feature_image != blank -%}
                        <img src="{{ block.settings.feature_image | image_url }}" alt="feature-item-{{ forloop.index }}" {% if lazy %}loading="lazy"{% endif %}>
                      {%- else -%}
                       {% case forloop.index %}
                        {% when 1 %}
                          {{ svg_example_1 }}
                        {% when 2 %}
                          {{ svg_example_2 }}
                        {% when 3 %}
                          {{ svg_example_3 }}
                        {% when 4 %}
                          {{ svg_example_4 }}
                        {% else %}
                          {{ svg_example_1 }}
                        {% endcase %}
                      {%- endif -%}
                  </div>
                  {% endunless %}
                  <div class="box__content-wrapper">
                      <div class="box__title">{{ block.settings.feature_title }}</div>
                      <div class="box__description">{{ block.settings.feature_text }}</div>
                  </div>
              </{% if block.settings.feature_url != blank %}a{% else %}div{% endif %}>
          {%- endfor -%}
      </div>
  </div>
</div>

{% schema %}
{
    "name":"Trust Icons",
    "tag":"section",
    "class":"feature-type1",
    "settings": [
      {
        "type":"header",
        "content":"Feature Settings"
      },
      {
        "type": "range",
        "id": "feature_row",
        "min": 1,
        "max": 5,
        "step": 1,
        "label": "Feature per Row",
        "default": 4
      },
      {
        "type": "range",
        "id": "feature_row_mobile",
        "min": 1,
        "max": 3,
        "step": 1,
        "label": "Feature per Row - Mobile",
        "default": 1
      },
      {
        "type": "range",
        "id": "feature_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Feature Gap",
        "default": 20
      },
      {
        "type": "range",
        "id": "feature_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Feature Gap - Mobile",
        "default": 20
      },
      {
        "type": "range",
        "id": "feature_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Feature Padding Vertical",
        "default": 0
      },
      {
         "type": "range",
         "id": "feature_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Feature Padding Horizontal",
         "default": 0
      },
      {
         "type": "range",
         "id": "feature_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Feature Border Radius",
         "default": 16
      },
      {
         "type": "range",
         "id": "feature_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Feature Border Thickness",
         "default": 0
      },
      {
        "type": "checkbox",
        "id": "feature_shadow",
        "label": "Use Shadow",
        "default": false
      },
      {
        "type":"header",
        "content":"Feature Heading Settings"
      },
      {
        "type": "checkbox",
        "id": "feature_heading_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "feature_heading_font",
        "label": "Feature Heading Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "feature_heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Heading Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "feature_heading_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Heading Size - Mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Feature Heading Line Height",
        "default": 130
      },
      {
        "type": "range",
        "id": "feature_heading_mt",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Feature Heading Margin top",
        "default": 8
      },
      {
        "type":"header",
        "content":"Feature Text Settings"
      },
      {
        "type": "checkbox",
        "id": "feature_text_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "feature_text_font",
        "label": "Feature Text Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "feature_text_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Text Size",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_text_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Text Size - Mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Feature Text Line Height",
        "default": 130
      },
      {
        "type": "range",
        "id": "feature_text_mt",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Feature Text Margin top",
        "default": 4
      },
      {
        "type":"header",
        "content":"Feature Icon Settings"
      },
      {
        "type": "range",
        "id": "feature_icon_size",
        "min": 10,
        "max": 200,
        "step": 2,
        "unit": "px",
        "label": "Feature Icon Size",
        "default": 42
      },
      {
        "type": "range",
        "id": "feature_icon_size_mobile",
        "min": 10,
        "max": 200,
        "step": 2,
        "unit": "px",
        "label": "Feature Icon Size - Mobile",
        "default": 42
      },
      {
        "type":"header",
        "content":"Feature Colors"
      },
      {
        "type":"color",
        "id":"feature_bg",
        "label":"Feature Background Color",
        "default":"#FFFFFF"
      },
      {
        "type":"color",
        "id":"feature_border_color",
        "label":"Feature Border Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_shadow_color",
        "label":"Feature Shadow Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_heading_color",
        "label":"Feature Heading Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_text_color",
        "label":"Feature Text Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_icon_color",
        "label":"Feature Icon Color",
        "default":"#000000"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color_background",
        "id": "background_gradient",
        "label": "Section background gradient"
      },
      {
        "type": "color",
        "label": "Border",
        "id": "border_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Section margin (outside)"
      },
      {
        "type": "range",
        "id": "margin_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin top",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin bottom",
        "default": 0
      },
      {
        "type": "header",
        "content": "Section padding (inside)"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Padding top",
        "default": 16
      },
      {
         "type": "range",
         "id": "padding_bottom",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Padding bottom",
         "default": 16
      },
      {
        "type": "range",
        "id": "padding_horizontal",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "rem",
        "label": "Padding sides",
        "default": 5
      },
      {
        "type": "range",
        "id": "padding_horizontal_mobile",
        "min": 0,
        "max": 15,
        "step": 0.5,
        "unit": "rem",
        "label": "Padding sides mobile",
        "default": 1.5
      },
      {
        "type": "header",
        "content": "Section Settings"
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full Width",
        "default": false
      },
      {
        "type": "range",
        "id": "content_width",
        "min": 0,
        "max": 400,
        "step": 10,
        "unit": "rem",
        "label": "Section content width",
        "default": 120
      },
      {
        "type": "range",
        "id": "border_thickness",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Border thickness",
        "default": 0
      },
      {
        "type": "checkbox",
        "id": "lazy",
        "label": "Lazy load",
        "info": "Lazy load images for speed optimisation",
        "default": true
      }
    ],
    "blocks":[
       {
          "type":"image",
          "name":"Icon",
          "settings":[
             {
                "type":"text",
                "id":"feature_title",
                "label":"Item Title text",
                "default":"Item Title"
             },
             {
                "type":"text",
                "id":"feature_text",
                "label":"Item text (richtext)",
                "default":"<p>Item text</p>"
             },
             {
                "type":"image_picker",
                "id":"feature_image",
                "label":"Icon"
             },
             {
                "type":"url",
                "id":"feature_url",
                "label":"Item URL"
             },
             {
                "type":"checkbox",
                "id":"hide_image",
                "default": false,
                "label":"Hide Image"
             }
          ]
       }
    ],
    "presets":[
       {
          "name":"Trust Icons",
          "blocks":[
             {
                "type":"image",
                "settings":{
                   "feature_title":"Free Shipping",
                   "feature_text":"Order today, receive tomorrow"
                }
             },
             {
                "type":"image",
                "settings":{
                   "feature_title": "Price-match guarantee",
                   "feature_text": "Safe money when ordering with us"
                }
             },
             {
                "type":"image",
                "settings":{
                   "feature_title": "Hassle-free exchange",
                   "feature_text": "Receive a slip for exchanges"
				}
             },
             {
                "type": "image",
                "settings": {
                    "feature_title": "5.0 Google Reviews",
                    "feature_text": "Customer satisfaction #1 priority"
                }
             }
          ]
       }
    ]
 }
{% endschema %}
2

Hello @NOT1

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

{%- liquid

  assign padding_horizontal = section.settings.padding_horizontal
  assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom
  assign border_color = section.settings.border_color
  assign border_thickness = section.settings.border_thickness
  assign margin_top = section.settings.margin_top
  assign margin_bottom = section.settings.margin_bottom
  assign background_color = section.settings.background_color
  assign background_gradient = section.settings.background_gradient
  assign full_width = section.settings.full_width
  assign content_width = section.settings.content_width
  assign lazy = section.settings.lazy

  assign feature_row = section.settings.feature_row
  assign feature_row_mobile = section.settings.feature_row_mobile
  assign feature_gap_mobile = section.settings.feature_gap_mobile
  assign feature_gap = section.settings.feature_gap
  assign feature_padding_vertical = section.settings.feature_padding_vertical
  assign feature_padding_horizontal = section.settings.feature_padding_horizontal
  assign feature_border_thickness = section.settings.feature_border_thickness
  assign feature_border_color = section.settings.feature_border_color
  assign feature_bg = section.settings.feature_bg
  assign feature_radius = section.settings.feature_radius
  assign feature_shadow_color = section.settings.feature_shadow_color
  assign feature_shadow = section.settings.feature_shadow
  
  assign feature_heading_size = section.settings.feature_heading_size
  assign feature_heading_size_mobile = section.settings.feature_heading_size_mobile
  assign feature_heading_color = section.settings.feature_heading_color
  assign feature_heading_custom = section.settings.feature_heading_custom
  assign feature_heading_font = section.settings.feature_heading_font
  assign feature_heading_height = section.settings.feature_heading_height

  assign feature_text_size = section.settings.feature_text_size
  assign feature_text_size_mobile = section.settings.feature_text_size_mobile
  assign feature_text_color = section.settings.feature_text_color
  assign feature_text_custom = section.settings.feature_text_custom
  assign feature_text_font = section.settings.feature_text_font
  assign feature_text_height = section.settings.feature_text_height
  assign feature_text_mt = section.settings.feature_text_mt

  assign feature_icon_size_mobile = section.settings.feature_icon_size_mobile
  assign feature_icon_size = section.settings.feature_icon_size
  assign feature_icon_color = section.settings.feature_icon_color
   
-%}
{% style %}

  {{ feature_text_font | font_face: font_display: 'swap' }}
  {{ feature_heading_font | font_face: font_display: 'swap' }}

  .section-{{ section.id }} {
    border-top: solid {{ border_color }} {{ border_thickness }}px;
    border-bottom: solid {{ border_color }} {{ border_thickness }}px;
    margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
    margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
  }
  
  .section-{{ section.id }}-settings {
    margin: 0 auto;
    padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
    padding-left: {{ padding_horizontal_mobile }}rem;
    padding-right: {{ padding_horizontal_mobile }}rem;
  }

  .feature-{{ section.id }} .box__title {
    margin: 0px;
    font-size: {{ feature_heading_size_mobile }}px;
    color: {{ feature_heading_color }};
    line-height: {{ feature_heading_height }}%;
    text-transform: unset;
    font-weight: bold;
    margin-top: {{section.settings.feature_heading_mt}}px;
  }
  
  .feature-{{ section.id }} .box__description {
    margin: 0px;
    margin-top: {{ feature_text_mt | times: 0.75 | round: 0 }}px;
    font-size: {{ feature_text_size_mobile }}px;
    color: {{ feature_text_color }};
    line-height: {{ feature_text_height }}%;
    text-transform: unset;
  }

  .feature-{{ section.id }} .wrapper-box {
    /* display: grid; */
    grid-template-columns: repeat({{ feature_row_mobile}}, 1fr);
    background-color: {{ feature_bg }}; 
    border: {{ feature_border_thickness }}px solid {{ feature_border_color }};
    border-radius: {{ feature_radius }}px;
    padding: {{ feature_padding_vertical | times: 0.75 | round: 0 }}px {{ feature_padding_horizontal | times: 0.75 | round: 0 }}px;
    /* gap: {{ feature_gap_mobile }}px; */
  }
  
  .feature-{{ section.id }} .box:not(:nth-child(2)) .box__content-wrapper {
    padding-right: 10px;
  }
  
  .feature-{{ section.id }} .box {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    text-align: center;
    text-decoration: none;
    gap: 5px;
  }
  
  .feature-{{ section.id }} .box__image {
    display:flex;
    margin-right: 10px;
    flex: 0 0 {{ feature_icon_size_mobile }}px;
    height: {{ feature_icon_size_mobile }}px;
  }

  .feature-{{ section.id }} .box__image img,
  .feature-{{ section.id }} .box__image svg {
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .feature-{{ section.id }} .box__image svg path {
    fill: {{ feature_icon_color }};
  }

  @media(min-width: 768px) {

    .section-{{ section.id }} {
      margin-top: {{ margin_top }}px;
      margin-bottom: {{ margin_bottom }}px;
    }
    
    .section-{{ section.id }}-settings {
      padding: 0 5rem;
      padding-top: {{ padding_top }}px;
      padding-bottom: {{ padding_bottom }}px;
      padding-left: {{ padding_horizontal }}rem;
      padding-right: {{ padding_horizontal }}rem;
    }

    .feature-{{ section.id }} .wrapper-box {
      grid-template-columns: repeat({{ feature_row }}, 1fr);
      padding: {{ feature_padding_vertical }}px {{ feature_padding_horizontal }}px;
      /* gap: {{ feature_gap }}px; */
    }

    .feature-{{ section.id }} .box {
      flex: 1 0 auto;
    }
    
    .feature-{{ section.id }} .box__title {
      font-size: {{ feature_heading_size }}px;
    }

    .feature-{{ section.id }} .box__description {
      margin-top: {{ feature_text_mt }}px;
      font-size: {{ feature_text_size }}px;
    }

    .section-{{ section.id }}-settings .box__image {
      flex: 0 0 {{ feature_icon_size }}px;
      height: {{ feature_icon_size }}px;
    }
  }
{% endstyle %}

{% if feature_heading_custom %}
  <style>
    .feature-{{ section.id }} .box__title {
      font-family: {{ feature_heading_font.family }}, {{ feature_heading_font.fallback_families }};
      font-weight: {{ feature_heading_font.weight }};
      font-style: {{ feature_heading_font.style }};
    }
  </style>
{% endif %}

{% if feature_text_custom %}
  <style>
    .feature-{{ section.id }} .box__description {
      font-family: {{ feature_text_font.family }}, {{ feature_text_font.fallback_families }};
      font-weight: {{ feature_text_font.weight }};
      font-style: {{ feature_text_font.style }};
    }
  </style>
{% endif %}

{% unless full_width %}
  <style>
    .section-{{ section.id }}-settings {
      max-width: {{ content_width }}rem;
    }
  </style>
{% endunless %}

{% if feature_shadow %}
  <style>
    .feature-{{ section.id }} .wrapper-box {
       box-shadow: 4px 4px 20px {{ feature_shadow_color | hex_to_rgba: 0.2 }};
    }
  </style>
{% endif %}

<style>
  .section-{{ section.id }} .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    gap: 20px;
    display: flex;
    flex-direction: column;
  }
@media(max-width: 768px) { 

  .section-{{ section.id }} .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
  }
  
  .section-{{ section.id }} .box__image img {
      max-width: 100%;
      height: auto;
  }
   
  /* Pagination container (bottom center) */
  .section-{{ section.id }} .swiper-pagination {
      position: absolute;
      bottom: 3px !important;
      left: 50% !important;
      transform: translateX(-50%); /* Centers the pagination */
      z-index: 10; /* Ensure it appears above other elements */
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 20px;
  }
  
  /* Pagination bullets */
  .section-{{ section.id }} .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      margin: 0 4px; /* Adjust the space between bullets */
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 50%; /* Circular bullets */
      transition: background-color 0.3s, transform 0.3s; /* Smooth color and transform transitions */
      cursor: pointer;
  }
  
  /* Active bullet style */
  .section-{{ section.id }} .swiper-pagination-bullet-active {
      background-color: #000000; /* Green color */
      transform: scale(1.2); /* Slight scale-up effect for active bullet */
  }
  
  /* Optional: Hover effect for bullets */
  .section-{{ section.id }} .swiper-pagination-bullet:hover {
      background-color: #000000; /* Green color */
      transform: scale(1.1); /* Slight zoom effect on hover */
  }
}  

@media(min-width: 768px) {
  .section-{{ section.id }} .swiper-pagination {
    display: none;
  }
}
</style>
{% capture svg_example_1 %}
 <svg class='icon icon--medium icon--type-truck' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.64 6.92L9.5 5.12V4a.5.5 0 00-.5-.5H1a.5.5 0 00-.5.5v8.5c0 .28.22.5.5.5h1.27a2.1 2.1 0 004.06 0h3.94a2.1 2.1 0 004.06 0h1.17a.5.5 0 00.5-.5V7.4a.5.5 0 00-.36-.48zM4.3 13.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM6.33 12a2.1 2.1 0 00-4.06 0H1.5V4.5h7V12H6.33zm5.97 1.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM15 12h-.67a2.1 2.1 0 00-4.06 0H9.5V6.17l5.5 1.6V12z'></path></svg>
{% endcapture %}
{% capture svg_example_2 %}
  <svg class='icon icon--medium icon--type-price_tag' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.59 1.34a1 1 0 01.7-.29h5.66a1 1 0 011 1v5.66a1 1 0 01-.3.7L7.6 15.5a1 1 0 01-1.42 0L.52 9.83a1 1 0 010-1.42l7.07-7.07zm6.36 6.37l-7.07 7.07-5.66-5.66L8.3 2.05h5.66v5.66z' fill-rule='evenodd'></path><path d='M9.7 6.3a1 1 0 101.42-1.42 1 1 0 00-1.41 1.41zM9 7a2 2 0 102.83-2.83A2 2 0 009 7z' fill-rule='evenodd'></path></svg>
{% endcapture %}
{% capture svg_example_3 %}
  <svg class='icon icon--medium icon--type-return' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9 .5a.5.5 0 000 1h1a4.5 4.5 0 110 9H2.2l3.15-3.15a.5.5 0 10-.7-.7l-4 4a.5.5 0 000 .7l4 4a.5.5 0 00.7-.7L2.21 11.5H10a5.5 5.5 0 100-11H9z'></path></svg>
{% endcapture %}
{% capture svg_example_4 %}
  <svg class='icon icon--medium icon--type-star' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1c.21 0 .4.13.47.33l1.62 4.54 4.92.1a.5.5 0 01.29.9l-3.92 2.9 1.42 4.58a.5.5 0 01-.75.56L8 12.17 3.95 14.9a.5.5 0 01-.75-.56l1.42-4.58L.7 6.87a.5.5 0 01.29-.9l4.92-.1 1.62-4.54A.5.5 0 018 1zm0 2L6.74 6.52a.5.5 0 01-.46.33l-3.8.08L5.5 9.17a.5.5 0 01.18.55l-1.1 3.56 3.14-2.13a.5.5 0 01.56 0l3.15 2.13-1.1-3.56a.5.5 0 01.17-.55l3.02-2.23-3.8-.08a.5.5 0 01-.46-.33L8 2.99z'></path></svg>
{% endcapture %}

<div class="section-{{ section.id }} feature-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
    <div class="section-{{ section.id }}-settings swiper-container">
      <div class="wrapper-box swiper-wrapper">
          {%- for block in section.blocks -%}
              <{% if block.settings.feature_url != blank %}a href="{{ block.settings.feature_url }}"{% else %}div{% endif %} class="box swiper-slide">
                  {% unless block.settings.hide_image %}
                  <div class="box__image">
                      {%- if block.settings.feature_image != blank -%}
                        <img src="{{ block.settings.feature_image | image_url }}" alt="feature-item-{{ forloop.index }}" {% if lazy %}loading="lazy"{% endif %}>
                      {%- else -%}
                       {% case forloop.index %}
                        {% when 1 %}
                          {{ svg_example_1 }}
                        {% when 2 %}
                          {{ svg_example_2 }}
                        {% when 3 %}
                          {{ svg_example_3 }}
                        {% when 4 %}
                          {{ svg_example_4 }}
                        {% else %}
                          {{ svg_example_1 }}
                        {% endcase %}
                      {%- endif -%}
                  </div>
                  {% endunless %}
                  <div class="box__content-wrapper">
                      <div class="box__title">{{ block.settings.feature_title }}</div>
                      <div class="box__description">{{ block.settings.feature_text }}</div>
                  </div>
              </{% if block.settings.feature_url != blank %}a{% else %}div{% endif %}>
          {%- endfor -%}
      </div>
    <div class="swiper-pagination"></div> 
     
  </div>
</div>

<script>
const swiper = new Swiper('.swiper-container', {
  loop: true, // Enable continuous loop mode
  slidesPerView: 1, // Default to 1 slide visible
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    // When the screen is smaller than 768px, show 1 slide
    768: {
      slidesPerView: 4,
      spaceBetween: 10,
    },
    // When the screen is between 768px and 1024px, show 2 slides
    1024: {
      slidesPerView: 4,
      spaceBetween: 20,
    },
    // When the screen is bigger than 1024px, show 4 slides
    1025: {
      slidesPerView: 4,
      spaceBetween: 20,
    }
  }
});

</script>
{% schema %}
{
    "name":"Trust Icons",
    "tag":"section",
    "class":"feature-type1",
    "settings": [
      {
        "type":"header",
        "content":"Feature Settings"
      },
      {
        "type": "range",
        "id": "feature_row",
        "min": 1,
        "max": 5,
        "step": 1,
        "label": "Feature per Row",
        "default": 4
      },
      {
        "type": "range",
        "id": "feature_row_mobile",
        "min": 1,
        "max": 3,
        "step": 1,
        "label": "Feature per Row - Mobile",
        "default": 1
      },
      {
        "type": "range",
        "id": "feature_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Feature Gap",
        "default": 20
      },
      {
        "type": "range",
        "id": "feature_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Feature Gap - Mobile",
        "default": 20
      },
      {
        "type": "range",
        "id": "feature_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Feature Padding Vertical",
        "default": 0
      },
      {
         "type": "range",
         "id": "feature_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Feature Padding Horizontal",
         "default": 0
      },
      {
         "type": "range",
         "id": "feature_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Feature Border Radius",
         "default": 16
      },
      {
         "type": "range",
         "id": "feature_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Feature Border Thickness",
         "default": 0
      },
      {
        "type": "checkbox",
        "id": "feature_shadow",
        "label": "Use Shadow",
        "default": false
      },
      {
        "type":"header",
        "content":"Feature Heading Settings"
      },
      {
        "type": "checkbox",
        "id": "feature_heading_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "feature_heading_font",
        "label": "Feature Heading Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "feature_heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Heading Size",
        "default": 14
      },
      {
        "type": "range",
        "id": "feature_heading_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Heading Size - Mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Feature Heading Line Height",
        "default": 130
      },
      {
        "type": "range",
        "id": "feature_heading_mt",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Feature Heading Margin top",
        "default": 8
      },
      {
        "type":"header",
        "content":"Feature Text Settings"
      },
      {
        "type": "checkbox",
        "id": "feature_text_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "feature_text_font",
        "label": "Feature Text Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "feature_text_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Text Size",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_text_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Feature Text Size - Mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Feature Text Line Height",
        "default": 130
      },
      {
        "type": "range",
        "id": "feature_text_mt",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Feature Text Margin top",
        "default": 4
      },
      {
        "type":"header",
        "content":"Feature Icon Settings"
      },
      {
        "type": "range",
        "id": "feature_icon_size",
        "min": 10,
        "max": 200,
        "step": 2,
        "unit": "px",
        "label": "Feature Icon Size",
        "default": 42
      },
      {
        "type": "range",
        "id": "feature_icon_size_mobile",
        "min": 10,
        "max": 200,
        "step": 2,
        "unit": "px",
        "label": "Feature Icon Size - Mobile",
        "default": 42
      },
      {
        "type":"header",
        "content":"Feature Colors"
      },
      {
        "type":"color",
        "id":"feature_bg",
        "label":"Feature Background Color",
        "default":"#FFFFFF"
      },
      {
        "type":"color",
        "id":"feature_border_color",
        "label":"Feature Border Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_shadow_color",
        "label":"Feature Shadow Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_heading_color",
        "label":"Feature Heading Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_text_color",
        "label":"Feature Text Color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_icon_color",
        "label":"Feature Icon Color",
        "default":"#000000"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color_background",
        "id": "background_gradient",
        "label": "Section background gradient"
      },
      {
        "type": "color",
        "label": "Border",
        "id": "border_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Section margin (outside)"
      },
      {
        "type": "range",
        "id": "margin_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin top",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin bottom",
        "default": 0
      },
      {
        "type": "header",
        "content": "Section padding (inside)"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Padding top",
        "default": 16
      },
      {
         "type": "range",
         "id": "padding_bottom",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Padding bottom",
         "default": 16
      },
      {
        "type": "range",
        "id": "padding_horizontal",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "rem",
        "label": "Padding sides",
        "default": 5
      },
      {
        "type": "range",
        "id": "padding_horizontal_mobile",
        "min": 0,
        "max": 15,
        "step": 0.5,
        "unit": "rem",
        "label": "Padding sides mobile",
        "default": 1.5
      },
      {
        "type": "header",
        "content": "Section Settings"
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full Width",
        "default": false
      },
      {
        "type": "range",
        "id": "content_width",
        "min": 0,
        "max": 400,
        "step": 10,
        "unit": "rem",
        "label": "Section content width",
        "default": 120
      },
      {
        "type": "range",
        "id": "border_thickness",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Border thickness",
        "default": 0
      },
      {
        "type": "checkbox",
        "id": "lazy",
        "label": "Lazy load",
        "info": "Lazy load images for speed optimisation",
        "default": true
      }
    ],
    "blocks":[
       {
          "type":"image",
          "name":"Icon",
          "settings":[
             {
                "type":"text",
                "id":"feature_title",
                "label":"Item Title text",
                "default":"Item Title"
             },
             {
                "type":"text",
                "id":"feature_text",
                "label":"Item text (richtext)",
                "default":"<p>Item text</p>"
             },
             {
                "type":"image_picker",
                "id":"feature_image",
                "label":"Icon"
             },
             {
                "type":"url",
                "id":"feature_url",
                "label":"Item URL"
             },
             {
                "type":"checkbox",
                "id":"hide_image",
                "default": false,
                "label":"Hide Image"
             }
          ]
       }
    ],
    "presets":[
       {
          "name":"Trust Icons",
          "blocks":[
             {
                "type":"image",
                "settings":{
                   "feature_title":"Free Shipping",
                   "feature_text":"Order today, receive tomorrow"
                }
             },
             {
                "type":"image",
                "settings":{
                   "feature_title": "Price-match guarantee",
                   "feature_text": "Safe money when ordering with us"
                }
             },
             {
                "type":"image",
                "settings":{
                   "feature_title": "Hassle-free exchange",
                   "feature_text": "Receive a slip for exchanges"
				}
             },
             {
                "type": "image",
                "settings": {
                    "feature_title": "5.0 Google Reviews",
                    "feature_text": "Customer satisfaction #1 priority"
                }
             }
          ]
       }
    ]
 }
{% endschema %}