1. Home
  2. Integratie
  3. Expivi Shopify Integratie

Expivi Shopify Integratie

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.

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.

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”.

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.

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

3. Koppel producten in Shopify met producten in Expivi

Als je nog geen producten in jouw Shopify webshop hebt aangemaakt, doe dat dan eerst. Het meest belangrijke bij het aanmaken van de producten is het juiste “Product type” aan te maken, zodat het systeem kan zien of het een normaal Shopify product is (bijv. “Sneaker”) of een Shopify product met Expivi’s 3D configuratie is (bijv. “Customizable Sneaker”). N.B.: hetgeen wat ingevuld is onder “Product type” zal ook gebruikt worden als shopcategorie.

Als je al bestaande producten in jouw shop hebt, maak dan ook voor deze producten het juiste “Product type” aan.

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”.

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

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.

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.

Herhaal deze stap voor alle producten.

4. Add custom code to 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 template 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.

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. Deze code zal kijken of het een normaal Shopify product is of dat het een Shopify product met Expivi’s 3D configuratie is (kijken naar producttype) en zal vervolgens de “Add to cart”-knop vervangen met een “Configure”-knop.

De code ziet er als volgt uit:

{% if product.type != "Customizable Sneaker"%}
<!-- PLAATS DE ORIGINELE ADD TO CART CODE/FORMULIER HIER -->
{% else %}
<a href="/apps/configurator?catalogue={{product.id}}" class="button">Configure</a> 
{% endif %}

N.B.: “Customizable Sneaker” is hier gebruikt als voorbeeld. Vervang dit met het juiste “Product type” dat je eerder hebt aangemaakt.

N.B. 2: Om de “Configure”-knop net als de originele “Add to cart”-knop uit te laten zien, gebruik hiervoor dezelfde CSS classes en selectors of kopieer de CSS code van de originele knop en pas deze toe op de nieuwe “Configure”-knop.

Zoek en vind de locatie van het bestand waarin de originele “Add to cart”-knop zit en voeg deze code toe aan het bestand.

Vergeet niet op “Save” te klikken om de aanpassingen op te slaan.

N.B.: de afbeeldingen hierna dienen slechts als voorbeeld en kunnen afwijken van jouw template-bestanden.

Voor:

Na:

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. N.B.: de locatie en de namen van de template-bestanden kunnen afwijken van de bestanden van jouw template.

Onder het Sections-gedeelte, open het bestand cart-template.liquid.

Zoek de regel met

{% for item in cart.items %}

(op onderstaande 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:

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

En vervang deze met de volgende code:

{% 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:

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