--- title: "GUIDE: How to add a price prefix to grid items" description: "Learn how to add 'From' or 'Starting from' to your product grid item prices" url: https://help.biscuitsbundles.com/en/articles/9830691-guide-how-to-add-a-price-prefix-to-grid-items collection: "Customisation Guides" updated: 2026-07-08 language: en --- # GUIDE: How to add a price prefix to grid items Learn how to add 'From' or 'Starting from' to your product grid item prices ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_5786.png) ## Customisation Guide In this guide we will update our store to have the ability to output a prefix on any product we set a prefix metafield on. **In this guide:** - We will create a product metafield for the prefix value. - We will duplicate our stores theme. - We will edit our stores theme code to output the price prefix on product grid items. * * * ## Before we begin This guide involves editing theme code. If that is not your cup of tea feel free to reach out to the Biscuits Bundle team to help you out! * * * ## 1\. Create product metafield First we need to create a product metafield. This will hold what we want the prefix value to say for any product. 1. Open **Settings** in you Shopify store admin 2. Visit click **Custom data** in the left sidebar 3. Click **Products** ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_8053.png) 4\. On the product metafield page click **Add definition** ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_8840.png) 5\. Create a product metafield with the following details: - Name: Price Prefix - Namespace and key: custom.price\_prefix - Type: text - One value ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_4333.png) 6\. Hit **save** 7\. Find a product you would like to prefix the price of in Shopify admin under **products** ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_0645.png) 8\. Scroll to the bottom of the product page to where metafields are set. Add your "From" text and **save**. ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_6356.png) * * * ## 2\. Create a development theme First we will create a development theme so any changes we make **DON'T** appear on your live store until we have tested and are happy with them. Open Online Store > Themes in Shopify admin and click the three dot menu next to customise on your published theme, then choose "**duplicate**". ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_6747.jpg) Click the three dot menu on this copied theme and rename it i.e "Dawn | Biscuits Customisation" * * * ## 3\. Edit our stores code Now we need to find the correct snippet file to edit in your theme. Because every theme can be different, the file you edit for this step may vary a lot. We are using Dawn theme for the example today but we will provide example files for other common themes below. 1\. Click the three dots **...** on your new development theme and click **Edit code** 2\. Use the filter bar in the top left to search "**product**" and look inside the snippets folder ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_6921.png) In Dawn the snippet we are looking for is `card-product.liquid` You will know if you have the correct file by checking the top of the snippet for variables and a description explaining this file outputs the product card. Once you have the correct file we need to search for where the product price is output. 3\. Search for **price** within the file using **cmd+f** (ctl+f windows) In Dawn we find `{% render 'price'` , this is a snippet outputting price, so we need to open this file. ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_4465.png) 4\. Use the filter bar again and search **price** or whatever name snippet your theme is using to output price. If your theme isn't using a snippet you can skip this step and continue editing in the grid item file. ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_0325.png) 5\. Search the file for `price-item--regular`. We are going to output our code block before the regular price. ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_1941.png) This is line 82 in Dawn if your theme has no other customisations 6\. Copy and paste the following code above the `price-item--regular` ```javascript {% if product.metafields.custom.price_prefix.value != blank %} {{ product.metafields.custom.price_prefix.value }} {% endif %} ``` 7\. Search the file for `price-item--sale`. 8\. Copy and paste the same code above the `price-item--sale` ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_3316.png) This is line 104 in Dawn Now we will be outputting the "From" text on both sale and non sale items. 9\. Hit **save** 10\. In the top right corner hit "preview store" to view your theme in browser. ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_8237.png) ## Common themes product grid item snippet names _As of June 2024_

Theme name

Snippet file name

What to search for in the file
and the product variable

Dawn

card-product.liquid

JavaScript
{% if quick_add == 'standard' %}
JavaScript
card_product.tags

Prestige

product-card.liquid

JavaScript
{%- if show_quick_buy and product.available -%}
JavaScript
product.tags

Be Yours

card-product.liquid

JavaScript
{%- if show_quick_buy -%}
JavaScript
card_product.tags

Expanse

product-grid-item.liquid

JavaScript
{%- if settings.quick_add_enable or settings.quick_shop_enable -%}
JavaScript
product.tags

Pipeline

product-grid-item-variant.liquid

JavaScript
{%- if instant_add_button %}
JavaScript
product.tags

Impulse

product-grid-item.liquid

JavaScript
{%- if quick_shop_enable -%}
JavaScript
product.tags
Congrats if the prefix is outputting. Don't worry if it's not, you may have tried the wrong file. Retrace your steps and try outputting the code in another spot. ## 4\. Publish development theme Once you have tested your code changes on your development theme thoroughly, you can publish this theme to be live! ![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_9864.png) This will make your changes published and visible to your customers. * * * ## Conclusion Thats it! If you made it to the end successfully well done! If not, don't be afraid to reach out to the Biscuits Bundle team for help. **Stuck or got questions?** Use the chat widget below, or reach out to us at [hello@sundaelane.com](mailto:hello@sundaelane.com) Happy coding, and thanks for teaming up with Biscuits Bundles! ​