With the configento.app app from the Shopify App Store, you show your configurators directly on your Shopify product pages. Your customers build their product, see price and product image with every choice and buy through the normal Shopify checkout. The configuration appears in the cart, the checkout, the order and the order confirmation.
The shop always runs the V3 frontend engine – regardless of what is set in the component. What V3 does differently from Legacy is described in Frontend Engine: Legacy or V3.
Requirements
- A Shopify shop with a theme that supports app blocks (Online Store 2.0, e.g. Dawn, Horizon, Sense, Refresh, Origin and most current themes).
- No Shopify Plus needed – the app works on all Shopify plans.
- You don't need a configento.app account beforehand. You can have one created during setup or connect an existing one.
Installation
- Open the configento.app app in the Shopify App Store and install it.
- Confirm the permissions Shopify shows you.
- Shopify then opens the app in the Shopify admin. You can find it at any time among your apps as configento.app.
At the top right of the app, the Setup guide link leads to this article.
The app at a glance
The app has four tabs:
| Tab | What for |
|---|---|
| Setup | Subscription, connection to your configento.app account, sample components |
| Products | Which product shows which component |
| Prices | Currency, tax and conversion between configento.app and Shopify |
| Theme block | Turn on the configurator and the cart extension in the theme, adjust the order confirmation |
Products, Prices and Theme block can only be clicked once an account is connected. After that, the Setup tab shows a check mark.
The app appears in the language you set in the Shopify admin (German, English, Spanish or French, otherwise English). Error messages from the background – such as “invalid or expired code” – are currently always in English.
Step 1: Choose a plan
Without an active subscription, the app shows the notice Subscription required instead of the tabs: “There is no active Configento subscription for this shop. Choose a plan to use the configurator — the first 14 days are free.”
Click Choose a plan. Shopify opens the plan page, where you confirm the plan. Billing goes through your Shopify invoice. The subscription unlocks the Professional feature set.
Without an active subscription, the configurator doesn't load in the shop either.
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 sends an invitation to the email address of your Shopify shop. Through the invitation you set your password for the Service Portal. This usually only takes a moment – then click Reload.
Existing account
Click Yes — I already have an account. You need a 6-digit connection code:
- Open the Service Portal (
service.configento.app) and log in. - For the service the shop should belong to, click Manage. The admin opens.
- Go to Settings → Integrations and scroll to the Shopify card.
- If you have several services, select the right one under Link Shopify shop to customer.
- Click Generate connection code. The Onboarding code is valid for 24 hours (Valid until).
- Paste the code into the app and click Connect.
The Setup tab then shows “Linked to Configento customer ….”
Important: The Shopify subscription is a separate service in your customer account. If you connect an existing account, the Service Portal creates a new service for it with its own workspace, which is empty at first; the app then works with this workspace. Your existing components stay in their service. If you need them in the shop, export them there and import them into the new workspace with Import ZIP (see Create Your First Component).
A shop is always connected to exactly one account. If it should belong to another one, uninstall the app and install it again.
Step 3: Sample components (optional)
If your workspace is still empty, the Setup tab asks: “Shall we add four sample components?” With Yes, add them you get four components – combined product image, combination characteristics with formulas, a rule set and graphical icons. They are published automatically; this takes a moment. You can then assign them in the Products tab and edit or delete them in the admin like any other component.
You create your own components in the admin, which you open from the Service Portal with Manage. You can only assign published components – see Create Your First Component.
Step 4: Assign products
In the Products tab:
- Search for the product name under Add a product.
- In the product's row, choose the component (Select component…) and click +.
- The product appears at the top under Products with a configurator. There you change the component or remove the assignment with −.
Changes are saved immediately. Shopify caches shop pages for a few minutes – a new assignment therefore appears with a short delay.
Right after installation, Shopify builds an index for the assignments. Until it is ready, the tab shows “Shopify is preparing the product index for this app.” and doesn't list any products yet. Assignments you have already made are kept. Reload the page after a few minutes or click Check again.
Assigning without the app: The assignment is a product metafield. In the Shopify admin you find it on the product as Configento Component ID (namespace configento, key component_id). As the value, enter the ID of a published component. Products without this value don't show a configurator.
Step 5: Set up the theme
In the Theme block tab you turn on two things – once per theme. Next to each item it says whether it is Active or Not turned on in your published theme.
Configurator block
- Click Add configurator block. Shopify opens the theme editor with the product template and adds the Configento Configurator block.
- Shopify places new blocks at the end. That doesn't matter: with the setting Automatically place configurator above price (default: on), the configurator jumps right in front of the price when the page loads. Alternatively, drag the block above the “Add to cart” button.
- Save.
Block settings in the theme editor:
| Setting | Default | Meaning |
|---|---|---|
| Configento backend URL | https://admin.configento.app |
Only change it if Configento explicitly gives you a different host |
| CSS selector of the theme price (optional) | empty | Empty = automatic detection (Dawn, Sense, Refresh, Origin, Horizon and most premium themes). Separate several selectors with commas |
| CSS selector of the product image gallery (optional) | empty | Empty = automatic detection (Dawn and themes based on it). There the combined product image replaces the product photo as long as the component provides image layers |
| Automatically place configurator above price | on | Moves the block in front of the price element on load, wherever it sits in the theme editor |
| Show configuration summary | off | Shows a summary of the selection below the configurator. It is added to the order either way |
| Loading text (leave empty for automatic language) | empty | Empty = “Loading configurator …” in the shop's language (DE, EN, ES, FR, otherwise English) |
The configurator takes over font, colors and corner radii from themes of the Dawn family.
Cart extension “Configento Cart”
Configento Cart is an app embed. In the cart and the cart drawer, it shows the configuration's image, the buyer's choices and an Edit link for every configured line. It also passes the configuration's image on to checkout, order and order confirmation.
App embeds are turned off in Shopify until you turn them on – the app can't do this itself.
- Click Turn on Configento Cart. Shopify opens the theme editor with the embed already turned on.
- Save.
The switch applies per theme. After a theme change or a reinstallation of the app, turn it on again. If it is off, the tab warns: ““Configento Cart” is not turned on in your published theme.”
Without Configento Cart, buying still works – price and configuration are correct. Cart, checkout and order then show the product photo instead of the configuration's image, though, and there is no Edit link.
Step 6: Image in the order confirmation (optional)
The order confirmation email contains the configuration automatically. The product image in it, however, comes from your shop's email template, and an app can't change that. To show the configuration's image instead of the product photo, adjust the template once. The Theme block tab guides you through the steps under Configuration image in the order confirmation (optional) and offers the texts to Copy:
- Edit order confirmation opens the template's code.
- Search the code (Ctrl+F / Cmd+F) for this line:
{% if parent_line_item and parent_line_item.image %} - Replace every occurrence of this line with the following block. The default 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 %}- Save the template. The next order confirmation shows the configuration's image.
If you can't find the line, your template has been customized. Then your developer or Configento support puts the block where the product image of a bundle is output.
Allowing your own domain
When connecting, the app automatically adds your shop's Shopify address (….myshopify.com) as an allowed domain. If your shop runs under its own domain, add it yourself: in the admin under Settings → Domains with Add domain, mode Production. Otherwise the configurator doesn't load on that domain. More on this: Global Settings.
Prices, currency and taxes
You usually don't need to touch the Prices tab. The app reads your shop's currency and tax display live from Shopify on every request and converts accordingly. Under Currency & tax, the tab shows both sides next to each other: Configento (price source) and Shopify (storefront, live).
- Tax: If your shop shows prices without tax, the surcharges reach the shop net, and Shopify adds the tax at checkout. If your shop shows prices with tax, the app uses the tax rate Shopify calculates for this product. If it can't be determined, prices stay on the basis they were created on in the component.
- Currency: If both sides use the same currency, nothing is converted (“Both sides use EUR. No conversion needed.”). With different currencies, the app takes the exchange rate from Shopify Markets.
- Manual conversion rate: Only used if Shopify Markets doesn't provide a rate. With the same currency it has no effect, and the tab points this out. You delete it with Clear override.
The surcharge in the cart equals the amount the configurator shows on the product page.
What the buyer sees
- Product page: The configurator loads with the product. Until it is ready, the cart button is locked – so no product ends up in the cart without a configuration. Price and – if the component has image layers – the combined product image in the gallery follow every choice.
- Add to cart: The configuration is saved and the line is created with the full price. The configuration's image is added about half a minute later (via Configento Cart).
- Cart: The configuration's image, the choices and the Edit link. The link leads back to the product page with the previous choices; after adding it again, the new configuration replaces the old line.
- Checkout: One line with the title “Product – Value, Value, …”. Expanded, it shows its parts: the product at the base price and Configuration with the surcharge. Payment methods, discount codes and other Shopify features stay unchanged.
- Order confirmation: The line with the configuration in the title and its parts – with the configuration's image if you completed step 6.
The order in the Shopify admin
A configured order shows its parts: the product at the base price and the Configuration line with the surcharge. The buyer's choices are listed as properties on the Configuration line.
What the app creates in your shop
- Two draft products “Configuration” (name in your shop's primary language: Konfiguration, Configuration, Configuración): They carry the surcharge in the cart – one for products that require shipping, one for products that don't. They aren't visible in the shop. Don't delete, publish or rename them.
- Images of the configurations (
configento-….png) in your shop's files. Cart and checkout only show images hosted by Shopify itself, so the app stores every configuration image there. - Metafields: Configento Component ID on assigned products and shop metafields for the two surcharge products.
Permissions: The app reads and writes products (assignment, surcharge products), cart transforms (surcharge), draft orders (only to calculate the tax rate, no drafts are created) and files (configuration images), and reads your shop's languages. If an update adds a permission, you confirm it the next time you open the app.
Billing and AI tokens
- The subscription runs through Shopify and appears on your Shopify invoice. In the Service Portal the service has no Change service and Cancel service – see Service Portal.
- AI tokens: A monthly allowance for the AI assistant is included in the subscription. You can't buy additional tokens for a service booked through Shopify. More about tokens: AI Tokens.
Uninstalling and reinstalling
There is no separate cancel button in Shopify: uninstalling the app ends the subscription, Shopify stops billing, and the service in the Service Portal is ended.
When you uninstall, Shopify removes everything the app owns in the shop – embeds, cart transform, shop metafields. The assignments on your products remain.
After a reinstallation:
- choose a plan again,
- connect an account again (it can also be a different one),
- turn on Configento Cart again in the Theme block tab,
- check the assignments in the Products tab. If you connected a different account, the old component IDs no longer belong to it – assign again.
Troubleshooting
- Nothing at all appears on the product page – the product has no component assigned, or the configurator block is missing from the product template. Check the Products tab and, in the Theme block tab, the status of Configurator block. Because of the Shopify cache, a fresh assignment takes a few minutes.
- “Configurator could not be loaded.” – the configurator couldn't start (the message is always in English). Causes: no active subscription, the shop isn't connected to an account, or configento.app didn't respond within 8 seconds.
- “Component could not be loaded (HTTP 401)” – the shop runs under its own domain, which isn't allowed. See Allowing your own domain.
- “Component could not be loaded (HTTP 404)” or with another code – the assigned component isn't published or doesn't belong to the connected account. Assign a published component in the Products tab.
- The “Add to cart” button stays grey briefly – intended: it is locked until the configurator is ready, for 20 seconds at most.
- Cart shows the product photo, no “Edit” – Configento Cart is off in the published theme, for example after a theme change. Theme block tab → Turn on Configento Cart → save.
- Checkout or order show the product photo – check Configento Cart as well. The image only arrives about half a minute after adding; anyone who goes straight to checkout may still see the product photo. If the image is missing permanently, open the app and confirm requested permissions.
- No surcharge in the cart – the cart transform isn't active. Open the app in the Shopify admin; if that doesn't help, contact Configento support. Also, don't delete either of the two “Configuration” products.
- Price on the product page differs from what you expect in the shop – check the Prices tab: tax display and currency of both sides; with the same currency, remove a manual rate.
- Order confirmation shows the product photo – the email template isn't adjusted (step 6).
- “invalid or expired code” when connecting – the code is older than 24 hours, already used or mistyped. Generate a new one in the admin.
- “shop already linked” – the shop is already connected to an account. For a different account: uninstall the app and install it again.
- “Subscription required” – no active plan. Choose a plan.
- “Couldn't authorise this session.” – reload the page. If the message remains, uninstall the app and install it again.