Installation Of The Metafields Editor by Groove Commerce App
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.
Initial Setup For Testing
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.
Backing Up Current Theme
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.
Product Detail Page Theme Modification
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
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