Shopify - Three Icon

tricon.liquid

{% comment %}
    @rotcl
{% endcomment %}

<section class="features-icons bg-light text-center">
        <div class="container">
            <div class="row" style="margin-bottom: 0!important;">
                <div class="col-lg-4">
                    <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
                        <div class="d-flex features-icons-icon"><i class="fa {{ section.settings.icon_1 }} fa-4x m-auto" data-bs-hover-animate="pulse"></i></div>
                        <h3>{{ section.settings.titulo_1 }}</h3>
                        <p class="lead mb-0">{{ section.settings.texto_1 }}</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
                        <div class="d-flex features-icons-icon"><i class="fa {{ section.settings.icon_2 }} fa-4x m-auto" data-bs-hover-animate="pulse"></i></div>
                        <h3>{{ section.settings.titulo_2 }}</h3>
                        <p class="lead mb-0">{{ section.settings.texto_2 }}</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
                        <div class="d-flex features-icons-icon"><i class="fa {{ section.settings.icon_3 }} fa-4x m-auto" data-bs-hover-animate="pulse"></i></div>
                        <h3>{{ section.settings.titulo_3 }}</h3>
                        <p class="lead mb-0">{{ section.settings.texto_3 }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


<style>
  .features-icons i{
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    color: {{ section.settings.icon_color }}!important;
  }
</style>


{% schema %}
{
  "name": "3 ICON",
  "class": "act-section",
  "settings": [
	{
		"type": "text",
		"id": "icon_color",
		"label": "Color íconos",
		"info": "Formato #rrggbb"
	},
	{
		"type": "text",
		"id": "icon_1",
		"label": "Icon 1",
		"info": "Ícono Font-Awesome fa-xxxxx"
	},
	{
		"type": "text",
		"id": "titulo_1",
		"label": "Titulo 1"
	},
	{
      "type": "text",
      "id": "texto_1",
      "label": "Texto 1"
    },
	{
		"type": "text",
		"id": "icon_2",
		"label": "Icon 2",
		"info": "Ícono Font-Awesome fa-xxxxx"
	},
	{
		"type": "text",
		"id": "titulo_2",
		"label": "Titulo 2"
	},
	{
      "type": "text",
      "id": "texto_2",
      "label": "Texto 2"
    },
	{
		"type": "text",
		"id": "icon_3",
		"label": "Icon 3",
		"info": "Ícono Font-Awesome fa-xxxxx"
	},
	{
		"type": "text",
		"id": "titulo_3",
		"label": "Titulo 3"
	},
	{
      "type": "text",
      "id": "texto_3",
      "label": "Texto 3"
    }
  ],
  "presets": [{
    "name": "Tricon",
    "category": "Custom"
  }]

}
{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Típica sección de 3 íconos alineados uno al lado del otro, configurable con font-awesome, y customizable.