• 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
      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

  • Data Entry 

    • 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