← Go back

Custom Support Feature Blocks Icon Text Promo Section

Loaded by [email protected]

Enhance user experience with our mobile-responsive feature blocks section. Display key services (shipping, support, returns) with icons and text. Customizable colors, spacing, and SEO-friendly content structure. NOTE: We currently do not provide font files required for certain sections. However, we are working to include font file downloads in the future.

Preview Password = 1 *When you first time enter them back again then click agian Preview to show*

Liquid Code

                    <section class="feature-blocks" style="padding: {{ section.settings.pad_top }}px 0 {{ section.settings.pad_bot }}px; background: {{ section.settings.bg_color }};">
  <div class="page-width">
    <div class="feature-blocks-grid">
      {% for block in section.blocks %}
        <div class="feature-block" {{ block.shopify_attributes }}>
          {% if block.settings.icon %}
            <div class="feature-icon">
              {{ block.settings.icon | image_url: width: 60 | image_tag:
                loading: 'lazy',
                widths: '60, 120',
                class: 'icon-img'
              }}
            </div>
          {% endif %}
          
          <div class="feature-content">
            {% if block.settings.heading != blank %}
              <h4 class="feature-heading" style="color: {{ block.settings.heading_color }};">
                {{ block.settings.heading }}
              </h4>
            {% endif %}
            
            {% if block.settings.text != blank %}
              <div class="feature-text" style="color: {{ block.settings.text_color }};">
                {{ block.settings.text }}
              </div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<style>
  .feature-blocks-grid {
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .feature-block {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 20px;
  }

  .feature-icon {
    flex: 0 0 60px;
  }

  .icon-img {
    width: 100%;
    height: auto;
  }

  .feature-heading {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
  }
  section.feature-blocks {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

  .feature-text {
    font-size: 15px;
    line-height: 1.5;
  }

  @media (min-width: 768px) {
    .feature-blocks-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 767px) {
    .feature-block {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
</style>

{% schema %}
{
  "name": "Feature Blocks",
  "max_blocks": 3,
  "settings": [
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "pad_top",
      "label": "Top Padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 50
    },
    {
      "type": "range",
      "id": "pad_bot",
      "label": "Bottom Padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon Image"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Free Shipping"
        },
        {
          "type": "color",
          "id": "heading_color",
          "label": "Heading Color",
          "default": "#000000"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>On all US orders or orders above $99</p>"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#666666"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Feature Blocks",
      "category": "Custom",
      "blocks": [
        {
          "type": "feature",
          "settings": {
            "heading": "Free Shipping",
            "text": "<p>On all US orders or orders above $99</p>"
          }
        },
        {
          "type": "feature",
          "settings": {
            "heading": "Support 24/7",
            "text": "<p>Contact us 24 hours a day, 7 days a week</p>"
          }
        },
        {
          "type": "feature",
          "settings": {
            "heading": "30 Days Return",
            "text": "<p>Simply return it within 30 days for an exchange</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}