How to add custom icons to Shopify theme

Gpoe
Visitor
1 0 0

Hello, 

 

I'm currently using the Shapes Shopify theme and would like to add custom icons to use in the icon-list section.

 

I've added the SVG data to theme-icon.liquid and created a value and label in icon-list.liquid, but when I choose the icon in my theme editor nothing appears. I'm not sure if I'm missing a step or if my SVG data is incompatible/incorrect. Can anyone help me with this?

 

Thanks!

Replies 3 (3)

Ujjaval
Shopify Partner
1242 197 205

@Gpoe 
Follow below link steps hope your problem will be solve .
https://www.clickleaders.com/shopify-svg-logo/

MoLove
Tourist
3 0 0

Did you append the following to your paths and remove an id's or other data?
stroke="currentColor" stroke-width="{{ stroke }}" stroke-linecap="round" stroke-linejoin="round"

From what I understand you should only use <path> and no other html such as <svg>

leogalvan28
Shopify Partner
2 0 0

 

<div class="contenedor-iconos">
    {% style %}
    .contenedor-iconos{
    background-color: {{ section.settings.color_fondo }};

    }
    {% endstyle %}
    <div class="row-iconos">

        {% for block in section.blocks %}
        {% case block.type %}
        {% when 'icon' %}
        <div class="col-icono">
                {% if block.settings.icon_img != blank %}
                    <img src="{{  block.settings.icon_img | image_url  }}" alt=""> 
                    {% else %}
                        <img src="https://cdn.shopify.com/s/files/1/0629/8370/0680/files/fast-delivery.svg?v=1706303861" alt="">
                    
                {% endif %}
                
                <style>
                    .col-icono img {
                        width: {{ section.settings.ancho_icono }}px;
                    }
                    @media(min-width:991px){
                        .col-icono img{
                            position: relative;
                            right: 5px;
                        }
                    }
                </style>
            
             <div class="txt-icono">
                 {% if block.settings.titulo_icon != blank %}
                    <h3>{{ block.settings.titulo_icon }}</h3> 
                    {% else %}
                     <h3>Titulo para el icono</h3>
                 {% endif %}
                
                <style>
                    .col-icono h3{
                        color: {{ section.settings.color_titulo_icono  }};
                        font-size: {{ section.settings.size_titulo_icono }}px;
                    }
                    @media(min-width:991px){
                        .col-icono h3{
                            font-size: {{ section.settings.size_titulo_icono_desktop   }}px;
                        }
                    }
                </style>
                {% if block.settings.texto_icono != blank %}
                    <p>{{ block.settings.texto_icono }}</p>
                    {% else %}
                        <p>Esta es la descripcion para el icono</p>
                {% endif %}
                
                <style>
                    .col-icono p{
                        color: {{ section.settings.color_descripcion   }};
                        font-size: {{ section.settings.size_desc_movil }}px;
                    }

                    @media(min-width:991px){
                         .col-icono p{
                            font-size: {{ section.settings.size_desc_desktop }}px;
                         }
                    }
                </style>
             </div>
            
     
        </div>
        {% else %}

        {% endcase %}

        {% endfor %}

    </div>
</div>


<style>
    .contenedor-iconos{
        height: auto;
        width: 100%;
        padding: 50px 0px;
        display: flex;
        justify-content: center;
        align-items: center; 
        
        }
    @media(min-width:991px){
        .contenedor-iconos{
            min-height: 300px;
        }
    }
     .row-iconos{
        width: 90%;
        margin: 0px auto;
        height: auto;
        max-width: 1140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        min-height: inherit;
     }   

     @media(min-width:991px){
        .row-iconos{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
     }

     .col-icono{
        width: 90%;
        margin: 0px auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0px;
        min-height: 150px;

     }

     @media(min-width:991px){
        .col-icono{
            width: 24%;
            height: auto;
            flex-direction: row;
        }
     }

   

     .txt-icono{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 70%;
     }

     @media(min-width:991px){
        .txt-icono{
            align-items: flex-start;
        }
     }

 
     .txt-icono h3,.txt-icono p {
        text-align: {{ section.settings.texto_icono_alineacion }};
        margin: 0;
        padding: 0;
     }
     @media(min-width:991px){
        .txt-icono h3,.txt-icono p{
            text-align: {{ section.settings.texto_icono_alineacion_desktop  }};
        }

       
     }
   
</style>
    
  
{% schema %}
{
    "name": "Iconos",
    "settings": [
         {
            "type":"text",
            "id":"titulo_iconos",
            "label":"ingresa el titulo para los iconos"
         },
         {
            "type": "color",
            "id":"color_fondo",
            "label":"ingresa el color de fondo",
            "default": "#ffffff"
         },
         { 
            "type":"color",
            "id":"color_titulo_icono",
            "label":"ingresa el color para el titulo del icono",
            "default": "#ffffff"
         },
         {
            "type":"range",
            "id": "size_titulo_icono",
            "label": "Ingresa el tamaño para el titulo",
            "min":8,
            "max": 30,
            "unit": "px",
            "default": 18  
         },
         {
            "type":"range",
            "id": "size_titulo_icono_desktop",
            "label": "Ingresa el tamaño para el titulo en Computadora",
            "min":8,
            "max": 30,
            "unit": "px",
            "default": 18  
         },
         {
            "type": "range",
            "id":"ancho_icono",
            "label": "Ingresa el ancho del icono",
            "min": 18,
            "max": 100,
            "unit": "px",
            "default": 32
         },
         {
            "type": "range",
            "id": "ancho_txt",
            "label": "Ingresa el ancho del contenedor del texto",
            "min":50,
            "max":70,
            "unit":"%",
            "default": 50

         },
         {
            "type": "range",
            "id": "size_desc_movil",
            "label": "Ingresa el tamaño para la descripcion en movil",
            "min":10,
            "max":40,
            "unit":"px",
            "default": 10
         },
         {

            "type": "range",
            "id": "size_desc_desktop",
            "label": "Ingresa el tamaño para la descripcion en computadora",
            "min":10,
            "max":40,
            "unit":"px",
            "default": 10

         },
         {
            "type": "color",
            "id":"color_descripcion",
            "default": "#ffffff",
            "label": "Ingresa el color para le descripcion"
         },
         {
  "type": "select",
  "id": "texto_icono_alineacion",
  "label": "Alineacion textos",
  "options": [
    {
      "value": "left",
      "label": "left"
    },
    {
      "value": "center",
      "label": "center"
    },
    {
      "value": "right",
      "label": "right"
    }
  ],
  "default": "center"
},
{
  "type": "select",
  "id": "texto_icono_alineacion_desktop",
  "label": "Alineacion textos desktop",
  "options": [
    {
      "value": "left",
      "label": "left"
    },
    {
      "value": "center",
      "label": "center"
    },
    {
      "value": "right",
      "label": "right"
    }
  ],
  "default": "left"
}
        ],
    "blocks": [ 
        {
            "name":"Icon",
            "type": "icon",
            "settings":[ 
                {
                    "type":"image_picker",
                    "id": "icon_img",
                    "label": "Ingresa el icono"
                },
                {
                    "type":"text",
                    "id":"titulo_icon",
                    "label":"Ingresa el titulo del icono"
                },
                {
                    "type": "text",
                    "id": "texto_icono",
                    "label": "Ingresa el texto para el icono"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "Icons"
        }
    ] 
} 
{% endschema %}  

Hola este codigo recibe 4 iconos donde puedes modificar el color de fondo, color del titulo , color del texto , alineacion de los textos y tamaño de los iconos, espero te funcione 🙂