Kirby Shopify Plugin

You can still use the kirby shopify plugin from tristan however. It is functional and has been updated for Kirby V4 already. It is not heavily maintained but does the job :wink:

I just tested and the Starter Plan still exists ! But the percentage rates of Shopify are quite high…

1 Like

Yes, that’s what I also thought. It would be super interesting to learn about a possible integration with that plan :slightly_smiling_face:

Hi there !
Many thanks @tristantbg for this plugin!

I’ve been trying to use it and be conscientious on the set up but I encounter some issues :

1 - Firstly I can’t display the featured images in my “cards” layout in my panel.
This is how I did in site/plugins/kirby-shopify/src/blueprints/shopify.products.yml :

2 - Shopify content update (in production) doesn’t work. Locally, I empty the cache manually (by deleting the content from /site/cache). In production, if I modify a product on Shopify my webhook doesn’t seem to work. Yet I think I’ve done everything right.


Any recommendations ? I confess I’m a bit stumped.

Ok my bad… I’ve found the solution :sweat_smile: for the 2nd issue. The .env variable name was supposed to be SHOPIFY_APP_SECRET .

Hi,

For the first issue, it is not possible to display an external image URL within Kirby (at least for now).

Best

2 Likes

I don’t check that often, but it looks like Shopify has updated their buy button app. Here’s a screenshot of the config for a button:

Going to try to do both methods: plugin method and manual method.

@tristantbg
Hi Tristan and all,

I’m having trouble sorting the products using the Kirby Panel.

From what I can tell, the order is based on the Product ID generated by Shopify, which is also used as the folder name in the content section, e.g. 8530067931978_product-title.

Since it’s not always handy to have the products in the order they were added to Shopify, like if I want to make an old product first in the list, I need to sort the products using the Kirby Panel, then show this order on the frontend.

Since the product ID is used in the folder name for each product, when I drag and drop to change the order in the Kirby Panel, it creates new numbered folders to reflect the panel order, however the content is no longer in the product folder.

e.g. it creates 1_product-title, while the content stays in 8530067931978_product-title. Since they are no longer synced, it breaks and doesn’t show the products on the front end.

Is there a way sortBy that can be added to the shopify.products.yml blueprint to allow the sorting to be done in the panel and not break the plugin?

I’m using the default version:

title: Products
options:
  delete: false
  changeTemplate: false
  changeStatus: true
sections:
  products:
    headline: Products
    type: pages
    info: "{{ page.handle }}"
    template: shopify.product

An easy way is to create collections with a blueprint like this :

title: Collection
tabs:
  infos:
    label: Infos
    icon: text
    columns:
      - width: 3/4
        sections:
          infos:
            type: fields
            fields:
              products:
                type: pages
                query: kirby.collection('kirby-shopify.products')
                subpages: false
              text:
                label: Description
                type: textarea
                uploads: file
                buttons:
                  - italic
                  - link
                  - email
                  - file
      - width: 1/4
        sections:
          thumbnail:
            type: fields
            fields:
              autoid:
                type: hidden
                translate: false
              featured:
                label: Featured image
                type: files
                multiple: false
                query: page.files.template('image')
                uploads: image
  content:
    extends: sections/blocks
  files:
    icon: file
    sections:
      files:
        type: files
        layout: list
        template: file
      images:
        type: files
        layout: cards
        template: image
        size: tiny

Then you can select/sort products in a products pages field.

Ok thank you, I will try it. So this would replace the current shopify.products.yml blueprint?

No it is another blueprint page where you can select products using the shopify.products template that stays untouched

Thank you for this @tristantbg.

I was able to use shopify.products.yml to select the products from Shopify, which allows them to be sorted and show in the front end.

This is the file structure that I could use to make it work:

content/
├── shop/
│   ├── shopify.products.txt         # Blueprint: 'shopify.products.yml' for listing the sorted Shopify products on the Shop page
│   ├── 8530067931978_product-title/
│   │   └── shopify.product.txt      # Blueprint: 'shopify.product.yml' for an individual product
│   ├── 8530067931979_other-product/
│       └── shopify.product.txt      # Blueprint: 'shopify.product.yml' for another product
site/
├── collections/
│   └── shopify.products.php         # PHP file to define 'kirby.collection('shopify.products')'
├── blueprints/
│   └── pages/
│       ├── shopify.products.yml     # Blueprint for listing and sorting Shopify products in the Shop
│       ├── shopify.product.yml      # Blueprint for individual products
│       ├── etc

With this approach, there are two questions that came up.

  1. After selecting the Shopify product in shopify.products.yml, by default it adds the product to the last in the list. Is there a way to automatically add most recently selected product to be first in the list by default?

This is helpful since if the shop includes many products (e.g. more than 100), it’s difficult to drag the newest product to be shown first.

  1. When there are a lot of products (e.g. more than 100), the select dialog box is very slow to show the products that can be selected. Is there any way that can be deal with that?

Thanks for the help!

@tristantbg
Hi again Tristan,

I, as i’m sure many other users, received this email below from Shopify on 3 January regarding the Storefront and Admin Checkout API.

Will this affect the function of your plugin and does something need to be changed in existing sites using the plugin?

If so, could you please advise how everyone using the plugin can update the API to fit with the plugin?

many thanks for the help!

On April 1, 2025, the Checkout APIs will be shut off and will no longer function.

You currently have the following application installed on your Shopify store that uses the Storefront or Admin Checkout API.

All impacted apps need to migrate to the Storefront Cart API before April 1, 2025. After this date, experiences built with the Checkout APIs, such as creating a checkout and adding items to checkout, will no longer function.

Act now:

Sincerely,

Shopify

Hi @RM1234567890 ,

The plugin doesn’t use the Checkout API so it should be fine.

I’m not sure I’ll continue to update this plugin because Shopify offers plenty of new tools like Metafields, Video upload, Metaobjects… and there is less advantages to use a Kirby Shopify combo !

Best

Thanks for the quick reply.

Oh, shame to hear the plugin won’t be updated!

It’s still really handy to use it in combination with the Kirby backend which is so much more flexible. Especially for a site that includes much more than just a shop.