Docs  /  Integrations  /  Installing the Shopify Plugin

Installing the Shopify Plugin

Last updated: 01. January 2026

The Shopify plugin connects your configento.app configurator directly to your Shopify product pages. Customers configure their product, see price and product image update in real time, and check out through the native Shopify checkout — without leaving your store. The configuration appears in the cart, at checkout, in the order and in the order confirmation.

Requirements

  • Shopify store running an Online Store 2.0 theme (e.g. Horizon, Dawn, Sense, Refresh, Origin, or current premium themes). Legacy themes without JSON templates are not supported.
  • No Shopify Plus required — the plugin works on all Shopify plans.
  • A configento.app account is not a prerequisite: you can have one created during setup or connect an existing one.

Installation

  1. Search for "Configento Configurator" in the Shopify App Store.
  2. Click Add app.
  3. Confirm the permissions screen.
  4. Shopify then opens the app inside the Shopify admin (Embedded Admin).

Overview: the Embedded Admin

You can open the app at any time in the Shopify admin under Apps › configento.app. It has four tabs:

Tab What for
Setup Subscription, connection to your configento.app account, sample components
Products Which Shopify products show which configurator
Pricing Currency, tax and conversion between configento.app and Shopify
Theme block Turn on the configurator and the cart enhancements in your theme, adjust the order confirmation

The Products, Pricing and Theme block tabs become available once the account is connected.

Step 1 — Choose a plan

Without an active subscription the Setup tab shows "Subscription required". Click "Choose a plan" and confirm the plan in Shopify. The first 14 days are free. Billing runs through your Shopify invoice.

A monthly allowance for the AI features is included in the plan — there are no additional charges.

Step 2 — Connect your configento.app account

In the Setup tab the app asks: "Do you already use Configento?"

No account yet: Click "No — create an account now". configento.app creates your account and emails you an invitation to set your password. This takes a moment; reload the page afterwards.

Existing account: Click "Yes — I already have an account" and get a 6-digit connection code:

  1. Open the Configento service portal (service.configento.app) and sign in.
  2. Click "Manage" next to the service you want to connect to the store.
  3. In the admin, open Settings › Integrations.
  4. Scroll to the Shopify card. If you have several Configento accounts, pick the one that should own this store, then click "Generate connection code".
  5. Copy the code, paste it in the app and click "Connect".

The code is valid for 24 hours. Once connected, the tab shows Setup ✓ and the connected account.

Note: A Shopify store is connected to exactly one configento.app account. To move the store to a different account later, uninstall and reinstall the app.

Step 3 — Sample components (optional)

If your account is still empty, the app offers to add four sample components. They show a combined product image, combination characteristics with formulas, a rule set and graphical icons. You can edit, publish or delete them like any other component. The samples are published automatically; that takes a moment.

You create your own components in the configento.app admin (admin.configento.app). Only published components can be assigned to a product.

Step 4 — Assign products

In the Products tab:

  1. Under "Add a product", search for the product by name.
  2. Pick the component and add it with +.
  3. The product appears at the top under "Products with a configurator". There you can switch the component or remove the assignment with −.

Changes are saved immediately. Shopify caches storefront pages for a few minutes, so a new assignment may take a moment to appear on the product page.

Alternative: The assignment is a product metafield and can also be set directly on the product in the Shopify admin: namespace configento, key component_id, type single_line_text_field, value = component ID (e.g. 10244).

Step 5 — Set up your theme

In the Theme block tab you turn on two things — once per theme. The tab shows for both whether they are active in your published theme, and warns you if something is missing.

Configurator block

  1. Click "Add configurator block". Shopify opens the theme editor on the product template and adds the Configento Configurator block.
  2. Shopify places new blocks at the bottom. With the setting "Automatically place configurator above price" (default: on) the configurator still moves right in front of the price when the page loads. Alternatively, drag the block above the "Add to cart" button.
  3. Save.

Block settings in the theme editor:

Setting Default Meaning
Configento backend URL https://admin.configento.app Only change if Configento explicitly gives you a different host
CSS selector of the theme price empty Auto-detection covers most themes; only fill in for unusual themes
CSS selector of the product image gallery empty Auto-detection; the combined product image replaces the product photo there as long as the configurator provides image layers
Automatically place configurator above price on Moves the block in front of the price element on load
Show configuration summary off Shows a text summary of the selection below the configurator
Loading text empty Automatic language selection (DE/EN/ES/FR), can be overridden

Cart enhancements "Configento Cart"

The cart enhancement is an app embed. In the cart and the cart drawer it shows, for every configured line, the configuration's image, the buyer's choices and an "Edit" link.

In Shopify, app embeds are off until you turn them on — an app cannot do that for you. Here's how:

  1. Click "Turn on Configento Cart". Shopify opens the theme editor with the embed already switched on.
  2. Save.

Important: The toggle applies per theme. After switching themes or reinstalling the app, turn it on again in the new theme.

Without the cart enhancement the purchase works completely — price, configuration and checkout are correct. Your theme's cart just shows the plain product photo and no Edit link.

Step 6 — Order confirmation (optional)

The order confirmation email contains the configuration automatically (see below). The product image in the email, however, comes from your store's email template, and apps cannot change that template. To show the configuration's image instead of the product photo, adjust the template once. The Theme block tab walks you through these steps and offers the text snippets for copying:

  1. "Edit order confirmation" opens the template's code (in the Shopify admin: Settings › Notifications › Customer notifications › Order confirmation › Edit code).
  2. Search the code (Ctrl+F / Cmd+F) for this line: {% if parent_line_item and parent_line_item.image %}
  3. Replace every occurrence of that line with the following block (also available for copying in the Theme block tab). The standard template contains the line several times — once per delivery section.
{%- comment -%} Configento: show the configuration's combined image {%- endcomment -%}
{%- assign configento_image = '' -%}
{%- for configento_part in line_item_group.components -%}
  {%- for configento_prop in configento_part.properties -%}
    {%- if configento_prop.first == '_configento_image' -%}{%- assign configento_image = configento_prop.last -%}{%- endif -%}
  {%- endfor -%}
{%- endfor -%}
{% if configento_image != blank %}
  <img src="{{ configento_image }}{% if configento_image contains '?' %}&{% else %}?{% endif %}width=120&height=120&crop=center" align="left" width="60" height="60" class="order-list__product-image" alt="">
{% elsif parent_line_item and parent_line_item.image %}
  1. Save the template.

If you can't find the line, your template has been customised. Then your developer or the Configento support places the block where the image of a bundle is output.

Pricing, currency and tax

You usually don't need to touch the Pricing tab — the app reads your store's currency and tax display live from Shopify and converts automatically:

  • Tax: If your store shows prices without tax (e.g. "Taxes calculated at checkout"), the app converts gross prices from configento.app into net prices; Shopify adds the tax at checkout. If your store shows prices including tax, the app uses the tax rate Shopify calculates for the product.
  • Currency: If configento.app and your store use the same currency, nothing is converted. With different currencies the app uses the exchange rate from Shopify Markets.
  • Manual rate: Only needed if Shopify provides no rate. A pinned rate is ignored when both sides use the same currency — the tab points this out; "Clear override" removes it.

This keeps the price identical on the product page, in the cart and at checkout.

What the buyer sees

  1. Product page: The configurator loads automatically. The price and — if the component has image layers — the combined product image in the gallery update with every choice.
  2. Add to cart: The configuration is saved and its image is prepared for cart, checkout and order. This takes a few seconds.
  3. Cart: The line shows the configuration's image, the choices and an "Edit" link back to the product page (with the cart enhancement, see step 5).
  4. Checkout: One line titled "Product – choice, choice, …" with the configuration's image. Expanded, it shows its parts: the product at its base price and "Configuration" with the surcharge. All payment methods, discount codes and Shopify features remain available.
  5. Order confirmation: One line with the configuration in its title, the total price and the parts — with the configuration's image if you completed step 6.

The order in the Shopify admin

Shopify shows a configured order with its parts: the product at its base price and the "Configuration" line with the surcharge. The buyer's full selection is listed as properties on the "Configuration" line (e.g. "Model: Linea • Glass: Clear glass"); both lines reference the title with the configuration via "Part of".

What the app creates in your store

  • Two draft products "Configuration" (name depends on your store language): they carry the configuration surcharge in the cart — one for shipped products, one for products without shipping, so a configured product stays a single line in the order and the email. They are not visible in your store. Don't delete, publish or rename them — if they are missing, the app recreates them automatically.
  • Configuration images (configento-….png) in your store's files. Shopify only shows images from its own CDN in cart and checkout, which is why the app stores every configuration image there.
  • Metafields: configento.component_id on products (the assignment) and shop metafields for the surcharge products.

Permissions: The app reads and writes products (assignment, surcharge products), draft orders (tax rate calculation), cart transforms (surcharge) and files (configuration images), and reads your store's languages. If an update adds a permission, you approve it the next time you open the app.

Multilingual support

The plugin supports German, English, Spanish and French. The storefront configurator automatically follows the Shopify store language (Shopify Markets / language selector); other languages fall back to English. The Embedded Admin follows the language of your Shopify admin.

Troubleshooting

Configurator is not displayed:

Symptom Cause Fix
Area completely empty Configurator block not in the theme Theme block tab → "Add configurator block"
Loading text stays Product not assigned to a published component Products tab → assign a component
New assignment not visible yet Shopify page cache Wait a few minutes, reload the page
Error message after 8 seconds configento.app cloud not reachable Check status.configento.app

Cart and checkout:

Symptom Cause Fix
Cart shows the product photo instead of the configuration, no "Edit" link Cart enhancement off in the active theme (e.g. after a theme switch) Theme block tab → "Turn on Configento Cart" → save
No surcharge in the cart Cart transform not active Reopen the app in the Shopify admin (reactivates it)
Price differs between product page and cart Currency/tax Check the Pricing tab; clear a manual rate if both sides use the same currency
Configuration image missing in cart/checkout New "Files" permission not approved yet Open the app and approve the requested permissions

Order confirmation:

Symptom Cause Fix
Product photo instead of configuration image Email template not adjusted Step 6
Line to replace not found Template has been customised Developer or Configento support

Connection fails:

Symptom Cause Fix
Code invalid or expired Code older than 24 hours or mistyped Generate a new code in the service portal
Store already connected The store is already connected to another account Uninstall and reinstall the app
"Subscription required" No active plan Setup tab → "Choose a plan"

Next steps

← All articles Try free for 14 days