Kennisbank
Handleidingen
Academy
Instructievideo's
Probeer te zoeken naar:
Recent bekeken artikelen:

Op deze pagina

Boodschapentas toevoegen aan een maatwerk website

U kunt een boodschappentaspictogram aan uw maatwerk website toevoegen met behulp van de winkelextensie Extra boodschappentas. Het pictogram helpt uw klanten te zien hoeveel artikelen ze aan hun bestelling hebben toegevoegd en naar de kassa te gaan.

U kunt ook het uiterlijk van het standaard boodschappentaspictogram wijzigen, de positie ervan op de pagina bepalen, de omleiding naar een maatwerk pagina toepassen of geanimeerde effecten door middel van speciale parameters die aan de integratiecode worden toegevoegd. Door meerdere parameters binnen één integratiecode te combineren kunt u het boodschappentaspictogram maken dat het best bij uw website-ontwerp past.

Voor gebruikers van New-gen Instant Site, Wix en Wordpress: volg de instructies voor aanpassen van het boodschappentaspictrogram op Instant Site (koptekst), op Wix en Wordpress.

Standaardboodschappentas toevoegen

Als uw Ecwid-winkel aan een maatwerk website is toegevoegd, kunt u met een klein stukje code een boodschappentas toevoegen. U moet deze code kopiëren en in uw website plakken.

Een boodschappentas toevoegen aan een maatwerk website:

  1. Ga in de Ecwid-beheerder naar Verkoopkanale.
  2. In de sectie "Verkopen op uw website", klik op het blok Maatwerk website.
  3. Scroll naar Winkelextenties Extra boodschappentas.
  4. Klik op Boodschappentas toevoegen en de boodschappentascode wordt naar uw klembord gekopieerd:
    adding_shopping_bag.png
  5. Log in op het beheerdergedeelte van uw website en open de pagina waar u de boodschappentas wilt weergeven.
  6. Plak de gekopieerde winkelwagencode in de broncode van de pagina. Afhankelijk van het platform dat u gebruikt kan dat HTML zijn, een brontabblad of een aparte knop om code toe te voegen. Als u niet zeker weet hoe u aangepaste codes aan uw website kunt toevoegen, neem dan contact op met de websiteontwikkelaar voor meer gedetailleerde instructies.
  7. Sla de wijzigingen op en publiceer deze.

Zodra u opslaat en publiceert, verschijnt er een boodschappentaspictogram op uw website.

Lay-out boodschappentas wijzigen

U kunt de standaardlay-out van de boodschappentas wijzigen door de parameter data-layout toe te voegen aan de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE een van de ondersteunde waarden is voor de parameter data-layout;
STORE_ID is de ID van uw Ecwid-winkel.

De ondersteunde waarden en hoe elk lay-out eruit ziet vindt u in de tabel hieronder.

Value Lay-out
SMALL_ICON shopping-bag-small-icon.png
SMALL_ICON_COUNTER shopping-bag-small-icon-counter.png
COUNTER_ONLY shopping-bag-small-icon-counter.png
TITLE_COUNTER shopping-bag-title-counter.png
MEDIUM_ICON_COUNTER shopping-bag-medium-icon-counter.png
MEDIUM_ICON_TITLE_COUNTER shopping-bag-medium-icon-title-counter.png
BIG_ICON_TITLE_SUBTOTAL shopping-bag-big-icon-title-subtotal.png
BIG_ICON_DETAILS_SUBTOTAL shopping-bag-big-icon-details-subtotal.png

Lege boodschappentas weergeven of verbergen

U kunt de boodschappentas weergeven of verbergen als deze leeg is door middel van de parameter data-show-empty-cart die voor de "ec-cart-widget"-container in de integratiecode opgegeven is, zoals weergegeven in het voorbeeld hieronder:

<div data-show-empty-cart="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"data-fixed="TRUE"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE is ofwel TRUE of FALSE;
STORE_ID is de ID van uw Ecwid-winkel.

De code werkt alleen voor een zwevende boodschappentas.

Boodschappentaspictrogram wijzigen

U kunt het standaardboodschappentaspictogram wijzigen door de parameter data-icon toe te voegen aan de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE een van de ondersteunde waarden is voor de parameter data-icon;
STORE_ID is de ID van uw Ecwid-winkel.

De ondersteunde waarden en hoe elk pictogram eruit ziet vindt u in de tabel hieronder.

Value Pictogram
BOODSCHAPPENTAS shopping-bag-bag.png
WINKELWAGEN shopping-bag-cart.png
WINKELMAND shopping-bag-basket.png

De vorm van de rand van de boodschappentas wijzigen

U kunt de vorm van de rand rondom de boodschappentas wijzigen door de parameter data-fixed-shape toe te voegen aan de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE is NONE (geen rand) / RECT (rechthoekige rand) / PILL (afgeronde rechthoekige rand);
STORE_ID is de ID van uw Ecwid-winkel.

Maatwerk boodschappentaspictogram toepassen

Een maatwerk boodschappentaspictogram op uw website gebruiken:

  1. Upload uw pictogramafbeelding naar uw hosting of naar een andere afbeeldingshosting waar u een directe link naar de afbeelding krijgt. Of maak een SVG-afbeelding van uw boodschappentaspictogram.
  2. Gebruik de volgende code om een boodschappentas aan uw website toe te voegen:
<div data-custom-icon-url="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

en vervang:
VALUE door ofwel een URL naar het maatwerk pictogrambestand of een SVG-opmaak;
STORE_ID door de ID van uw Ecwid-winkel.

Positie boodschappentas wijzigen

U kunt de positie van de boodschappentas wijzigen door middel van verschillende parameters die toegevoegd worden aan de "ec-cart-widget"-container in de integratiecode.

<div data-fixed="VALUE" 
data-fixed-position="VALUE"
data-fixed-shape="VALUE" 
data-horizontal-indent="VALUE" 
data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE een van de ondersteunde waarden is voor elke parameter;
STORE_ID is de ID van uw Ecwid-winkel.

De parameters waarmee u de positie van de boodschappentas kunt wijzigen en hun ondersteunde waarden vindt u in de tabel hieronder.

Parameter Value Beschrijving
data-fixed TRUE / FALSE Zorgt ervoor dat de boodschappentas op een pagina blijft staan als u er doorheen bladert. Gebruik de paramater "data-fixed-position" om de positie van de boodschappentas te bepalen.
data-fixed-position TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT Bepaalt de positie waar de vaste boodschappentas verschijnt. Om een boodschappentas in een vaste modus te gebruiken, moet u ook de parameter "data-fixed" in uw code opnemen.
data-horizontal-indent Positief geheel getal, inclusief nul Bepaalt de horizontale marge tussen de boodschappentaswidget en de rand van het scherm of een iframe-container.
data-vertical-indent Positief geheel getal, inclusief nul Bepaalt de verticale marge tussen de boodschappentaswidget en de rand van het scherm of een iframe-container.

Boodschappentasanimatie weergeven of verbergen

U kunt het animatie-effect weergeven of verbergen wanneer er artikelen aan de boodschappentas worden toegevoegd, door middel van de parameter data-show-buy-animation die voor de "ec-cart-widget"-container in de integratiecode is opgegeven, zoals weergegeven in het voorbeeld hieronder:

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE is ofwel TRUE of FALSE;
STORE_ID is de ID van uw Ecwid-winkel.

Hetzelfde boodschappentasontwerp op alle apparaten gebruiken

U kunt de responsiviteit van de boodschappentaswidget uitschakelen, zodat deze er hetzelfde uitziet op verschillende schermformaten, desktop en mobiel. Neem hiervoor de parameter data-responsive op in de "ec-cart-widget"-container in de integratiecode, zoals weergegeven in het voorbeeld hieronder:

<div data-responsive="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

waarbij:
VALUE ofwel TRUE is (de winkelwagen past zich automatisch aan verschillende schermformaten aan) of FALSE (de winkelwagen heeft hetzelfde ontwerp op verschillende schermformaten);
STORE_ID is de ID van uw Ecwid-winkel.

Was dit artikel nuttig?

Fantastisch! Bedankt voor uw feedback!

Bedankt voor uw feedback!

Wat vervelend! Wat ging er mis?
Aantal gebruikers dat dit nuttig vond: 38 van 48
10
We gebruiken cookies en vergelijkbare technologieën om uw voorkeuren te onthouden, de effectiviteit van onze campagnes te meten en gedepersonaliseerde gegevens te analyseren om onze site beter te laten werken. Door «Accepteren» te kiezen, stemt u in met het gebruik van cookies.
Cookies accepteren Afwijzen