To display a product label using a Metafield in Shopify 2.0
- Open the “Products” area of your Shopify admin.
- You can either create a new product or decide which product you want to put the label on.
- Click on “Metafields” in the “Organization” section by scrolling down.
- To add a new Metafield, click the “Add fields” button.
- For the Metafield, enter the following information:
- Namespace: This is a unique identifier for your Metafields. You can use your store name or a custom value.
- Key: A name for the specific Metafield you’re creating. For example, “label” or “product_label”.
- Value Type: Select “String” if your label is plain text or “HTML” if your label contains HTML markup.
- Value: Enter the value you want to assign to the Metafield, which will be the label text or HTML.
- Save the Metafield.
- Now, you can modify your Liquid code to display the label on the product card. Locate the relevant section file (e.g., “product-card.liquid” or “product-grid-item.liquid”) in your theme editor.
- Inside the section file, find the appropriate place where you want to display the label, such as below the product title or above the price.
- Add the following Liquid code to retrieve and display the Metafield value:
{% if product.metafields.namespace.key %}
<span class="product-label">{{ product.metafields.namespace.key }}</span>
{% endif %}
Replace “namespace” with the actual namespace you used when creating the Metafield, and “key” with the specific key you assigned to the Metafield.
Customize the HTML and CSS classes within the “product-label” span element to style the label according to your design.
Save your changes, and the product label from the Metafield will be displayed on the product card. Repeat these steps for other product cards or sections where you want to display the label.
