Shopify themes, liquid, logos, and UX
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!
@Gpoe
Follow below link steps hope your problem will be solve .
https://www.clickleaders.com/shopify-svg-logo/
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>
<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 🙂
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025