Iconos SVG personalizados en Shopify: prepara una marca limpia

Un icono SVG personalizado puede incorporarse a un tema de Shopify de dos formas prácticas: cargar el archivo como recurso del tema y mostrarlo con una etiqueta de imagen, o colocar su marcado en un snippet Liquid y renderizarlo donde corresponda. La primera vía es más sencilla para una marca de color fijo. La segunda ofrece control directo de sus trazados y color. Los controles disponibles en el editor dependen del tema, así que revisa sus bloques de iconos existentes antes de cambiar código.

Si tu único original es un PNG, crea primero un SVG basado en trazados. Cambiar el nombre no convierte píxeles en formas. Es preferible un SVG original limpio si lo tienes; una fotografía detallada suele quedar mejor como imagen. Los pasos siguientes llevan un pictograma de marca pequeño desde la preparación del archivo hasta la vista previa del tema sin suponer una cuenta de comerciante o versión concreta del tema.

Elige dónde debe ir el icono

Los temas de Shopify tienen un directorio assets para archivos y otro snippets para marcado Liquid reutilizable. Shopify documenta ambos en su arquitectura de temas y recomienda comprobar las opciones del editor antes de editar código en su guía de código de temas. Un tema con campo SVG personalizado quizá no necesite ninguna de las vías de código siguientes. Que un tema tenga ese campo no implica que todos lo tengan.

Dos vías de entrega

La diferencia importa porque el CSS de la página no puede acceder al interior de un SVG cargado mediante un <img> normal. Los trazados en línea pueden usar currentColor, que toma su valor de la propiedad CSS color. Consulta la guía de SVG en contexto de imagen de MDN y su explicación de currentColor. Para ejemplos generales de navegador, lee SVG en línea frente a etiqueta de imagen.

Prepara el SVG antes de tocar el tema

Empieza con la versión útil más pequeña de la marca. Para un icono, conserva su silueta y cualquier abertura intencionada al tamaño que realmente verán los clientes. Las letras finas o la textura que se ven bien en una mesa de trabajo pueden perderse entre 20 y 32 píxeles. Conserva el archivo de marca como maestro y crea una exportación independiente para el icono.

1. Recupera el original limpio. Exporta SVG del diseño vectorial original si existe. Si solo tienes un PNG plano, PerfectVector puede ayudar con ese paso: crea un SVG candidato mediante su flujo de clipart a SVG y abre el archivo descargado en un editor vectorial. Compara la silueta y las formas separadas con el PNG. Un trazado es un punto de partida, no una promesa de geometría idéntica.
2. Revisa la estructura. Confirma que la marca visible esté hecha de trazados o formas vectoriales básicas, no de un rectángulo <image> ráster incrustado. Elimina cajas de fondo accidentales, fragmentos sueltos, contornos duplicados y regiones de color diminutas. La guía de preparación de iconos PNG cubre las cuadrículas coherentes y el tamaño óptico de un conjunto.
3. Configura el lienzo y los colores. Da a la exportación un viewBox con un margen razonable. Conserva los colores fijos de marca si debe seguir teniendo dos tonos. Si un icono de un color debe heredar el color del tema, haz que los trazados previstos usen currentColor. Cambiar el color SVG explica por qué un relleno fijo puede resistirse a un cambio posterior de color.
4. Revisa el archivo como código. Conserva solo los elementos y atributos necesarios para el icono. Elimina scripts inesperados, referencias externas, datos sobrantes del editor y marcado no fiable antes de colocarlo en línea en un tema. Abre el SVG limpio al tamaño del icono y a un tamaño mayor de revisión; ambas comprobaciones detectan errores distintos.

Para una estrella monocroma pequeña, el original podría ser así de sencillo. El trazado siguiente es un ejemplo original, no un icono proporcionado por Shopify ni una conversión de PerfectVector. Tiene un sistema explícito de coordenadas y ninguna imagen incrustada:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

Una marca de dos colores necesita trazados o formas separados con rellenos deliberados. Sustituir todos los colores por currentColor borraría esa diferencia. Si pertenece a una familia de iconos mayor, aplica las mismas reglas de tamaño y color a unos cuantos iconos representativos antes de exportar el resto.

Vía A: muestra un recurso del tema

El filtro asset_url de Shopify devuelve la URL CDN de un archivo del directorio assets del tema. Añade allí el SVG revisado y referencia su nombre exacto en la plantilla, sección o snippet Liquid apropiados. El ejemplo sencillo siguiente supone que brand-mark.svg es una marca decorativa de color fijo junto a texto visible:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Utiliza un texto alt descriptivo si la imagen transmite información que el texto adyacente no proporciona. Para una imagen puramente decorativa, alt="" es adecuado. Las indicaciones de accesibilidad de temas de Shopify piden un atributo alt en cada imagen y un valor vacío para iconos decorativos. El ancho y la altura explícitos también reservan espacio mientras se carga el recurso, como explica la guía de entrega de recursos de Shopify.

Esta vía mantiene el SVG como una imagen única desde el punto de vista de la página. Si cambia el color del tema, actualiza los rellenos del SVG o elige la vía en línea en lugar de suponer que una regla CSS del padre recoloreará el archivo. No pegues una URL de archivo de una tienda en otro tema; deja que asset_url resuelva el recurso del tema.

Vía B: renderiza un snippet de icono en línea

Para un icono repetido de un color, coloca el marcado SVG revisado en un snippet como snippets/brand-mark-icon.liquid. La documentación de snippets de Shopify utiliza {% render %} para insertar marcado reutilizable. Un snippet mínimo puede tomar el color del estilo del texto que lo rodea:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Después renderízalo en el archivo pertinente del tema:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Aquí aria-hidden="true" corresponde a un icono que solo decora texto visible cercano. Si el icono por sí solo etiqueta un botón o enlace, da al control un nombre accesible en lugar de depender de un SVG decorativo. Pruébalo con teclado y lector de pantalla. Mantén su color CSS y dimensiones en el sistema normal de estilos del tema en lugar de dispersar valores en línea aislados.

Un snippet es reutilizable, pero sigue siendo código del tema. Shopify recomienda duplicar un tema antes de cambiar código. Haz el cambio en la copia, previsualiza la página o sección exacta y conserva el snippet original para comparar tras actualizar el tema. Las bibliotecas de iconos específicas de cada tema pueden tener sus propios argumentos y estructura; revisa esos archivos antes de sustituir un icono integrado. La conversación actual de Shopify Community sobre una biblioteca de iconos ilustra por qué renderizar toda una biblioteca no equivale necesariamente a seleccionar un icono de ella.

Comprueba la entrega al tamaño final

Un archivo puede ser técnicamente válido y verse mal en la tienda. Revisa la página sobre fondos claros y oscuros si el tema los utiliza. Comprueba la marca a su tamaño CSS real, en una ventana estrecha y junto a los iconos vecinos. Confirma que un hueco siga abierto, los colores tengan contraste suficiente y el icono no quede recortado por su viewBox o contenedor.

Si el recurso parece un rectángulo borroso al ampliarlo, busca un ráster incrustado. Si un icono en línea ignora el color del tema, busca rellenos fijos, estilos en línea o un selector más específico. Si no aparece nada, comprueba primero el nombre del recurso o snippet y después el marcado de la sección del tema. No cambies varias cosas a la vez. La guía de iconos con máscara CSS cubre otra vía para recolorear una silueta sin colocar sus trazados en línea.

Para tu propio pictograma plano que solo existe como imagen ráster, crea un SVG candidato con PerfectVector y revisa sus trazados, aberturas y colores al tamaño previsto del icono antes de elegir la vía del tema. Si ya tienes un buen SVG, omite el trazado y dedica ese tiempo a la vista previa de la tienda.

Preguntas frecuentes

¿Puedo cargar un icono SVG desde la pantalla Customize de cualquier tema de Shopify? No. Algunos temas ofrecen un campo de icono o SVG personalizado; otros requieren un recurso o cambio de código. Revisa las secciones y documentación del tema concreto antes de suponer que existe ese campo.

¿Por qué mi SVG cargado no sigue el color del tema? Un SVG utilizado mediante una etiqueta de imagen es un recurso de imagen, por lo que el CSS de la página no aplica estilo a sus trazados internos. Edita los rellenos para un recurso de color fijo o utiliza marcado en línea revisado con currentColor donde se necesite color controlado por el tema.

¿Debo convertir un icono de marca PNG a SVG antes de añadirlo? Convierte un pictograma plano si necesita trazados escalables y editables. Revisa el trazado al tamaño previsto del icono y elimina formas sueltas. Conserva una fotografía o imagen con textura como ráster si el trazado eliminaría el detalle que la define.

Fuentes

1. Shopify Developers — Arquitectura de temas — Recursos y snippets del tema y ubicación del marcado.
2. Shopify Developers — asset_url — Comportamiento de URL de recursos del tema utilizado en el ejemplo Liquid.
3. Shopify Developers — Snippets — Marcado Liquid reutilizable y etiqueta render.
4. Shopify Help Center — Editar código del tema — Uso inicial del editor, duplicación del tema y precauciones al cambiar código.
5. Shopify Developers — Buenas prácticas de accesibilidad — Texto alternativo y tratamiento de iconos decorativos.
6. Shopify Developers — Servir recursos desde Shopify CDN — Filtros de recursos y dimensiones explícitas de imagen.
7. MDN — SVG como imagen — Restricciones del contexto de imagen en el navegador.
8. MDN — Atributo color de SVG — Cómo currentColor aporta color a los rellenos y trazos SVG.