GUIDE: How to add a price prefix to grid items

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

4. On the product metafield page click Add definition

5. Create a product metafield with the following details:

• Name: Price Prefix

• Namespace and key: custom.price_prefix

• Type: text

• One value

6. Hit save

7. Find a product you would like to prefix the price of in Shopify admin under products

8. Scroll to the bottom of the product page to where metafields are set. Add your "From" text and save.

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".

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

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.

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.

5. Search the file for price-item--regular. We are going to output our code block before the regular price.

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

{% if product.metafields.custom.price_prefix.value != blank %}
  <span class="custom-price-prefix">#{{ product.metafields.custom.price_prefix.value }}</span>
{% endif %}

7. Search the file for price-item--sale.

8. Copy and paste the same code above the price-item--sale

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.

Common themes product grid item snippet names

As of June 2024

{% if quick_add == 'standard' %}

card_product.tags

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

product.tags

{%- if show_quick_buy -%}

card_product.tags

{%- if settings.quick_add_enable or settings.quick_shop_enable -%}

product.tags

{%- if instant_add_button %}

product.tags

{%- if quick_shop_enable -%}

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!

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 [email protected]

Happy coding, and thanks for teaming up with Biscuits Bundles!

​