Sampo
documentation

Advanced

General

If you have some basic HTML knowledge or are familiar with web development, the Advanced settings in the theme editor allow you to insert custom Liquid code into specific locations within your Shopify theme.

These settings are especially useful for adding custom scripts, widgets, or tracking codes without directly editing the theme's core files.

There are two customizable fields available:

  1. Custom liquid <head>:
    Code placed here is injected just before the closing </head> tag of your theme's HTML document.

  2. Custom liquid <body>:
    Code placed here is injected just before the closing </body> tag of your theme's HTML document.

This functionality enables you to easily extend your store's functionality, improve tracking, or add third-party integrations.

Examples of How to Use Custom Liquid Fields

The Custom liquid <head> and Custom liquid <body> fields allow you to add a variety of custom code to your Shopify theme. Here are some examples of the types of scripts and code you can use:

Custom liquid <head>

This section is ideal for adding code that should load early in the page rendering process. Some common uses include:

  • Tracking and Analytics: Add tracking scripts for tools like Google Analytics, Facebook Pixel, or other analytics and marketing platforms. These tools help you gather insights on visitor behavior and conversions.
  • SEO Enhancements: You can insert custom meta tags, title tags, or link tags that help improve search engine optimization (SEO) for your store.
  • Font or CSS Imports: If you need to load custom fonts from an external service (like Google Fonts) or reference additional CSS files, the <head> section is the best place for this.

Custom liquid <body>

The Custom liquid <body> section is best for code that you want to load after the page content, such as interactive features. Common uses include:

  • Third-Party Widgets: Add scripts for customer service widgets (like live chat or help desks), product review tools, or social media integrations.
  • Event Tracking: Place event tracking or custom analytics pixels here, such as tracking actions like button clicks or form submissions.

By using these fields, you can add any kind of script or HTML that enhances the functionality of your store, making it easier to integrate third-party tools, improve user experience, and track performance.

 

Additional Tips

  • Test Before Publishing: Always preview your changes in the theme editor to ensure your additions work correctly and don’t interfere with other theme functionalities.
  • Use Liquid Variables (Optional): If needed, you can use Shopify’s Liquid variables for dynamic data. For instance, you could reference the store name with {{ shop.name }} or display specific elements conditionally using {% if %} statements.
  • Avoid Overloading Scripts: Limit the number of external scripts to prevent slow page loading times, which can negatively impact user experience and SEO.