💾 How to Create a Reusable Snippet for Buttons or Icons

Reusable snippets are one of the best ways to keep your Shopify theme clean, consistent, and easy to maintain. Instead of rewriting button or icon code across multiple sections, you can build a single snippet and reuse it everywhere.

In this tutorial, you'll learn how to create a reusable snippet for both buttons and icons — and how to pass settings into it using Liquid.

---

✨ What You’ll Learn

• How to create global reusable snippets
• How to pass parameters/variables to snippets
• How to create a flexible button snippet
• How to create an icon snippet (emoji or SVG)
• How to include snippets inside any section

---

🧱 Step 1 — Create the Button Snippet

Go to:

Online Store → Themes → Edit Code → Snippets

Create a new snippet:

snippets/button.liquid

Paste this flexible button code:

<a 
  href="{{ link | default: '#' }}" 
  class="reusable-btn {{ style | default: 'primary' }}"
  style="
    --btn-bg: {{ bg_color | default: '#111' }};
    --btn-color: {{ text_color | default: '#fff' }};
    --btn-radius: {{ radius | default: '6px' }};
    --btn-padding: {{ padding | default: '14px 24px' }};
  "
>
  {{ text | default: "Click Here" }}
</a>

This button supports:

• Custom text
• Links
• Colors
• Padding
• Rounded corners

---

🧱 Step 2 — Add Button Styles

Add to base.css (or your theme's main CSS file):

.reusable-btn {
  display: inline-block;
  padding: var(--btn-padding);
  background: var(--btn-bg);
  color: var(--btn-color);
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s ease;
}

.reusable-btn:hover {
  opacity: 0.85;
}

Your reusable button is now styled globally.

---

🧱 Step 3 — Include the Button Snippet in Any Section

Inside any section file, use this include tag:

{% render 'button',
  text: section.settings.button_text,
  link: section.settings.button_link,
  bg_color: section.settings.button_bg,
  text_color: section.settings.button_color,
  radius: section.settings.button_radius,
  padding: section.settings.button_padding
%}

The snippet now uses whatever settings you pass in.

---

🧱 Step 4 — Add Button Settings to a Section Schema

Inside your section schema, add:

{
  "type": "text",
  "id": "button_text",
  "label": "Button Text",
  "default": "Learn More"
},
{
  "type": "url",
  "id": "button_link",
  "label": "Button Link"
},
{
  "type": "color",
  "id": "button_bg",
  "label": "Button Background",
  "default": "#111"
},
{
  "type": "color",
  "id": "button_color",
  "label": "Button Text Color",
  "default": "#ffffff"
},
{
  "type": "range",
  "id": "button_radius",
  "label": "Button Radius",
  "min": 0,
  "max": 30,
  "default": 6
},
{
  "type": "text",
  "id": "button_padding",
  "label": "Button Padding",
  "default": "14px 24px"
}

The merchant now controls all aspects of the button.

---

🧱 Step 5 — Create a Reusable Icon Snippet

Create another snippet:

snippets/icon.liquid

Flexible icon code:

<span 
  class="reusable-icon"
  style="
    font-size: {{ size | default: '24px' }};
    color: {{ color | default: 'inherit' }};
  "
>
  {{ icon | default: '⭐' }}
</span>

Supports emoji, text, or inline SVG.

---

🧱 Step 6 — Include Icons Anywhere

{% render 'icon',
  icon: block.settings.icon,
  size: block.settings.icon_size,
  color: block.settings.icon_color
%}

Works inside blocks, sections, or snippets.

---

🧱 Step 7 — Add Icon Settings to a Block

Inside block settings:

{
  "type": "text",
  "id": "icon",
  "label": "Icon (emoji or SVG)",
  "default": "🔥"
},
{
  "type": "range",
  "id": "icon_size",
  "label": "Icon Size",
  "min": 16,
  "max": 80,
  "default": 32
},
{
  "type": "color",
  "id": "icon_color",
  "label": "Icon Color",
  "default": "#000"
}

This allows dynamic icon layouts.

---

🚀 Final Result

You now have:

• A reusable global button snippet
• A reusable icon snippet
• Full Theme Editor customization of buttons/icons
• Cleaner code inside your sections
• A scalable UI system you can use across your whole theme

This approach is used in professional Shopify themes to keep code maintainable and flexible.

---