How to Get and Render Metafield Type File from a Shopify Metaobject

Understanding File Metafields in Shopify Metaobjects Shopify allows merchants and developers to store additional structured data using metafields. Metaobjects, a more advanced type of metafield, enable the storage of reusable and structured content across a Shopify store. One common use case is storing file references such as PDFs, images, or other downloadable assets within a […]

How to Use Shopify Metaobjects as Global Variables

I recently worked on a Shopify store that required displaying product prices only during valid sales periods, defined by start and end dates. To achieve this without configuring dates for each product manually, I used Shopify Metaobjects. Metaobjects are not natively accessible globally across a theme. They require explicit linking through the Theme Customizer or […]

Style Specific Product Tags in Shopify Product Pages

I had a client request for a Padel store in the Netherlands. They needed to get and highlight specific product tags from the back-end, on the product page front-end —but not all tags. The focus was on just “new in,” “best sellers,” and “sale”—key tags that help customers identify featured products at a glance. The […]

How to Display Dynamic Product Highlights in Shopify with Metaobjects

In a recent Shopify project, I needed to create dynamic “Product Highlights” on the product page template. The goal was to add customizable highlights, like unique features or benefits, that would display specific metafields such as titles, descriptions, and icons. Since each product might have different highlights, I turned to Shopify metaobjects, and linked them […]

How to Add Custom Fonts in Shopify Using Preload and Liquid

When you’re building or customizing a Shopify theme, adding custom fonts can be a key factor in achieving the desired look and feel of the store. However, simply adding fonts isn’t always enough—if they load slowly, it can negatively impact the user experience. One way to improve performance is by preloading fonts and using Liquid […]

Add Percentage Discount in Shopify Dawn Theme

Recently, I encountered a situation while working with Shopify’s Dawn theme (Version 15.1.0) where I needed to display a percentage discount on the product cards in the Featured Collection. While Shopify provides built-in sale badges, they don’t show percentage-based discounts by default, which is something I really wanted to add. In this post, I’ll walk […]

Dynamic Body Classes for Custom Shopify Styling

When working on Shopify themes, developers often need to apply different styles to various pages across the store. For example, product pages, collection pages, and the homepage might all require unique CSS rules. In this guide, we’ll explore how to dynamically add body classes based on the page template or URL, giving you more control […]

Optimize Shopify CSS/JS Loading with Conditional Logic

Efficiently managing how CSS and JavaScript files are loaded on your Shopify store is crucial for improving performance and ensuring that only the necessary assets are loaded on each page. As Shopify developers, we know that loading unnecessary resources on every page leads to slower load times, which not only affects user experience and SEO […]

To top