Custom resources

Bringing a lightweight CMS to your BigCommerce store

BigCommerce metafields and shared metafields simplify content management by defining fields in advance.

However, sometimes you need just a bit more structure so that you can manage content in a single place.

For example, your products might have a Size Guide section which differs depending on whether it is a pair of Women's, Men's or Children's shoes.

If you were to manage this in metafields, the content would need to be duplicated. Managing size guides in Page Builder would also come with challenges.

Custom Resources brings a lightweight CMS to the BigCommerce platform. Add a new "Size Guide" resource and choose what fields it has. You can then create, update and delete size guides.

Once you've written your content, you can create a shared metafield on products of type "Size Guide". You will then be able to select a side guide for every product.

Your BigCommerce theme can then be updated to show the Size Guide.

Creating a Custom Resource

To create a new resource, open the app and press the "Add resource" button. The first step is to provide a name, e.g. Size Guide.

Adding fields to a custom resource

Once created, the resource (Size Guide) settings page is shown and you can begin adding fields to your size guide.

When creating a field, the following options are shown:

Creating a resource item

Now that the resource has fields, you can create your first entry, e.g. a Size Guide.

The form is generated based on the fields that were created in the previous step.

Continue adding as many items as you need.

Creating a shared metafield

To use your new resource items, go to Manage shared metafields of the native BigCommerce resource you would like to assign them to. In our Size Guide example, we want to assign these to products, so we go to Products within the app and choose Manage shared metafields.

Then, create a new shared product metafield called "Size Guide" and choose the new "Size Guide" content type.

You're now ready to assign custom resource items to the native BigCommerce resource item, i.e. assign a Size Guide to products.

Adding custom resources to your theme

There is some development required to use the custom resources within your theme. They are fetched along with your other shared metafields via a GraphQL query. This can be achieved through front matter or using a storefront AJAX request. See our guides for using metafields on the storefront.

All information about the custom resource will be available in JSON format and can be parsed with the JSONParse handlebars helper.

For example, to access the Size Guide on a product, first query the metafields:

---
gql: "query productMetafieldsById($productId: Int!) {
  site {
    product(entityId: $productId) {
      entityId
      name
      metafields(
        namespace: \"shared\"
        keys: [\"size_guide\"]
      ) {
	edges {
	  node {
            key
            value
          }
        }
      }
    }
  }
}
"
---

To show the Size Guide HTML on the page, you would then add the following to your theme:

{{#each gql.data.site.product.metafields.edges}}
    {{#if node.key '===' "size_guide" }}         
        {{#JSONparse node.value}}
            {{{ guide }}}
        {{/JSONparse}}
    {{/if}}
{{/each}}