Knowledge Base

Log into your BigCommerce storefront

Navigate to “apps” using the left-hand side navigation menu

Select marketplace, and follow the CTA to direct you to the app marketplace.

Search for “Metafields Editor” and look for the Groove G in a blue circle. 

Once you've found it, click on the app listing page, then “Get this App” 

Log in to your BigCommerce account, and if you have multiple stores, select the store you want to install the app
to using the dropdown menu. 

On the next page, click “Install”. Then, on the following page, “Confirm”.

Once the app has been installed, you will be required to fill out a one-time signup form before getting into the app.

Inside the app, you will see a complete list of all products inside of your store

Select a product, and click on the product’s title

Create a metafield for it by clicking and filling out the required fields

Click “Save” at the bottom of the page  

Note: It doesn’t matter what you type here now, as it can always be changed later. This is going to act as
our test metafield when modifying our theme files to ensure that it is working properly.

Before making any changes, we recommend backing up your existing theme files. 

The easiest way to do this is to Duplicate the theme file by navigating to Channels > Themes> Advanced >
then “Make A Copy”. 

Rename it so that you can remember that the duplicate is your modified metafields theme file. 

We are doing this on a fairly simple Cornerstone site for demonstration purposes.

Note: this updated theme file won’t receive automatic updates from BigCommerce. This doesn’t
matter for most merchants, but we wanted to let you know.

Note: It’s important to understand that although you have created a metafield, you have not instructed
your BigCommerce store to do anything with the information, such as displaying it, on any pages. In the
app’s documentation, we have provided code examples for products] and category pages that will get
you started. 

Open the BigCommerce code editor by navigating to advanced > Edit Theme Files.  

Navigate to the theme file you want to modify. In our case, we are going to choose product.html.

Once you’ve opened the theme file, paste the code snippet in the location shown.

Publish your changes, refresh the product’s listing page, and check out how it looks. 

You may need to make some changes at this point, but they should be minor. 

If you are having difficulties setting up your theme files correctly, reach out to the team here at Groove
Commerce by clicking the CTA at the bottom of the app and we would be happy to assist

If all else fails, you can always restore your previous theme files by navigating back to Channels, Themes, and
restore your original File

Now that your theme files are displaying the desired metafields you can enter in the rest of your metafields data

using the Metafields Editor app

Moving forward, all metafields data can be managed inside of the app easily