Skip to main content

How do I connect Shopify?

Pro

We provide our own Shopify app. This makes it easy to integrate a configurator into your Shopify store.

Install app

Install our Shopify app from the App Store as usual:

https://apps.shopify.com/k3-product-configurator?locale=de

You will be redirected to K3 and register there.

Create and book configurator

You can create a configurator immediately. Start with one of our templates or create your own configurator. Our Videokurs is a good place to start.

You can test and set up the configurator free of charge.

When you are ready, book the PRO license so that you can connect to Shopify:

  • In the editor, click on
    Loading...
    and select the Pro license.
  • You will now be redirected to the Shopify payment page. The K3 license is collected as normal via the Shopify invoice.

Connect store

You can now add the configurator to your store.

In preparation, veröffentlichen the configurator.

This is followed by the actual connection:

  • Open the editor of your configurator.
  • Click on
    Loading...
    in the sidebar.
  • Switch to the Shop tab.
  • Click directly on "Connect now" in the Shopify app.
  • The Web address of the shop is already entered.
  • Normally, activate Should the articles be imported from the shop. You can search for products using these Shopify attributes: collection_id, created_at_max, created_at_min, fields, handle, ids, limit, presentment_currencies, product_type, published_at_max, published_at_min, published_status, since_id, status, title, updated_at_max, updated_at_min, vendor
  • You have the option of creating each configuration in Shopify as a new article. If you want to do this, select Should the articles be summarized in the order? and assign a name for the article. If you leave the field empty, this name will be used: Ihre Bestellung {code} These two variable parts can be used in this name:
    • {code}: The unique code of the configuration.
    • {link}: A link back to the configuration.
  • Click on
    Loading...
    .
  • The import may take a moment. You will then receive a success message.

If you have imported articles, you can now also in Ihrem Konfigurator verwenden.

Publish the configurator again.

Integrate configurator in the store

Our Shopify app provides blocks with which you can display a configurator directly in your store directly in your shop.

All blocks start the configurator with a Inspiration, which you can define in various ways.

  • If you want to display the configurator on product pages, you can store a separate inspiration for each product store a separate inspiration for each product
    • To do this, create the k3-configurator.inspiration meta field on your products.
      • Go to Settings > Custom Data > Products
      • Click on
        Loading...
      • Enter k3-configurator.inspiration under Namespace and key.
      • Select a name and "Single line text" as the type.
      • Click on
        Loading...
    • Enter the inspiration to start with for each product.
  • However, you can also start with a defined inspiration on all pages.

The easiest way to add the configurator is directly from the "Shop" tab under Options. Simply click on

Loading...
. This will insert the first of the blocks described below on the start page of your current Shopify theme.

However, you can also do this in other places by switching to your Shopify store and going to Sales Channels > Online Store > Themes. Here, click on

Loading...
for your current theme.

Navigate to the page on which you want to insert the configurator (or stay directly on the home page).

Now select the point where you want to insert the configurator either in the tree view on the left or directly on the page. Click on the "+" symbol or on "Add block" and then on the "Apps" tab. Depending on which page you are on, you will now be offered the following blocks. Select one to insert it.

  • Embedded Fixed Configurator: Here the configurator (technically: as an IFrame) is inserted directly into the store. You can enter the height of the configurator in pixels and the inspiration to start with.
  • Fixed Configurator Link: A link is inserted here, the configurator opens in a new tab. You can enter the label of the link and the inspiration to start with.
  • Embedded Product Configurator: Only on product pages. Here the configurator (technically: as an IFrame) is inserted directly into the store. You can enter the height of the configurator in pixels. The inspiration is taken from the k3-configurator.inspiration meta field of the product.
  • Product Configurator Link: Only on product pages. A link is inserted here, the configurator opens in a new tab. You can enter the label of the link. The inspiration is taken from the k3-configurator.inspiration meta field of the product.