I’m setting up a Shopify store and need to use about 30 SVG icons within my theme. Instead of adding the SVG code directly into the liquid templates, I prefer to keep things organized by using the include method like this:
{% include 'icon-file' %}
This would require creating separate liquid files, such as icon-file.liquid, for each SVG code. However, having all these 30 files in the snippets directory could create a chaotic environment with my other files.
I’m curious if there’s a way to introduce a folder structure for these icons in Shopify, perhaps something like:
{% include 'Icons/icon-file' %}
Is there any better method for managing this amount of SVG icons in Shopify while keeping the snippets directory less cluttered? What are some best practices in this situation?
sprite sheets r awesome! they save space and load faster. i find it easier to manage than loads of svg files. plus, u can style them easily with css, gives more control!
I hit this exact issue building themes for clients. Here’s what worked best: create one render-icon.liquid snippet that takes parameters for the icon name and optional classes. Use a case statement inside to output the right SVG based on what you pass in. So instead of {% include 'icon-facebook' %}, you’d call {% render 'render-icon', icon: 'facebook', class: 'social-icon' %}. Everything stays in one file but your template code stays clean and readable. Performance is solid - no extra HTTP requests - and maintenance is way easier when you need to update or add icons.
I created one master SVG file with all my icons as symbols, then just reference them everywhere. Made an svg-icons.liquid file with all SVGs wrapped in <symbol> tags (each with unique IDs), included it once in my layout file. Now I can drop any icon using <use xlink:href="#icon-name"> wherever I want. Way better performance since the browser loads the SVG code just once, and everything’s in one file instead of scattered everywhere. Just watch out for duplicate symbol IDs or you’ll get conflicts.
Unfortunately, Shopify does not allow for nested folders within the snippets directory; everything must reside in that root folder. However, you can maintain organization through a naming convention. Using prefixes like icon-social-facebook.liquid or icon-product-star.liquid will help you group related icons when sorted alphabetically. Another effective approach is to consolidate all your SVGs into a single icons.liquid file, using conditional logic to display the desired icon, such as {% include 'icons' with 'facebook' %}, and handling the output with case statements. This significantly reduces clutter.
honestly, just use inline svg with liquid variables. create a snippet like svg-data.liquid that stores all your svg code in assign tags, then call them inline where u need them. fewer http requests and u won’t have 30 files cluttering everything up. works great for me!