A Metafield Beginner Tried It! Displaying Ranks Without an App

Hi everyone! I'm Michiru, the director at GO RIDE!

When you're looking for a way to quickly see the condition of a pre-owned brand-name bag or accessory, isn't your first instinct to search for an app?

Actually, Shopify has an incredibly convenient feature called 'metafields' that allows you to freely add items using its built-in functionality.

This time, I'll share my experience as a complete beginner trying to implement a "brand rank display" without an app and completely free of charge!

First, create a section in the product management screen where you can enter the rank.

1. [Settings] > [Custom Data] > [Products] Open it.

2. [Add definition] Click here.

3. Name it "Brand Rank", type is [Single-line text] Select this option.

4. Save it!

Now we're ready.
Then, scroll all the way to the bottom of the editing screen for each product page,SEnter a rank such as "" or "A" and save it.
Using stars ⭐︎⭐︎⭐︎ to represent it is also easy to understand.

This time, we'll register a "handbag" as a test product.

If you scroll down the product registration screen, you will find a "Brand Rank" field added under the "Meta Fields" section, so enter the rank there.

Once you've created the box and put the contents inside, the next step is to display it in the store.
This is the most important point!

1. [Online Store] > [Customization] Open it.

2. Go to the product page editing screen, and from the menu on the left... [Add block] Select this option.

3. Add a "Text" block, and in the upper right corner of the input field... [Connect Dynamic Source] (small three-tiered icon) Click here.

4. Select the "Brand Rank" you just created.

5. Save it!

Once you've finished the settings, save them and check the preview.

"Wow, it's coming out!" The "Rank" set for each product page SThe words "Rank A" should be displayed automatically.
It's obvious, but it's a little satisfying when something you've set up yourself actually comes to fruition.

Based on my experience, there are three advantages to not using an app.

• Zero fixed costsYou can add features without worrying about monthly fees.

• The site won't become slow.Installing too many apps can slow down the display speed, but this one is safe.

• The design blends in well.Since it uses the theme's standard features, it's easy to achieve consistency in fonts and colors.

What impressed me the most this time was the "dynamic source" mechanism. 

The efficiency is amazing: "By changing just one setting, product A will automatically display content A, and product B will display content B." It's incredibly convenient, and once you experience this, you'll never want to go back to manually entering text!

This time it was just a simple text display, but if we apply this, we could do something much more interesting.

for example…

• Each rankChange the color of the text

• In a "foldable (accordion)" format similar to those found in paid themes, you can insert detailed product specifications using meta fields.

This too could probably be achieved with a little ingenuity (and a bit of Liquid code).

I'll tell you about that in my next challenge!