Skip to main content

How do I connect to Shopify?

Pro

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

Install the App​

Install our Shopify app from the App Store as usual:

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

You’ll be redirected to K3, where you’ll go through the normale Registrierung, including confirming your email address. K3 will note that you came via Shopify and will bill you through Shopify later.

Create and Purchase a Configurator​

You can create a configurator right away. Start with one of our templates or build your own configurator— the 3D templates are also available to you. Our Videokurs is a great place to start.

You can test and set up the configurator for free.

When you’re ready, purchase the PRO license so you can connect to Shopify:

  • In the editor, click
    Loading...
    and select the Pro license. The same licenses are available to you as they are to all other customers.
  • You’ll now be redirected to the Shopify payment page. The K3 license fee will be charged as usual via your Shopify invoice.

Connect Your Store​

Now you can add the configurator to your store.

To prepare, veröffentlichen the configurator.

Then follow these steps to connect it:

  • Open your configurator’s editor.
  • Click
    Loading...
    in the sidebar.
  • Switch to the Shop tab.
  • Click "Connect Now" directly next to the Shopify app.
  • The shop’s web address is already entered.
  • Normally, enable Should items be imported from the store?. 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 can specify whether features should be displayed in the shopping cart. Only attributes for which the "Display in confirmation, PDF, and store" option results in the attribute being displayed (either "always" or "As in the configurator") will be shown.
    • No: They are not displayed (default).
    • Visible: Attributes are displayed in the shopping cart and in the order.
    • Invisible: Attributes are displayed only in the order. Their entry begins with a "_". If the attribute has a key, that key is used.
    • With Komponenten-Merkmalen, each component is passed individually and numbered accordingly, e.g., "Accessory #1," "Accessory #2." If the list contains only one component, the number is omitted. If the "Show values from inner attributes" option is enabled for the attribute, these inner attributes appear in parentheses after it, e.g., "Accessory #1: Rain sensor (Color: Red, Size: L)".
  • You have the option to create each configuration as a new product in Shopify. If you wish to do so, select Should the products be combined in the order? and assign a name to the product. You can also specify which SKU the product should have. If you leave the field blank, this name will be used: Ihre Bestellung {code} Variable parts can be used in this name:
    • {code}: The unique code of the configuration.
    • {Key|Name}: The value of a characteristic based on its key or name.
  • Click on
    Loading...
    .
  • The import may take a moment. You will then receive a success message.

Once you have imported items, you can now also in Ihrem Konfigurator verwenden.

Publish the configurator again.

Integrate the Configurator into Your Store​

Our Shopify app provides blocks that allow you to display a configurator directly in your store.

All blocks launch the configurator with a Inspiration, which you can set in various ways.

  • If you want to display the configurator on product pages, you can set a separate inspiration for each product
    • To do this, create the meta field k3-configurator.inspiration on your products.
      • Go to Settings > Custom Data > Products
      • Click on
        Loading...
      • Under Namespace and key, enter k3-configurator.inspiration.
      • Select a name and choose “Single line text” as the type.
      • Click on
        Loading...
    • For each product, enter the inspiration you want to start with.
  • However, you can also start with a preset 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 onto the homepage of your current Shopify theme.

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

Loading...
for your current theme.

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

Now select the location where you want to insert the configurator—either from the tree view on the left or directly on the page. Click the "+" icon or "Add block," then click the "Apps" tab. Depending on which page you’re on, you’ll now be presented with 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 that serves as the starting point.
  • Fixed Configurator Link: A link is inserted here; the configurator opens in a new tab. You can enter the link text and select the inspiration to start with.
  • Embedded Product Configurator: Only on product pages. Here, the configurator (technically: as an iframe) is embedded directly into the store. You can enter the height of the configurator in pixels. The inspiration is taken from the product’s k3-configurator.inspiration meta field.
  • Product Configurator Link: Only on product pages. A link is inserted here; the configurator opens in a new tab. You can enter the link text. The inspiration is taken from the product’s k3-configurator.inspiration meta field.

Add a Final Action​

Finally, you can now use einen Warenkorb-Knopf anlegen just as you would in any other store.