Quick Summary
If you’re working on a Shopify store and want to save time while keeping your code clean, snippets are the best solution. These small reusable codes help you avoid repeating the same elements on multiple pages.
From displaying a product badge to adding custom messages, snippets make your store more flexible and easier to manage. But if you’re new to them, adding and reusing snippets might seem confusing at first.
Don’t worry, whether you’re managing your store yourself or working with a Shopify web development company, this guide will break down how to add snippets in Shopify simply. So, let’s get started!
When working with Shopify themes, using snippet files is one of the cleanest and most efficient ways to reuse code. It helps keep your templates organized and makes updates much easier down the road.
Whether you’re adding a promo banner, a custom label, or a reusable block of HTML, snippets allow you to include that same content across multiple pages without repeating code manually. Follow these steps to add snippets in Shopify using a Liquid file:
Go to your Shopify admin dashboard and navigate to Online Store > Themes > Edit Code.
In the left sidebar, scroll to the Snippets folder. Click Add a new snippet.
Give the snippet a clear name, like promo-banner.
Now, Shopify will create a new file: snippets/promo-banner.liquid. Add your code inside the file. For example:
<!-- promo-banner.liquid -->
<div class="promo-banner">
<p>{{ message }}</p>
</div>
You can customize the HTML and use Liquid placeholders to make it dynamic.
To display your snippet in a theme file (like product.liquid/main-product.liquid, collection.liquid, or index.liquid), use the render tag:
As an explanatory process, here we will add this to the main-product.liquid on the top of the file code.
{% render 'promo-banner', message: 'Free Shipping on All Orders!' %}
Here’s What Makes Render Special:
Last but not least, we will check the website product page to see that the banner is properly rendered.
Pro Tip:
Keep your snippets focused, and avoid packing them with too much logic. If a snippet is doing too many things, consider breaking it into smaller pieces for easier maintenance.
Using snippet files is a smart way to build scalable Shopify themes. Once you get comfortable with this approach, you’ll find it easier to make changes and reuse components without touching every single template.
Not everyone is comfortable working with code, and the good news is – you don’t have to be. With tools like Shogun, you can build and manage pages visually while still enjoying the flexibility of reusable content blocks.
Snippets in page builder apps are essentially reusable content blocks. You can design a section once, save it as a snippet, and drop it into other pages whenever needed. This is especially useful for repeating banners, promotional blocks, testimonials, or custom call-to-action. Here’s a complete breakdown of how to add and reuse snippets in Shopify using Shogun.
Log in to your Shopify admin panel. Click on Apps, and then launch Shogun. This will open the main Shogun dashboard, where you can start managing or creating pages.
In the dashboard, hover over the “Build or Edit a Page” option. From the available dropdown, select “Browse Templates”.
You’ll now see a variety of pre-built page templates that suit different use cases, like landing pages, product pages, or promotional layouts.
Find a template that fits your design goal. Hover over the one you like, then click on “Choose Template” to proceed.
Using templates is a great way to speed up the design process, especially if you’re working on a tight deadline.
On the next screen “Create New Page from Scratch,” choose your desired page type. This gives you a base layout where you can add or edit content freely using Shogun’s drag-and-drop builder.
Clicking this will load the editor with the selected template. Give your page a relevant title to keep things organized inside your Shogun workspace.
Once the editor loads, browse through the content blocks. Find the section you want to reuse like a feature box, testimonial carousel, or newsletter sign-up area. Hover over it and click the Bookmark icon (this is the “Create Snippet” button).
A pop-up form will appear where you’ll need to:
Click on Create Snippet, and you’re done. The snippet is now stored and ready to be reused wherever needed across your store.
Once your snippet is saved, you can easily add it to any other page built with Shogun:
With Shogun, you can leverage a modular design with none of the coding hassles. It’s perfect for anyone who wants to speed up their workflow and keep content consistent across the store – all while staying completely in control.
While working with Shopify themes, it’s common to come across both snippets and sections. Though they share some similarities, they serve different purposes.
Both snippets and sections are reusable building blocks that help structure your store’s pages. For instance, a typical product page might include sections for the header, product details, reviews, and footer. These are modular and can be customized to fit your design. The main difference comes down to complexity and scope.
Another key difference is in file types:
Understanding when to use a snippet versus a section helps you build more efficient, organized, and scalable Shopify themes.
Snippets are super helpful for keeping your Shopify theme modular and clean. But to really make the most of them, you need to follow some smart habits.
These best practices will help you write code that’s easier to manage, update, and scale, especially useful as your store grows or if more people join your team.
Don’t name your snippets something like box.liquid, or thing.liquid. Instead, use names that tell you exactly what the snippet is about.
For example:
This makes your theme files easy to navigate, especially when you come back to them weeks later or when someone else is trying to understand the structure. Think of it as naming folders or files on your desktop. The clearer the name, the less guessing later.
Each snippet should do one thing only. If you’re using a snippet to render multiple sections or handle lots of logic, it’s time to break it into smaller parts.
For example, if a snippet handles both product badges and stock messages, split them:
This helps with debugging and updating later on. Smaller snippets are easier to read, easier to fix, and less likely to cause problems.
The main reason for using snippets is to avoid repeating the same code in multiple places. If you catch yourself copying and pasting the same block of Liquid code into several files, it’s time to turn it into a snippet.
Let’s say you’ve got a custom product label or a trust badge. Instead of rewriting it on every product page, make it a snippet and reuse it everywhere. It’ll save you time and reduce the chances of errors or inconsistencies.
Shopify now recommends using {% render %} instead of {% include %} for inserting snippets because render gives each snippet its own isolated scope.
That means variables won’t accidentally clash with other parts of your theme. Here’s an example of proper usage:
{% render 'product-badge', badge_text: 'Best Seller' %}
Avoid using include; it’s outdated and can cause more issues than it solves.
When using render, you can pass variables into the snippet. But only send what’s actually needed.
Avoid this:
{% render 'product-badge', badge_text: 'Best Seller', full_product: product, cart_items: cart.items %}
If your snippet only needs the badge text, just do the following:
{% render 'product-badge', badge_text: 'Best Seller' %}
This keeps your snippets lightweight and easier to manage. Less data passed = less confusion later.
If your snippet includes multiple dynamic elements or logic, drop in a few comments to explain what’s going on. For example:
{% comment %}
This block renders a badge if the product is tagged as "Best Seller"
{% endcomment %}
Comments are especially helpful when:
They don’t show up on the front end, but they save a lot of time on the backend.
Snippets are small pieces of reusable Liquid code used to simplify your theme structure. They help avoid repeating the same code across multiple files, keeping your theme clean and modular.
To add an event snippet (like a tracking or conversion snippet), go to your Shopify admin > Online Store > Themes > Edit Code. Open the appropriate file (like theme.liquid or checkout.liquid) and paste the event snippet where needed, usually before the closing </head> or </body> tag.
Shopify doesn’t allow rendering full sections inside snippets directly. Sections must be rendered in theme files using {% section ‘section-name’ %}. Snippets, however, can be used inside sections or templates using {% render ‘snippet-name’ %}.
Sections are larger, standalone components (like headers, footers, or product pages) with optional settings and drag-and-drop support. Snippets are smaller code blocks for specific tasks (like a star rating or a product badge) and can’t be used independently.
Go to Online Store > Themes > Edit Code. Under the “Snippets” folder, click “Add a new snippet”, give it a name, and click Create. Add your code inside the file. Then use {% render ‘snippet-name’ %} wherever you want to display it.
Snippets might seem like a small part of Shopify, but they can make a big difference in how your store runs behind the scenes. They help keep your code clean, reusable, and easier to manage, especially as your store grows.
Whether you’re adding them through the code editor or using page builder apps like Shogun, snippets give you the flexibility to build faster and smarter. And with just a few best practices, you can keep everything organized without the mess.
If you’re ever stuck or want a smoother setup, our Shopify development experts can help you. They’ll help you structure your theme right from the start. Let’s connect today and discuss your project!
Ankur Shah is a tech-savvy expert specializing in eCommerce solutions. With a deep understanding of WooCommerce and Shopify, he helps businesses optimize their online stores for success. Whether it's implementing new features or troubleshooting issues, Ankur is your go-to guy for all things eCommerce.
