Headless Shopify and Kirby website

The CMS Questions
1

We’re currently using Snipcart for the shop on our Kirby website. But are thinking of moving to Shopify and continuing with the Kirby site.

I presume Kirby will pull product data from Shopify and then send buyers to Shopify’s carts/checkouts?

I presume this is easy enough to do in Kirby?
Will it require a plugin? There is a Shopify plugin, but it doesn’t work in Kirby 5…

Any pointers gratefully received!

2

There are basically three options, having had to do this myself in the past.

  1. Integrate fully with shopify by setting up API routes and virtual pages in Kirby to display the products which is what the GitHub - tristantbg/kirby-shopify · GitHub plugin does. This can be quite alot of work and Shopify has habit of updating the API fairly frequiently so you need to keep on top of that going forward to ensure your API routes and Webhooks still work as expected. However, as you say that plugin is not longer maintained, with the authors reccomendation being to use 1. Kirby Kart by @bnomei instead
  2. Second approach could be to use the Shopify Buy Button which involves adding javascipt to the page with a special button that adds the product to the shopping basket and displays the payment steps hosting by Shopify. This would be less work and you can style things up to fit your design. Ive done this in the past and its kind of the bes tof both worlds.
  3. Option three - Do eveything in Shopify without actually integrating it into kirby! If you create a custom store template to match your websites design, you can run this on a subdomain such as store.yourwebsite.com since Shopify allows the uses of custom domains for your store, and users wont feel they have left your website. This option is potentially the easiest to implement initially and maintain going forward.

Just out of cuiousity - what are the reasons for moving away from Snipcart? Persionally ive found Snipcart to be a much easier shopping cart to integrate into Kirby and continue to maintain, certainly from a developers perspective.

1 Like
3

Thank you.

I think the client is considering Shopify because:
• They are having to calculate some delivery costs manually (for really heavy products) and we’re hoping Shopify can deal with it out of the box.
• They think it might be a more robust solution moving forward.
• Because it’s well known it might be a confidence thing.

  1. Do I have to use a plugin? I was thinking that rather than pulling the content from Kirby content files, I’d “simply” pull the content from Shopify in my templates?
  2. This approach sounds the same as Snipcart? All the product information lives in Kirby. With a Buy Button for the cart and checkout. I’m not sure that this would be an improvement on what we’ve got.
  3. This sounds interesting. But if we want to highlight some products on the homepage would we have to link to the Shopify content in the Kirby templates (like option 1)?

Many thanks

4

Kart has an basic/alpha Shopify provider that you could either extend or explain to me in more detail what you need it to do and I can look into it. Shopify - Kirby Kart
In regard to why you would want a plugin like Kart: If you want a session based shopping cart and have Kirby store orders or send emails.

5

I think we want Shopify to deal with all the e-commerce. So I think we “simply” need to link to the Shopify content in the Kirby templates to display the Shopify content in the front end.

I think we want Shopify to handle the session based shopping cart, store orders and send emails – not Kirby. This is new to me, but I don’t think we need the plugin?

6

Correct. what you then need is a way to retrieve the data from Shopify. See Content from an API | Kirby CMS

1 Like
7

Thank you - virtual content - looks like exactly what I need to do.

8

Is it possible to have content from Shopify and Kirby content files on the same page, like this?

<h1><?= $product['title'] ?></h1>          <!-- from Shopify -->
<p><?= $page->intro()->kirbytext() ?></p>  <!-- from Kirby -->

Without having to do this

Is this ‘merging’ content? All I want to do is have content from two sources on the same page – is this different from ‘merging’?

9

It depends on the setup. If your shopify content is implemented as virtual pages and the same page also has content in the file system, then you need to merge those sources, otherwise not.

10

Hi. Sounds good.

So we can have Kirby content from the file system and ‘virtual’ content from Shopify on the same page/template.

Are there any drawbacks to this approach?

I guess one is the client will need to add products to Shopify AND create corresponding Kirby pages which will contain the Shopify e-commerce product info and the Kirby editorial content. But as there are probably only 20 products it shouldn’t be a deal breaker.