Quick Start
Learn how you can create metafields on the storefront.
Idea
The idea is pretty simple, FieldsRaven is exposing the Metafields API on the storefront through a Shopify app proxy so you may take full advantage of creating (or updating) metafields on the storefront.
As a developer you just need to write in Liquid, JS and FieldsRaven will handle what's under the hood to help you unlock the full potential of Shopify themes.
I built FieldsRaven to be a storefront metafields kit for Shopify.
Make sure on the storefront that FieldsRaven requests are to be sent by a logged-in customers, it adds an extra layer of security.
I installed the app, now what?
When FieldsRaven app is installed successfully on a Shopify store, there are a couple of steps you need to do to be able to start creating/updating metafields.
Step 1
Create a new Shopify theme snippet named raven-mac-gen.liquid
, copy & paste the below code snippet into the new snippet in Shopify admin and don't forget to save! (Screen recording)
Step 2
Create a Raven
in FieldsRaven app. (Screen recording)
Make your first request
Now that you created a Raven
to carry messages and added the code snippet to a theme, it's time to create/update your first metafield.
The end-point that makes this possible is this end-point: /apps/raven/create_update_metafield
which expects an object with the following attributes: raven_id, resource_id, value, raven_mac
.
Create/update metafield.
PUT
/apps/raven/create_metafield
All parameters are expected to be wrapped in an object
Request Body
Name | Type | Description |
---|---|---|
raven_id* | string | |
resource_id* | string | If a shop metafield is being created/updated the value must be |
value* | string, number, json | metafield value |
raven_mac* | string | Message auth code, generated by |
All parameters are expected to be wrapped in an object
If you are creating a shop metafield resource_id
value should be shop
Storefront Kit
After installing the app, there should be a few App embeds
in your Customize > Theme settings > App embeds
.
For conveniance there is a Storefront Kit
which contains few a JavaScript function to create/update metafields.
The Storefront Kit
function will return a promise
, when the promise
is resolved it will return a JavaScript object
that you may hook into to check on the status of the request and update the UI if you wish.
Example for a successful request
Example for a failed request
Pre-built theme examples
At the moment there are two App embeds
examples to demo what might be built on top of FieldsRaven.
Birthday Popup: an example implementation for a customer birthday reward popup. (Screen recording). Learn more.
Sitemap and Search engines Hide/Show: an example implementation for sitemap/search engines to hide pages/templates from search results & sitemap (
nofollow
,noindex
). (Screen recording). Learn more.
Each of those App embeds
have settings, make sure to check them out.
Creating metafields on onload
onload
If you're using FieldsRaven storefront kit, the kit triggers a FieldsRaven:ready
event when it's loaded. So the following will do the trick.
If you'd rather not use FieldsRaven Storefront Kit, then this should do the trick:
Last updated