gatsby-shopify-starter
gatsby-shopify-starter copied to clipboard
AlexanderProd
retrieve custom fields/images from shopify
hey,
Sorry if this might be out of scope of your project (which is great btw, thanks). I have your project running locally, but what I don't understand is how to get non product data i.e. images and general text etc. I want this available for the client to change as opposed to hardcoding it in gatsby. Is there an approach to create something like wordpress ACF fields and images in pages in shopify and then retrieve them via graphQL. Or some other option? All the examples I can see are using separate CMSs for other content/images of the site besides products, but this seems a bonkers approach if you are already using Shopify (and is going to increase costs, probably annoy my client).
cheers david
Hey,
First of all I’m glad you like my project. I’ve actually thought about that myself as well haven’t researched it further though. As far as I know you can query the blogposts hosted on Shopify with the gatsby-source-shopify plugin other than that I’m not sure. I think it’s usual to either hardcore images and other static assets not controlled by Shopify or use a second CMS when the project is bigger. Another option might be to use the shopify api directly which could give you access to the files hosted in your Shopify.
There are metafields associated to each node of a shop which can be used in the way that I think you're looking for in reference to Wordpress ACF fields. These can be set using the bulk editor by your client, or via API and come with the associated node (or a metafield editor app). So if you set one at the shop level, when you fetch the shop using GraphQL -- it comes with it.
I can make a PR using the care instructions from https://shopify.github.io/liquid-code-examples/example/product-metafields but using gatsby to query it specifically and display on product page.
@melindavoo Thanks for your help, I didn’t know about metafields on Shopify but it looks pretty good and exactly like what @cordial is looking for. I don’t think we should include it in the starter though since it’s not something that’s included in Shopify by default since you need a third party app for it.
This sounds like what I am looking for yes! A PR would be awesome if you can do that (just to give one example pattern).
@AlexanderProd a third party app isn't necessary, they can be edited in the bulk editor. The fields are there, but because they are used for the purposes of customization, they're not exposed directly in the product and variant UI on Shopify. It kinda makes sense, they don't want to spend time supporting customizations they know nothing about, but instead they provide the mechanisms. @cordial what is a good example? Would the washing/care instructions example fit?
It's still a good thing to consider even if ultimately it's not starter material, which I can understand. But I've yet to work on one of these that doesn't have or need more fields coming from GraphQL with a product or variant. And the cool part about them is they can be a JSON object, boolean, text or number. With JSON that ends up being kind of nice.
My needs are more relating to outside the product e.g. I wanted to have pages that exposed custom fields through GraphQL so I could build up what are effectively page templates like in ACF/WP. Also SEO fields for pages..Although I imagine I'd need the above too. Also, I'd like to expose the navigation fields via GraphQL, so that clients can change it without code needing to be changed..
I can only guess without specifics, but given what you're saying (and my lack of memory regarding ACF+WP) I don't think meta fields will be the answer because they are really for data and not content management.
If you want an editing interface for your client to manage content, you may want to look at using Shopify headless along with something like contentful.io, contentstack, ghostcms, or statamic. Those are content APIs that play nicely with Gatsby and I believe most of them have starters, though I've not tried the statamic one.
Then you can stitch those queries together when creating pages with gatsby. This is basically what @AlexanderProd was getting at in his orig response.
@cordial could this be want you are looking for https://www.zauberware.com/en/articles/2019/setup-and-use-shopify-metafields-in-your-custom-storefront ? I've used this article to exposing metafields from Shopify and this exact starter.
As for the navigation field, you can't. I've search into this. You can only get them through Liquid. I had to resort in using Prismic, not ideal, but ok.
Thanks! I will give the article a read. did you mean you've done this in a newer version of the starter or just generally?