Magento

De enige 3D Product Configurator voor Shopify!

Makkelijke installatie en volledig geïntegreerd met Shopify

Expivi is een compleet 3D ecommerce platform, maar wij begrijpen dat het niet altijd mogelijk is om van ecommerce platform te veranderen. Met de Expivi plugin voor Shopify kun je de Expivi 3D product configurator gebruiken zonder af te stappen van Shopify.

De Expivi Shopify plugin maak het mogelijk om Expivi te integreren met je Shopify shop. De plugin vervangt de “Add to cart”-knop met een “Configure”-button waar de klant jouw product naar eigen wens kan personaliseren. Het gepersonaliseerde product kan dan toegevoegd worden aan het winkelmandje van Shopify en het bestelproces wordt verder in Shopify afgewikkeld.

Met onze plugin is het eindelijk mogelijk om een echte 3D productconfigurator met augmented-reality-ondersteuning in Shopify te hebben!

Hoe de Expivi 3D configurator te integreren met Shopify

Het installeren en integreren van Expivi met jouw Shopify-webshop kan in 4 stappen. Wij gaan er van uit dat je jouw Shopify-webshop en -producten al opgezet hebt.

1. Installeer de Expivi plugin voor Shopify

De Expivi Shopify plugin is op het moment van schrijven nog niet beschikbaar in de Shopify App Store. Om de plugin te installeren, ga naar https://www.expivi.com/installshopify en vul het adres van jouw Shopify-winkel in en klik op Submit.

Shopify

Je wordt daarna doorgestuurd naar jouw Shopify-account om de unlisted app te installeren. Klik op Install unlisted app en je hebt de Expivi plugin toegevoegd aan jouw Shopify-account.

Shopify

Shopify

2. Maak de API-key aan

Ga naar de backend van Expivi (https://admin.expivi.net/) en ga naar Team > API Keys. Maak een nieuwe API-key aan door op de “Create”-knop rechtsboven te klikken. Een klein popup-venster zal verschijnen. Geef de API-key een naam en kies bij permissions “Read” en klik op “Create”.

Shopify

Een nieuw popupvenster zal met de API-key verschijnen. Kopieer de API-key naar een tekstbestand. Let op: de API-key zal voor de veiligheid slechts 1 keer verschijnen en kan niet opnieuw opgevraagd worden. Je zult een nieuwe API-key moeten aanmaken als je de aangemaakte API-key niet meer bezit.

Ga vervolgens terug naar de backend van je Shopify-winkel en ga naar de instellingen van de Expivi-plugin (Apps > Expivi). Vul onder General settings de API-key in het veldje API-key in en zorg er voor dat de API URL https://expivi.net/api is en bewaar de instellingen door op “Save” te klikken.

Shopify

Je hebt nu Expivi geïntegreerd met jouw Shopify-webshop.

3. Koppel producten in Shopify met producten in Expivi

Om jouw producten in Shopify te koppelen met de producten in Expivi, ga naar de Expivi instellingen in Shopify (Apps > Expivi). Alle producten in jouw Shopify-winkel staan onder het Products-gedeelte.

Naast elk product zie je een dropdown-veldje met alle producten die op het Expivi platform staan. Selecteer het overeenkomende product voor elk product en klik op “Save”.

Shopify

Nadat je de gekoppelde producten hebt opgeslagen, zal de “Configure”-knop naast elk product verschijnen.

Shopify

Klik op de “Configure”-knop en je zult doorgestuurd worden naar de pagina om de 3D productviewer te configureren. Hiermee kun je de standaardconfiguratie van het product instellen voor de productpagina. Wanneer je klaar bent met het configureren van het product, klik op Save en de klant zal deze standaardconfiguratie voortaan zien wanneer deze de productpagina bezoekt.

Shopify

Door op de “Save image”-knop te klikken, zal er een productafbeelding gemaakt worden van de configuratie van het product. Deze afbeelding zal automatisch toegevoegd worden aan de productpagina als productafbeelding.

Shopify

Herhaal deze stap voor alle producten.

4. Voeg aangepaste code toe aan de Shopify template

Om Expivi te integreren met je Shopify-webshop is het nodig om aanpassingen te plegen in de bestanden van je Shopify-theme. Indien je niet de beschikbare kennis voor hebt, vraag dan een ontwikkelaar om dit voor je te doen.

Let op: elke theme heeft zijn eigen unieke code, dus gebruik de hierna beschreven instructies als voorbeeld.

Ga naar Online Store > Themes en selecteer Edit code in de Actions dropdown-menu. Je zult daarna doorgestuurd worden naar de theme files editor.

Shopify

Vervangen “Add to cart”-button met “Configure”-button op de productpagina

We gaan eerst de originele “Add to cart”-knop op de productpagina vervangen met de Expivi “Configure”-knop.

Open het product-template.liquid bestand onder het “Sections”-gedeelte. Zoek het gedeelte waar de code voor de “Add to cart”-knop staat (tip: Ctrl+F en zoek voor “submit”) en vervang de code voor de “Add to cart”-knop met de onderstaande code (na de DIV-tag met CSS class name “product-form__item–submit”):

<a href="/apps/configurator?catalogue={{product.id}}" class="btn product-form__cart-submit">Configure</a>

Vergeet niet op de “Save”-knop te klikken om de aanpassingen te bewaren.

Voor:

Shopify

Na:

Shopify

Toevoegen productconfiguratie informatie aan het winkelmandje

De volgende stap is om de gekozen opties als extra informatie toe te voegen naast de thumbnail van het product in het winkelmandje.

Onder het Sections-gedeelte, open het bestand cart-template.liquid. We gaan het gemarkeerde gedeelte aanpassen

Shopify

Zoek de regel met

{% for item in cart.items %}

(in bovenstaande afbeelding staat deze op regel 17) en knop en plak de volgende code meteen na deze regel:

{%- assign property_size = item.properties | size -%}
{%- assign configuration_image = 0 -%}

De code ziet er dan zo uit:

Shopify

Vervolgens gaan de wij de originele thumbnail-code vervangen met de nieuwe thumbnail-code met extra informatie. Zoek de regel met de thumbnail-code:

Shopify

De code ziet er dan zo uit:

{% if property_size > 0 %}
{% for p in item.properties %}
            {% if p.first == 'Configuration SKU' %}
                 {%- assign configuration_image = p.last -%}
                 {% endif %}
           {% endfor %}
{% endif %}
{% if configuration_image != 0 %}
<img class="cart__image" src="https://shopify.3xpivi.com/card_image/{{configuration_image}}" alt="{{ item.title | escape }}" data-item-url="https://shopify.3xpivi.com/card_image/{{ configuration_image }}">
{% else %}
<img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}" data-item-url="{{ item.url }}">
{% endif %}

De code ziet er dan zo uit:

Shopify

Vergeet niet op “Save” te klikken en je hebt Expivi geïntegreerd met jouw Shopify-webshop!

3D configurator voor je website nodig?

Schrijf je in voor een gratis trial!

Schrijf je 30 seconden in, wij helpen je alles op te zetten en je kunt aan de slag!

Geen betalingsgegevens nodig en je zit nergens aan vast!

Heb je nog vragen? Neem even contact met ons op via e-mail, telefoon of livechat.