How to Display "Starts At" Pricing in Shopify

As a Shopify Web Designer, one request I recently got was to show “Starts at” before the price of products, especially for products with variants that change the price.

There might be an app you can install, but I personally try to limit unneccesary apps if possible. Shopify doesn’t offer a built-in toggle for this, but I'm here to show you a clean and reliable solution using a small amount of CSS.

When This Works Best

This approach works great when:

  • Your product has multiple variants with different prices
  • You want a simple “Starts at” label without custom Liquid logic
  • You want a solution that’s easy to maintain and theme-safe

‍

Add CSS to global.css

Most modern Shopify themes (like Dawn) use a global.css file. This is where you’ll add the styling.

Step 1: Open Your Theme Code

  1. Go to Online Store → Themes
  2. Click ••• → Edit code
  3. Open Assets → global.css

‍

Step 2: Add the CSS

.price::before {
 content: "Starts at ";
}

This uses the CSS ::before pseudo-element to inject text before the price without modifying Shopify’s Liquid files.

‍

Why You Can’t Use Page-Level CSS in Shopify

You might be tempted to add custom CSS through the theme editor’s page or section settings. Unfortunately, Shopify restricts pseudo-elements like ::before in those fields, and you’ll see an error if you try to add the "content" attribute.

To do this properly, you’ll need to edit the theme’s CSS file directly.

‍

Need Help Setting This Up?

If you’d rather not dig into your theme code, you can hire me for on-demand hourly Shopify support. I can set this up safely, make it conditional if needed, and ensure it works perfectly with your theme without you touching a single line of code.