Accentuate Custom Fields
  • Welcome!
  • Introduction
    • Getting started with ACF
    • Field scopes
    • How to show fields in your storefront
  • Dashboard
    • Reference Manager
      • Creating a new reference within Reference Manager
    • Filter & Group
      • Filter editor
      • Filter usage
    • Activity log
    • App settings
  • Field Definitions
    • Fields & Sections
    • Deciding on a field type
    • ACF Field types
      • Text
      • Markdown text
      • HTML
      • Checkbox
      • Selection
      • Tags
      • Number
      • Date
      • Color
      • Media v1 (legacy)
      • Media v2
      • Custom Object (JSON)
      • Multi-language Text
      • Reference fields
      • References to Global fields
    • Shopify Field types
      • Shopify » Single line text
      • Shopify » Multi-line text
      • Shopify » Boolean
      • Shopify » Color
      • Shopify » Custom objects (JSON)
      • Shopify » URL
      • Shopify » Date
      • Shopify » Date and Time
      • Shopify » Integer
      • Shopify » Decimal
      • Shopify » Weight
      • Shopify » Volume
      • Shopify » Dimensions
      • Shopify » Reference fields
    • Automatic tagging
    • Large sets
    • Field contexts
    • Field context filters
    • Copy and paste fields
    • Change field name and type
    • Import existing fields
    • Linking multiple stores
  • The Editor
    • Using the editor
    • Promote fields to sidebar
    • Layouts
    • Hide from search
    • Repeatable fields
    • Version control
    • Update value on order creation
  • Bulk Import & Export
    • Export custom field values
    • Import custom field values
    • Metaobject export / import
  • METAOBJECTS
    • What are Metaobjects?
    • Metaobject Definitions
    • Metaobject instances / values
    • Displaying Metaobjects on your storefront
    • Metaobject export / import
  • THEME EXTENSIONS
    • SEO keywords
    • Sticky promo bar
    • Products promotion
  • Liquid Guides
    • Learning Liquid
    • Resize & crop images
    • Check for empty values
    • Access field definitions
    • Order notifications
    • Allow customers to change their field values
  • OTHER
    • Webhooks
    • API
      • Access to custom fields
      • Endpoints
  • Help
    • FAQ
      • Why are one of my products no longer showing in my reference field?
      • I have multiple products/variants with the same name
      • How do I make changes to my field values in bulk?
      • I added a new field definition but it is not showing in my storefront
      • How do I copy my field setup to another store?
      • My fields are still showing after I have deleted their field definition
      • Why are none of my fields showing in the editor?
      • My newly created object in Shopify is not available in ACF
      • Reference lists are empty?
      • Why am I seeing a "value cannot exceed 100,000 characters" error when saving?
      • Why can't I name my field "first", "last" or "size"?
    • Need help?
  • Product
    • Changelog
    • Feedback & Suggestions
Powered by GitBook
On this page
  • Showing your custom fields
  • Example
  1. Introduction

How to show fields in your storefront

PreviousField scopesNextReference Manager

Last updated 10 months ago

Showing your custom fields

To actually show your custom fields' values on your storefront, you need to edit your Shopify theme. Your theme determines where and how various Shopify bits and pieces go on which pages. "Bits and pieces" also include your new custom fields a.k.a Metafields. There are several ways to edit a theme, but the most straightforward way is to use the built-in theme editor in your Shopify admin:

If you click on "Edit code" under the "Actions" button, you'll be taken to the theme editor.

Example

In this example, we have created a "Washing Instructions" HTML type field for products called accentuate.washing_instructions (namespace-dot-name syntax) and we want to display it below the product description already present in the theme.

Open your theme editor and it looks something like this:

Click on the product.liquid file under Templates:

This file determines the overall structure of how a product is displayed on your storefront and we can see that it is comprised of a single section called product-template. So we find the product-template.liquid file under Sections and can now see a bunch of HTML code mixed with Liquid instructions: In this file, we need to find where the display of the product's description is handled. In our example, this is in lines 158-160:

We don't change how the product description is displayed but need to add in our new field, but only where there actually is something to display.

Add the following code:

{% if product.metafields.accentuate.washing_instructions %}
 <div>
   {{ product.metafields.accentuate.washing_instructions }}  
  </div>
{% endif %}

making the final code look like this:

Save your changes and that's it! Your products now show washing instructions where these are available.

Editing a theme requires some proficiency with HTML/CSS as well as the templating language. If you are not comfortable doing this and do not have a developer on hand, we can recommend getting in touch with an ACF Expert or a . Either way will get you connected with skilled Shopify developers in no time.

As you know, you can choose from a wide range of themes from the Shopify Theme Store and also have a given theme customized to your specific needs. Or you can have a theme completely custom-built for your store. As a result, every theme structure is different and every one of our customers' field setups and needs are different. In this help center, we provide you with small general snippets of code as examples of how to use Shopify Metafields in different contexts and leave the actual implementation details (theme changes) up to you as the store owner and/or your developers. Please see Shopify's article on the subject. Too specific and detailed instructions for which theme files you should edit in your theme could potentially be misleading, but we'll give a simple example here anyway. Just note, that your theme's list of files and the contents of those will almost certainly be different from our examples but the overall principle is the same.

Before making any changes, it is a good idea to to create a backup copy. This makes it easy to discard your changes and start again if you need to

Liquid
Shopify Expert
Editing theme code
duplicate your theme