Non-standard Features

Non-standard theme features within thumbnail displays may not be possible or may require additional work outside the standard app install scope.

eCom's "Discount Rules" Thumbnail Price Display

The app cannot currently support displaying discounted pricing from eCom's "Discount Rules" feature (https://ecom-support.lightspeedhq.com/hc/en-us/articles/220662787-Creating-discount-rules), because the discount rules feature generates the discount pricing on the fly (instead of updating the pricing directly in the catalog, which is where the app gets your item prices from).  We are looking into the possibility of adding some level of support for Discount Rules into the app in the near future. 

You can still use discount rules and the pricing will still display in non-app content (i.e. eCom's standard search results, product's details page, product's in cart, etc), but the discount pricing will not show in results generated by the app.

Root A
- Sub AA
- Sub AB

Root B
- Sub BA
- Sub BB

If you set your root category to "Root B", only categories "Sub BA" and "Sub BB" would be used by the bridge. Any other categories would be ignored.

Once installed and setup, the Moneris Checkout payment integration app will allow your site to offer Moneris Checkout as a payment option in your eCom checkout process.

Follow instructions in Lightspeed eCom to purchase the Moneris Checkout app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from AdVision before) OR create a new account with AdVision to install and manage this and any future apps you may purchase.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  

To manage this app, click on "Moneris Checkout" under the appropriate shop.  This will take you to the settings for the app.

Settings

Within settings, you can control:

General Settings

1. Display - Enter the label you'd like this payment option to show as within your eCom checkout. A common choose for this is "Pay by Credit Card"
2. Active - determines if this Moneris Checkout should show in your checkout as a payment option.  Check this box and save changes to show, uncheck box and save changes to hide.
3. Icon - set the icon you'd like to show with the payment option in eCom checkout.
4. Mode - if you want to perform test transactions with Moneris, set mode to Test.  If you want to take real payments, set mode to Live. 

API Settings

For more information on obtaining your test or live account credentials, please see reach out to Moneris support or contact them on their support number: 1-866-319-7450.

1. Test Checkout ID - enter the checkout ID for the test Moneris Checkout configuration you've setup.
2. Test Store ID - enter the store ID for your test Moneris account
3. Test API Token - enter the API token from your test Moneris account
4. Production Checkout ID - enter the checkout ID for the live Moneris Checkout configuration you've setup.
5. Production Store ID - enter the store ID for your live Moneris account
6. Production API Token - enter the API token from your live Moneris account

Payment Page Display

For more information on the configuring your Moneris Checkout display, please see check with Moneris support or contact them on their support number: 1-866-319-7450.

1. Using Full Screen Checkout - check this box if you've setup your Moneris Checkout configuration to display in full screen mode.
2. Window Width - if your Moneris Checkout configuration is set to not use full screen, enter the width for the container that will show the Moneris content.  You can enter a percentage (e.g. "90%") or a fixed value with your preferred unit of measurement (e.g. "600px" for 600 pixels)
3. Window Width - if your Moneris Checkout configuration is set to not use full screen, enter the height for the container that will show the Moneris content.  You can enter a fixed value with your preferred unit of measurement (e.g. "600px" for 600 pixels)

Payment Page Functionality

1. Randomize Order ID - Moneris Checkout will throw an error if a user attempts to submit a payment for the same order ID more than once.  If you'd like to avoid this error, you can check this box and a timestamp will be added to the order ID to randomize it, allowing multiple payments to be submitted against the same order ID.

Page Settings (optional)

1. Logo URL - Provide full (absolute) URL (web address) to the logo you'd like to display on any of this app's loading page.
2. Background Color - Select the background color you'd like for any of this app's loading page. 
3. Text Color - Select the text color you'd like to use for any text displayed on this app's loading page. 
4. Custom CSS - Only for users with advanced experience working in CSS code. Any CSS provided here will load on any of the app's loading page.   Warning: improper use of this field may cause the app to not function correctly. 
5. Custom Javascript - Only for users with advanced experience working in Javascript. Any Javascript provided here will load on any of the app's loading page.  Warning: improper use of this field may cause the app to not function correctly. 

If you make any changes to any of these settings fields, be sure to click "Save Settings" button to save those changes.

Translations (optional)

If you'd like to change the text that displays on any of the app's payment page, click on the "Translations" tab.  This will take you to a list of text that you can enter translations for in any of the supported languages.  Each piece of text has a default value, but you can override that value by entering your own into the message's translation field.  Be sure to click the "Save Changes" button after you enter/change any translations.

Special Translations

There are two translation records that communicate with Moneris when their is a shipping amount for an order:

1. Shipping Cost Description: defaults to "Shipping Cost" and is sent as the description of the shipping cost "item" to Moneris
2. Shipping Cost SKU: defaults to "shipping-cost", but can be updated to whatever you like.  This is the SKU of the shipping cost "item" sent to Moneris.

If you want to set the above translations to different values for different languages, you're free to do so.  They are only descriptive texts that will show for the shipping cost item when Moneris displays items for the order.

Go to Top

Once installed and setup, the Enhanced Variant Images app will allow you to:

1. Avoid the 12 image limitin Lightspeed eCom for product's details page;upload unlimited images(within reason) for each variant in our app (larger image catalogs may incur additional hosting costs)
2. Upload larger, higher quality imagesso your customers can see more detailed representations of the product
3. Present image galleries with theMagicZoom Plus interactive gallery
4. Works per Lightspeed eCom variant option selections
5. Can work in conjunction with our Color Swatches app

How LSR Multi-Shop Compiler and Order Splitter Works

Une fois installée et configurée, l’application Paiements d’Affirm permettra aux clients de votre site se trouvant aux États-Unis de faire des paiements en plusieurs fois avec Affirm.

Pour acheter l’application Paiements d’Affirm sur l’App Marketplace, suivez les instructions de Lightspeed eCom. Pendant l’installation, vous serez redirigé vers notre site de gestion des applications pour vous connecter à un compte existant (si vous avez déjà acheté une application Lightspeed eCom chez AdVision) OU pour créer un nouveau compte chez AdVision, et installer et gérer cette application ou toute future application que vous achèterez.

Après avoir créé un compte ou vous être connecté à votre compte existant, l’application s’installe automatiquement. Vous serez ensuite redirigé vers la liste des boutiques Lightspeed eCom enregistrées avec votre compte et toutes les applications installées avec celles-ci. 

Pour gérer cette application, cliquez sur « Affirm » sous la boutique correspondante. Vous arriverez ainsi aux paramètres de l’application.

Paramètres

Dans les paramètres, vous pouvez contrôler :

Les paramètres généraux

1. Activer Affirm - Déterminez si Affirm doit apparaître dans votre règlement comme une option de paiement. Cochez cette case et enregistrez les modifications pour les afficher, décochez la case et enregistrez les modifications pour les masquer.
   
   
2. Mode - si vous voulez effectuer des transactions de test avec Affirm, passez en mode Test. Si vous voulez encaisser des paiements réels, réglez le mode sur Live (Réel). 

Paramètres API

1. Clé API publique réelle - La clé API de production publique se trouvant dans votre tableau de bord Affirm.
2. Clé API privée réelle - La clé API de production privée se trouvant dans votre tableau de bord Affirm.
3. Clé API publique pour un test - La clé API publique du sandbox se trouvant dans votre tableau de bord Affirm
4. Clé API privée pour un test - La clé API privée du sandbox se trouvant dans votre tableau de bord Affirm
5. Nom du commerçant - Votre raison sociale
6. Action lors du paiement – Lorsqu’un client effectue un paiement au moment de passer sa commande, souhaitez-vous uniquement autoriser le paiement ou désirez-vous également l’enregistrer immédiatement ? « Autoriser uniquement » fera en sorte que les paiements ne seront autorisés que lors du règlement et que les commandes seront indiquées comme « En attente de paiement ». « Autoriser & enregistrer » permettra non seulement l’autorisation du paiement à la caisse, mais il sera aussi immédiatement enregistré et les commandes seront marquées comme « Prêt pour expédition ».

Paramètres du site

1. Inclure l’analyse étendue Affirm - Voulez-vous que le code d’analyse amélioré d’Affirm soit inclus sur la dernière page (affichage du reçu de la commande) du règlement d’eCom ? Si c’est le cas, l’application inclut le code de suivi sur votre site Web eCom.
2. Seuil minimum de commande - Il s’agit du montant minimum de commande requis pour qu’Affirm soit affiché comme option de paiement. Ce montant doit être supérieur à 50 $US. Si le champ est vide, la valeur par défaut de 50 $US sera utilisée. Si le total de la commande d’un client n’atteint pas ce minimum, Affirm ne sera pas repris comme option de paiement dans la caisse de votre magasin.
3. Seuil maximum de commande - Définissez le total maximum de commande nécessaire pour effectuer le paiement via Affirm. Si le total de la commande d’un client dépasse ce maximum, Affirm ne sera pas repris comme option de paiement dans la caisse de votre magasin.

Messages promotionnels sur les produits et les paniers 

Pour plus d’informations sur les messages promotionnels d’Affirm utilisés dans cette application, veuillez consulter https://docs.affirm.com/Integrate_Affirm/Promotional_Messaging

1. Activer la messagerie promotionnelle sur la page (produit ou panier) - Déterminez s’il faut activer la messagerie promotionnelle d’Affirm
2. Couleur - Déterminez la couleur à utiliser pour le logo ou le symbole sur votre message promotionnel Affirm
3. Type - Déterminez le type d’affichage à utiliser pour le message promotionnel Affirm. « Logo » affichera le logo complet d’Affirm, « Texte » n’affichera que le texte et « Symbole » utilisera un logo Affirm plus petit ou partiel.
4. Élément cible - Déterminez l’élément existant déjà sur votre page et que vous aimeriez utiliser pour choisir où le message promotionnel doit être chargé. Ceci s’effectue en ciblant un élément existant, par exemple, sur la page du produit vous pouvez choisir l’affichage existant des prix du produit pour afficher le message promotionnel à côté de ceux-ci. La valeur attendue ici est soit une classe, un ID ou un autre sélecteur jQuery valable.
   
   REMARQUE : Si vous n’êtes pas habitué à CSS, Javascript, ou jQuery, nous vous recommandons de faire appel à un spécialiste en développement Web. Il faut en fait un moyen de dire à cette application quel élément vous voulez cibler, pour que l’application affiche le message Affirm pertinent à côté de cet élément.
   
   
5. Action cible - Ceci indique à l’application où le message promotionnel doit être inséré par rapport à l’élément cible que vous avez spécifié dans le champ précédent. Vous pouvez soit l’Insérer après, l’Insérer avant, l’Ajouter dans ou l’Insérer dans l’élément existant que vous ciblez.

Page de paiement

1. Ne PAS générer automatiquement la commande - Ne pas afficher les instructions avec le bouton « Créer une commande Affirm » sur la page, tentez simplement de lancer automatiquement le processus de paiement Affirm. Sélectionnez cette option uniquement si vous utilisez l’application AdVision de paiement par carte-cadeau.
2. ^{Afficher les instructions au client - Si vous voulez afficher des instructions personnalisées pour votre client, décochez la case « Générer automatiquement une commande » et cochez la case correspondante. Après avoir enregistré les modifications, allez dans l’onglet Traductions et mettez à jour le texte du message « Instructions au client Affirm ».}
   
3. Couleur du texte des boutons - Définissez la couleur du texte de tous les boutons qui apparaissent sur les pages de paiement de l’application. 
4. Couleur d’arrière-plan des boutons - Définissez la couleur d’arrière-plan de tous les boutons qui apparaissent sur les pages de paiement de l’application. 

Chargement des paramètres de page (facultatif) 

1. URL du logo - Fournissez l’URL (absolue) complète (adresse Web) du logo que vous souhaitez afficher sur toutes les pages de téléchargement de cette application.
2. Couleur d’arrière-plan - Sélectionnez la couleur d’arrière-plan que vous souhaitez pour toutes les pages de téléchargement de cette application. 
3. Couleur du texte - Sélectionnez la couleur du texte que vous souhaitez utiliser pour n’importe quel texte affiché sur la page de chargement de cette application. 
4. CSS personnalisé - Uniquement pour les utilisateurs ayant une expérience avancée du code CSS. Tout CSS fourni ici se chargera sur toutes les pages de chargement de l’application. Attention : une utilisation incorrecte de ce champ peut entraîner un problème de fonctionnement de l’application. 
5. Javascript personnalisé - Uniquement pour les utilisateurs ayant une expérience avancée de Javascript. Tout Javascript fourni ici se chargera sur toutes les pages de chargement de l’application. Attention : une utilisation incorrecte de ce champ peut entraîner un problème de fonctionnement de l’application. 

Si vous apportez des modifications à l’un de ces champs de paramètres, assurez-vous de cliquer sur le bouton « Enregistrer les paramètres » pour enregistrer ces modifications. Après avoir sauvegardé vos modifications, assurez-vous de faire défiler la page jusqu’au bas de celle-ci et de cliquer sur « Vérifier l’installation (Publier les modifications) » pour vous assurer que les modifications que vous avez apportées et qui nécessitent une publication sont publiées sur le site Web eCom. Cela peut prendre plusieurs minutes pour que Lightspeed publie les modifications.

Traductions (facultatif) 

Si vous souhaitez modifier le texte qui s’affiche sur l’une des pages ou des widgets de l’application, cliquez sur l’onglet « Traductions ». Vous accédez alors à une liste de textes pour lesquels vous pouvez saisir des traductions dans l’une des langues prises en charge. Chaque texte a une valeur par défaut, mais vous pouvez remplacer cette valeur en saisissant la vôtre dans le champ de traduction du message. N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » après avoir saisi/modifié les traductions. Après avoir mis à jour les traductions, revenez à l’onglet Paramètres et cliquez sur « Vérifier l’installation (Publier les modifications) » pour vous assurer que vos modifications de traduction ont bien été publiées sur le site eCom.

Plusieurs éléments de traduction de l’application Affirm sont spécialement conçus pour prendre en charge les messages promotionnels d’Affirm. Ces éléments comprennent :

1. Affirm - Widget du panier : Utilisé pour l’affichage des messages promotionnels sur la page du panier.
2. Affirm - Widget du produit : Utilisé pour l’affichage des messages promotionnels sur la page du produit.

Dans ces widgets se trouvent des marqueurs spéciaux, qui doivent être conservés pour que l’application puisse contrôler correctement l’affichage des widgets. Ces marqueurs sont des mots entièrement en majuscules, entourés d’accolades, dans le code de l’élément. Les marqueurs actuellement utilisés sont « Prix », « Couleur » et « Type », qui apparaissent dans le code de l’élément sous {PRIX}, {COULEUR} et {TYPE}. D’autres marqueurs dans le produit comprennent des messages sur la marque, la catégorie et l’UGS (Unité de gestion des stocks, SKU en anglais) ; représentés par {MARQUE}, {CATÉGORIE} et {UGS}. Si vous modifiez le code de ces éléments via la fonction de traduction, assurez-vous de laisser les marqueurs en place avec leurs caractéristiques propres si vous voulez que l’application puisse configurer correctement l’affichage de chaque widget en fonction des paramètres que vous avez enregistrés dans l’onglet Paramètres des applications.

Paiements (facultatif) 

Le traitement des opérations terminées (saisie, annulation, remboursement) doit se faire par l’intermédiaire de votre tableau de bord Affirm en suivant les instructions suivantes : https://docs.affirm.com/Merchant_Resources/Merchant_Daily_Operations/Merchant_Dashboard/Processing_Transactions_in_the_Affirm_Dashboard

Si vous préférez, vous pouvez également traiter les transactions via l’application AdVision dans l’onglet « paiements ». Sous cet onglet, tous les paiements seront affichés - les plus récents en premier - pour que vous puissiez voir et compléter les enregistrements, les remboursements et les annulations.

1. Enregistrement - Si votre application est configurée sur « Autoriser seulement », le bouton d’enregistrement s’affiche avec le paiement afin que vous puissiez enregistrer le paiement à une date ultérieure.
2. Annulation - Si vous voulez annuler un paiement, vous pouvez le faire avant qu’il ne soit enregistré.
3. Remboursement - Après l’enregistrement d’un paiement, vous pouvez rembourser ce dernier, en tout ou en partie. Entrez un montant dans le champ de texte sous le bouton de remboursement, puis cliquez sur « Remboursement » pour générer un remboursement pour le montant que vous avez renseigné. Vous pouvez effectuer plusieurs remboursements partiels.

Ajout de code pour gérer les changements de prix 

Cette section est destinée aux concepteurs de thèmes et aux personnes familières avec Javascript. 

Mise à jour des messages promotionnels d’Affirm pour gérer les changements de prix 

Les prix affichés sur vos pages de produits ou de panier peuvent changer en raison de variations des produits, du changement de quantité, etc. Si votre message promotionnel Affirm s’affiche avant la mise à jour des prix, le message sera inexact. Pour maintenir la messagerie à jour, plusieurs fonctions sont disponibles.

Sur la page d’un produit, pour mettre à jour le prix du produit utilisé pour le message promotionnel Affirm, tapez updateAffirmProductPrice(price), « price » étant le prix du nouveau produit. Par exemple :

updateAffirmProductPrice(16000);//160.00

Sur la page du panier, pour mettre à jour le total du panier utilisé pour la messagerie promotionnelle Affirm, tapez updateAffirmCartTotal(total), « total » étant le nouveau total du panier. Par exemple :

updateAffirmCartTotal(20000);//200.00

Afficher le widget du panier à la volée

Si vous disposez d’une fonctionnalité dans votre site Web qui charge dynamiquement l’affichage du panier, vous pouvez le faire en utilisant les fonctions suivantes :

displayAffirmCartWidget() ; //génère et tente d’afficher le widget du panier.

Go to Top

Once installed and setup, the Affirm Payments app will promote and allow U.S. based customers of your site to pay in installments with Affirm.

Follow instructions in Lightspeed eCom to purchase the Affirm Payments app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from AdVision before) OR create a new account with AdVision to install and manage this and any future apps you may purchase.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  

To manage this app, click on "Affirm" under the appropriate shop.  This will take you to the settings for the app.

Settings

Within settings, you can control:

General Settings

1. Enable Affirm - determines if Affirm should show in your checkout as a payment option.  Check this box and save changes to show, uncheck box and save changes to hide.
2. Mode - if you want to perform test transactions with Affirm, set mode to Test.  If you want to take real payments, set mode to Live. 

API Settings

1. Live Public API Key - the production public API key found in your Affirm dashboard
2. Live Private API Key - the production private API key found in your Affirm dashboard
3. Test Public API Key - the sandbox public API key found in your Affirm dashboard
4. Test Private API Key - the sandbox private API key found in your Affirm dashboard
5. Merchant Name - your business name
6. Payment Action - When a customer completes payment when placing their order, do you want to only authorize the payment or do you want to immediately capture it as well? Authorize Only will cause payments to only be authorized during checkout and orders will be marked as "Awaiting Payment". Authorize & Capture will ensure that payment at checkout is not only authorized, but also immediately captured and orders will be marked as "Ready for Shipment".

Site Settings

1. Include Affirm Enhanced Analytics - Do you want Affirm's enhanced analytics code to be included on the final page (order receipt display) of eCom checkout?  If Yes, the app will include tracking code on your eCom website.
2. Minimum Order Threshold - This is the minimum order amount required for Affirm to be displayed as a checkout option. This number must be higher than $50. If blank, the default value of $50 will be used.  If a customer's order total is less than this minimum, Affirm will not be shown as a payment option in your store's checkout. 
3. Maximum Order Threshold - Set the maximum order total needed to make payment via Affirm.  If a customer's order total is more than this maximum, Affirm will not be shown as a payment option in your store's checkout. 

Product and Cart Promotional Messaging

For more information on the Affirm promotional messaging used in this app, please see https://docs.affirm.com/Integrate_Affirm/Promotional_Messaging

1. Enable Promotional Messaging on (Product or Cart) Page - determine whether to enable the Affirm promotional messaging
2. Color - determine the color to use for the logo or symbol on your Affirm promotional messaging
3. Type - determine the type of display to use for the Affirm promotional messaging.  Logo will show the full Affirm logo, Text will show text only, and Symbol will use a smaller/partial Affirm logo.
4. Target Element - Determine which element that already exists on your page and that you'd like to use to determine where the promotional messaging should load.  This is determined by targeting an existing element, for example, on the product's page you might want to target the product's existing price display to show the promotional messaging next to it.  The value expected here is either a class, ID or another valid jQuery selector. 
   
   NOTE: If you're unfamiliar with CSS, Javascript, or jQuery, we recommend you contract someone familiar with web development.  What is needed is a way to tell this app which element you want to target, so the app will show the relevant Affirm messaging next to that element.
5. Target Action - This tells the app where, in relation to the target element you've specified in the previous field, the promotional messaging should be inserted. You can either Insert After, Insert Before, Prepend Within, or Append Within, the existing element you're targeting.

Payment Page

1. Do NOT Auto Generate Order - Don't show instructions with 'Create Affirm Order' button on page, just attempt to automatically start the Affirm payment process.  Only select this if you are using the AdVision Gift Card payment app.  
2. Show Instructions to Customer - if you want to display some custom instructions to your customer, uncheck "Auto Generate Order" setting and check the box for this setting.  After saving changes, go to the Translations tab and update the text for the "Affirm Customer Instructions" message. 
   
3. Button Text Color - Set the color for text within any buttons that show on app's payment pages. 
4. Button Background Color - Set the color for the background of any buttons that show on the app's payments pages. 

Loading Page Settings (optional)

1. Logo URL - Provide full (absolute) URL (web address) to the logo you'd like to display on any of this app's loading page.
2. Background Color - Select the background color you'd like for any of this app's loading page. 
3. Text Color - Select the text color you'd like to use for any text displayed on this app's loading page. 
4. Custom CSS - Only for users with advanced experience working in CSS code. Any CSS provided here will load on any of the app's loading page.   Warning: improper use of this field may cause the app to not function correctly. 
5. Custom Javascript - Only for users with advanced experience working in Javascript. Any Javascript provided here will load on any of the app's loading page.  Warning: improper use of this field may cause the app to not function correctly. 

If you make any changes to any of these settings fields, be sure to click "Save Settings" button to save those changes.  After you have saved your changes, be sure to scroll to the bottom of the page and click "Check Install (Publish Changes)", to ensure any changes you've made that require publishing, are published to the eCom website.  It can take several minutes for Lightspeed to publish changes.

Translations (optional)

If you'd like to change the text that displays on any of the app's pages or widgets, click on the "Translations" tab.  This will take you to a list of text that you can enter translations for in any of the supported languages.  Each piece of text has a default value, but you can override that value by entering your own into the message's translation field.  Be sure to click the "Save Changes" button after you enter/change any translations.  After you update translations, come back to the settings tab and click "Check Install (Publish Changes") to ensure your translation changes are published to the eCom website.

Several translation elements within the Affirm app are specifically built to support the Affirm promotional messaging.  These elements include:

1. Affirm - Cart Widget: Used for the display of the promotional messaging on the cart page
2. Affirm - Product Widget: Used for the display of the promotional messaging on the product page.

Within these widgets are special placeholders, which need to remain for the app to properly control the widget displays.  Those placeholders are all caps words, surrounded by curly brackets, seen in the element's code.  The placeholders currently used are Price, Color, and Type, which show in the element code as {PRICE}, {COLOR}, and {TYPE}.  Additional placeholders in the product  include messaging Brand, Category, and SKU; represented as {BRAND}, {CATEGORY}, and {SKU}.  If you change these elements' code via the translation feature, be sure to leave the placeholders in place with their proper attributes if you want the app to be able to properly configure each widget's display based on the settings you've saved in the apps Settings tab.

Payments (optional)

Processing completed transactions (capture, void, refund) should be done through your Affirm dashboard using the following instructions: https://docs.affirm.com/Merchant_Resources/Merchant_Daily_Operations/Merchant_Dashboard/Processing_Transactions_in_the_Affirm_Dashboard

If you prefer, you can also process transactions through the AdVision app on the "Payments" tab.  Under this tab, any payments will be listed - most recent first - for you to view and complete captures, refunds, and voids.

1. Capture - If you have your app setup to "Authorize Only", the capture button will display with the payment so you can capture the payment at a later date.
2. Void - If you want to void a payment, you can do so before it's captured.
3. Refund - After a payment is captured, you can refund, in full or in part, the payment.  Enter an amount in the text field below the refund button, then click "Refund" to generate a refund for the amount you've entered.  You can submit multiple, partial refunds.

Add code to handle price changes

This section is intended for theme developers and those familiar with Javascript. 

Update Affirm promotional messaging to handle price changes

The price displayed on your product or cart pages may change due to product variants, quantity changes, etc. If your Affirm promotional messaging displays before the price update, the messaging will be inaccurate. To keep messaging updated, there are several functions available.

On a product's page, to update the product price being used for the Affirm promotional messaging, call updateAffirmProductPrice(price), with "price" being the new product price.  For example:

updateAffirmProductPrice(16000);//160.00

On the cart's page, to update the cart total being used for the Affirm promotional messaging, call updateAffirmCartTotal(total), with "total" being the new cart total.  For example:

updateAffirmCartTotal(20000);//200.00

Display CartWidget on the Fly

If you have any functionality within your website that dynamically loads the cart display, you can do so using the following functions:

displayAffirmCartWidget();//generates and attempts to display the cart widget

Go to Top

Follow instructions in Lightspeed eCom to purchase the AfterPay app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  To manage this app, click on it's name "AfterPay Payment Gateway" under the appropriate shop.  This will take you to the settings form.

Under settings, you can control the following:

1. Display - this is the label that will show for this app in the list of payment options in your eCom checkout. 
   
   
2. Active - determines if AfterPay should show in your checkout as a payment option.  Check box and save changes to show, uncheck box and save changes to hide.
   
   
3. Endpoint - set which endpoint (marketplace) to use for this integration 
   
   
4. Mode - if you want to perform test transactions with AfterPay, set mode to Test.  If you want to take real payments, set mode to Live. 
   
   
5. Merchant ID - your account ID from AfterPay. 
   
   
6. Secret Key - your secret key from AfterPay. 
   
   
7. Currency Code - the 3 character ISO 4217 currency code for the base currency being used in your eCom webstore. 
   
   
8. Auto Generate Order - Don't show instructions with 'Create AfterPay Order' button page, just attempt to generate order automatically.  Do not use this if also using our Gift Card payment app. 
   
   
     
   ^{Example "AfterPay Instructions" page, optionally shown to customer before they start generating an order with AfterPay.  Uncheck "Auto Generate Order" to display a page like this to your customers.} 
   
   
9. Show Instructions to Customer - if you want to display some custom instructions to your customer, uncheck "Auto Generate Order" setting and check this setting.  After saving changes, go to the Translations tab and update the text for the "AfterPay Customer Instructions" message. 
   
   
10. Button Text Color - Set the color for text within any buttons that show on app's payment pages. 
    
    
11. Button Background Color - Set the color for the background of any buttons that show on the app's payments pages. 
    
    
12. AfterPay Min (per your contract) - Set the minimum order total needed to make payment via AfterPay.  If a customer's order total is less than this minimum, AfterPay will not be shown as a payment option in your store's checkout.  On a product's page, if the price doesn't meet the minimum, the AfterPay pricing breakdown widget will not display. 
    
    
13. AfterPay Max (per your contract) - Set the maximum order total needed to make payment via AfterPay.  If a customer's order total is greater than this maximum, AfterPay will not be shown as a payment option in your store's checkout.  On a product's page, if the price is not less than the maximum, the AfterPay pricing breakdown widget will not display. 
    
    
14. Widget Logo Color - Indicates which AfterPay logo should be shown with the AfterPay "Call to Action" text on a product's details page.
    
    
15. Widget Background Color - set the background color for the widget display. 
    
    
16. Widget Text Color - set the color of text within the widget display. 
    
    
17. Widget Position - determine where the AfterPay Price Breakdown widget should display on the product details page. You can either have it:
    1. Overlay at the Top of the Window
    2. Overlay at the Bottom of the Window
    3. or Target an Existing Element in the page to insert the widget next to 
18. Widget Target Element - Only required if Widget Position is set to 'Target an Existing Element'.  Set where on your product page you want the AfterPay "Call to Action" to display.  This is determined by targeting an existing element, usually the product's existing price display block, in your product page.  The value expected here is either a class, ID or another valid jQuery selector. 
    
    NOTE: If you're unfamiliar with CSS, Javascript, or jQuery, we recommend you contract someone familiar with web development.  What is needed is a way to tell this app which element you want target, in the product page, so the app will show the AfterPay "Call to Action" text next to that element.
19. Widget Target Action - Only required if Widget Position is set to 'Target an Existing Element'.   This tells the app where, in relation to the target element you've specified in the previous field, the Call to Action should be inserted. 
20. Icon - Select the icon you'd like to see next to the payment option in your checkout.  The available icons are limited to these options offered by Lightspeed. 
    
    
21. Logo URL - Provide full (absolute) URL (web address) to the logo you'd like to display on any of this app's payment pages. 
     
22. Background Color - Select the background color you'd like for any of this app's payment pages. 
    
    
23. Text Color - Select the text color you'd like to use for any text displayed on this app's payment pages. 
    
    
24. Custom CSS - Only for users with advanced experience working in CSS code. Any CSS provided here will load on any of the app's payment pages.   Warning: improper use of this field may cause the app to not function correctly. 
    
    
25. Custom Javascript - Only for users with advanced experience working in Javascript. Any Javascript provided here will load on any of the app's payment pages.  Warning: improper use of this field may cause the app to not function correctly. 

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.  After you have saved your changes, be sure to scroll to the bottom of the page and click "Check Install (Publish Changes)" to ensure any changes you've made are published to the eCom website.  It can take several minutes for Lightspeed to publish changes.

If you'd like to change the text that displays on any of the app's pages, click on the "Translations" tab.  This will take you to a list of text that you can enter translations for in any of the supported languages.  Each piece of text has a default value, but you can override that value by entering your own into the message's translation field.  Be sure to click the "Save Changes" button after you enter/change any translations.  After you update translations, come back to the settings tab and click "Check Install (Publish Changes") to ensure your translation changes are published to the eCom website.

On the webstore it will be like: 

2- Or, you can upload your own image to be displayed as a swatch but you would assign a negative rank to it as in 

This will not show this image as preview thumbnails but as swatches as in. 

The app handles the tracking of registries, registry items and the purchase of registry items.

Once installed, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list (see Exhibit A), which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  To manage this app, click on it's name "Gift Registry" under the appropriate shop.  This will take you to the Gift Registry app’s settings form.

Settings

Under settings, you can control the following:-

1. Gender Options: Tell the system which gender options should be available when a customer is creating a Baby Shower registry.
2. Registry Type Options: Tell the system which types of registries customers can create.
3. 'Add to Registry' Button - Target: Determines where on a product’s page to show the “Add to My Gift Registry” button.
4. 'Add to Registry' Button - Action: Determines where the button should show in relation to the target (set above).  I.e. Insert before or after, prepend, or append to the target.
5. Record Purchase On: Determines when the system should record a registry item as purchased.  You can have it mark items as purchased as soon as the order is created in eCom (regardless of payment status) or wait to record the purchase for the registry until the order’s payment is paid.
6. SMTP Settings: Used for outgoing email to send email to your customers whenever a new purchase is recorded for items on one of their registries.

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.

Online store Pages Setup

The next step in setting up your Gift Registry app is to setup the necessary pages in your LightSpeed eCom online store. To do this, login to your eCom admin, then go to Content>>Pages.  The app requires two pages exist in your online store:

1. My Gift Registries (you can update the title to whatever you like, just make sure the URL name for the page is “my-gift-registries”), with the following HTML content:
   
   

   <div id="my-gift-registries-page" class="gift-registry-app">Loading...</div>

   You can update “Loading...” to say whatever you like, or to an image, just make sure the surrounding DIV tag is unchanged.

2. Gift Registries (you can update the title to whatever you like, just make sure the URL name for the page is “gift-registries”), with the following HTML content:
   

   <div id="gift-registries-page" class="gift-registry-app">Loading...</div>

   You can update “Loading...” to say whatever you like, or to an image, just make sure the surrounding DIV tag is unchanged.

Once those pages are setup, you can now go to those pages on your online store to see what they load. 

1. My Gift Registries (/service/my-gift-registries) will display an error with a link to login if you’re not logged into a customer account.  Once logged into a customer account, this page will display any of that customer account’s registries (registries that account created and owns).   This link is automatically added into the account menu when logged into an account (/account/).
2. 2- Gift Registries (/service/gift-registries/) will show the public gift registries page where users can search public registries.  We recommend adding a link to this page in the navigation ,somewhere prominently displayed on your online store, so customers looking for registries will be directed to this page.

Once the app is setup and customers have started using it, back within the app admin, click on the Registries tab.  This will show any existing registries customers have created.  You can click to view the details of a registry, see any items on the registry, or view the logs (orders placed for registry items and history log of any changes made to the registry).

Create a Gift Registry

To create a new registry, login to a customer account on your eCom online store.  Once logged in, in the account menu you should see a link for “My Gift Registries”.  Click that, then on the page that loads, click “Create a New Registry” button.

In the form that loads, fill in the following fields:

1. Registry Name: Title the registry as you like.  This will show as the registry’s name to anyone looking for the registry.
2.  Active: Check this box to make the registry active (will show in search results if Public).  Leave unchecked to have the registry be inactive (won’t show in search results).
3. Public or Private: Determine if you want this registry to be public (available to anyone, shows in search results when searching registries) or private.  Private registries do not show up in search results and require a special key (URL link provided after saving registry as private) to view.
4. Registry Type: Determines the type of the registry this is.  Baby Shower type has a special fields for baby info, but all other types have the same fields.  Type can be used when searching for a registry.  The options displayed here can be controlled by the “Registry Type Options” setting in the app’s Settings tab.
5. Event Name: Enter a name for the event this registry is for.
6. Event Date: If event for this registry is occurring on a particular date/time, set that here.  The registry will no longer show to public after the event date has passed.
7. Event Description: Describe the event this registry is for.
8. Registrant Name: Your name, or the name of the primary person this registry is created for.
9. Registrant Email: The email address that should be notified when an item is purchased for this registry.
10. Co-Registrant Name: Commonly used for spouses name (if wedding or baby shower). If registry type is Baby Shower…
    
    
11. Baby’s Name: name of the baby this shower is for
12. Baby’s Due Date: date baby is due to be born
13. Baby’s Gender: select the gender of the baby.  The options displayed here can be controlled by the “Gender Options” setting the app’s Settings tab.
14. Is first child: check if this is the first child for the registrant.

Once you’ve filled out the required fields, click “Save Changes”.  The registry will be created and you’ll be forwarded to the “Manage” page for the registry.  It’s now time to add items to the registry.

Adding Items to a Registry

To add items to a registry, simply browse the catalog on the online store.  When you find an item you want to add to the registry, click to view the product’s details page.  Depending on the app settings, somewhere around the “Add to Cart” button will be a link to “Add to My Registry”.  Clicking this will display a couple fields:

1. Select a Registry to Add this Item To: Choose the registry you’d like to add this item to.  This field is required as you can have multiple registries setup at the same time.
2. How many of this item do you want?: Enter the quantity of this item you’d like.  This amount will show up as the “Quantity Wanted” amount on your registry so registry users will know how many of this item you want.

Once you’ve selected the registry and entered the amount you want, click “Add to Selected Registry Now”.  The item will now be listed on the registry you selected.

Managing an Existing Registry

Need to edit one of your registries?  Simply login to your customer account on the online store, then go to “My Gift Registries” (a link in the account menu).  This will list any registries in your account.  You can delete the registries in the list using the “Delete Registry” button, or click on the registry’s name to edit it.

Whening editing a registry, you can manage the items assigned under the “Products” tab.  This displays any products you’ve added to this registry.  You can update the quantity wanted for each item (change the quantity, then click outside the field and change will be auto saved), or remove an item from the registry using the “Remove from Registry” button.

To edit a registry’s info, click on the “Details” tab where you can edit any of the fields you first set when creating the registry.

To view a log of items ordered from this registry, click the “Orders” tab.

To view a log of any changes made to this registry, click the “History” tab.

Helpful Video Tutorials

Buying from the Gift Registry

Create and Manage Gift Registry

Owner Administration of the Gift Registry

Frequently Asked Questions

Question: How can I account for an item purchased in store for a registry?

Answer: Login to your AdVision app account, click on Gift Registry app link, find the registry you want to manage and click on it, then click on "Products" tab, and modify the "Qty Purchase" amount for items on any registry

Question: Can order ship to the registry owner's address? Or is it just pick up in store?

Answer: The app cannot force a particular shipping address or shipping method.  We recommend including instructions with each registry to direct the user where the order should ship and/or if any shipping method (like store pickup) is preferred.

Question: Once an event passes, the registry closes. Is there a way for customers to continue to purchase off the registry? Can it stay open for a year or so?

Answer: If you activate the "Show after event" setting, registries will remain active until manually closed.

Question: Public & Private URLs - are they sharable for both or do they have to search for it?

Answer: Either can be shared.

Question: Any way to offer a discount code for specific to a registry item on a specific registry.

Answer: The app cannot control discount functionality, that is handled by internal eCom logic.

Question: Product pricing or QOH in app doesn't appear correct, how can this be fixed?

Answer: If using Catalog Clone v2, please contact AdVision support.  If running Catalog Clone v1: you can run a catalog sync from the Catalog Clone app in your AdVision app account.  Go to the apps for the shop you're working on, click on Catalog Clone and from the products tab, click "Full Sync".  Leave the page/window open while the sync runs.  The cloner will listen for changes to your account and update it's data when it detects changes, but it's possible for changes to become out of sync if there's a communication issue with Lightspeed's API.  If you see data issues like this, simply run a manually sync from the clone app to get data up to date.

Question: In the event that a customer purchases from the registry in store, how we adjust the quantity for the registry?

Answer: In your app account, click on the Gift Registry app, under Registries find the the registry you want to manage and click on it. Then under the products tab you can modify the Qty Purchased for any items on the registry.

Follow instructions in Lightspeed eCom to purchase the Sift Science Fraud Prevention app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  To manage this app, click on it's name "Sift Science Fraud Prevention)" under the appropriate shop.

Before you can start using the app, you need to connect it to your Sift account, which you can do under the Setup tab. 

Under Setup, so you'll be directed to either provide the connection information for your existing Sift account, or you can fill out a form in the app and we'll create a new Sift account for you.  In the Setup form, you fill out the following:

1. Already have a Sift Account?: To use this app, you're  required to have an account with Sift. 
   
   If you already have one, select "I already have a Sift Account", after which you need to fill in:
   
   a. Sift Account ID: Login to your Sift account, go to the profile page and get your Production Account ID: https://siftscience.com/console/account/profile
   b. Sift API Key:  Once logged into your Sift account, go to Developer>>API Keys and copy the 'REST API Key' value: https://siftscience.com/console/developer/api-keys?abuse_type=payment_abuse
   
   Once those fields are completed, click "Save Sift Account Info" and your app will be setup to connect to your Sift Account.  You can then continue to the Settings tab.
   
   If you don't have a Sift account yet, select "I don't have a Sift Account", after which you need to fill in:
   
   a.Site Domain: Enter the domain name for your webstore. Example: advision-ecommerce.webshopapp.com
   b. Password: Enter the password you'd like to use for your Sift account.
   c. Site Email: Enter the main email address for your webstore
   d. Analyst Email: Enter the email you'd like to receive reports from your Sift account.
   
   Once you've filled out those fields, click "Create Sift Account" and the app will attempt to create an account with Sift Science for you.  If an account is successfully created, your app will be setup to connect with that new Sift Account, so you can continue to the Settings tab.

Once the app is connected to your Sift account, you can complete the settings form to setup a Javascript snippet in your webstore, indicate your Risk Threshold score, and set the base currency being used in your webstore.  In the settings, fill in the following:

1. JS Snippet Key *: The Javascript Snippet Key is used to install some Javascript on your webstore that allows for additional reporting and analysis from Sift.  Login to your Sift Account to get your Javascript Snippet Key, available at the link below (once logged in). https://siftscience.com/console/developer/api-keys?abuse_type=payment_abuse
   
   
2. Risky Threshold: Set your risk threshold score. Any event (order created/paid) above this score, you'll be notified by email.  If you're unsure what score to set, consult Sift to determine what maximum score you're comfortable with.
   
   
3. Base Currency Code: Set the base currency code that is being used in your Lightspeed eCom Shop (must match for accuracy).

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.

*If this is your first time setting the JS Snippet Key, or if you're changing the JS Snippet Key, after you click "Save Settings", you'll need to ensure the webstore is updated with new Javascript.  To do so, after you save your settings, find the button below the form that will say "Finalize Install Now" (if this is your first time setting up the app) or "Check Install/Publish Changes" (if app has been settings have previously been setup).  Click this button to ensure the Javascript is properly installed/updated in your webstore.

Once you've completed the settings form, you're done! Future new, updated and paid order events in your webstore will be scored by Sift and any that exceed your risk threshold will be logged in the app (with a link to a detailed report in your Sift account) and you'll be notified via email. 

You can check the Summary tab for a quick view of recent events and alerts, or for a full list of events and alerts in your app, use their respective tabs: "Events" and "Alerts". 

Under Events, the app will log any events that exceed your Risk Threshold (events under the risk threshold will be not be logged in the app), and with each event you can click the "View Customer in Sift" to get a detailed report and decide if you want to proceed with fulfilling that customer's order.  You can also search the Events log by Order Id or Customer Id (system generated numeric order and customer Id's from eCom).

Under Alerts, the app will let you know if something failed any why.  Commonly errors are logged here if an event fails to be scored by Sift.  The alerts in the app are just to let you know a problem occured, so you can decide if you want to go into your Sift account to manually score an order.  If you're unsure about an error being reported, please check our FAQs and if you can't find an answer there, you can contact us at info@advision-ecommerce.com

Sift Science App: Frequently Asked Questions

Q. Is the app built into our Lightspeed dashboard or is it its own separate account on another website where we would access from Also will the report Sift generates show up in the orders section of our Lightspeed dashboard?

Ans. No, it doesn't show in any Lightspeed dashboard.  They can see alerts and basic info of those alerts in the app dashboard (external from LS) or more details reports in their Sift account.

Q. With the automations and triggers that we set, is there any option for declining the transaction/order automatically, or does it simply highlight and rank the orders for us to more easily find in Lightspeed?

Ans. No, it won't auto decline, just alerts if the order exceeds fraud score threshold.  Nothing shows "in Lightspeed".

Q. Do you offer support with setting up the snippets and settings in the account if we are less than tech savvy?

Ans. Yes, we can help setup the app with you.

Q. Does the app retroactively pull data from previous orders to help determine what may or may not be fraudulent?

Ans. It only works for orders that are created, updated or paid after the app is installed.  So if a previously placed order is updated or paid for after the app is installed, it would detect that and check it's risk.  But if the previously placed order doesn't create any events after app is installed, app will never be aware of them and neither will Sift.

Q. How many factors are involved in the risk report or is that depend on how we set up our account?

Ans. That's a better question for Sift as they handle the risk calculation.  Our app just creates the connection and logs/notifies when an event exceeds risk score.

Q. How sensitive is the ranking system? How likely is it likely we would cancel orders that are not fraudulent?

Ans. I'd suggest you speak with Sift and review how they calculate risk.  How sensitive our app is depends on the "risk threshold score" you set.  Determining what risk threshold you're comfortable would best be decided by playing with Sift's fraud tool and see what scores you get back for different order info, then choosing a score that ignore orders that you know are OK but alerts you for orders that may be fraudulent.

Once installed, the Age Verification apps will display a popup the first time a user visits your site.  It's intention is the stop the user from viewing any site content without first confirming they are above the required age for entry.  After a user confirms their age, the popup will not display again until their next site visit/session.

Follow instructions in Lightspeed eCom to purchase the Age Verification app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  To manage this app, click on it's name "Age Verification" under the appropriate shop.  This will take you to the age verification settings form.

Under settings, you can control the following:

1. Minimum Age Required - allows you to set how old users should be to enter your webstore.  This defaults to 18, but you can set it to any number you like to determine the required age for entry.
   
   
2. Required Birthdate be Entered - if you want to make your users enter their birthdate in the age verification popup, check this box.  When checked, the user will be presented with month, day and year select menus to enter their birthdate into.  The birthdate entered will be compared to the Minimum Age Required setting to ensure what the user has entered meets the required age.
   
   
3. Exit URL - if a user does not meet the age requirement, the popup provides an "exit" button to send the user elsewhere.  Using this setting, you can provide the URL you want to send the user to if they choose not to verify they meet the required age.  This defaults to send the user to http://google.com (Google's homepage).
   
   
4. Overlay Background Color - when the age verification popup shows, it display any overlay color in the background (which covers up the content of your site).  Here you can choose what you color you'd like to use for that overlay.
   
   
   
   
5. Popup Background Color - this controls the background color of the popup box (that shows centered in the browser window)
   
   
6. Popup Text Color - controls the color of text show in the popup box
   
   
7. Popup Border Color - a small border lines the popup box, this allows you to set the color of that border line.
8. Loading Text Color * - when a user first visits your site, it can take 1-2 second for the age verification to load.  During this time, since the user has yet to verify their age, we hide your site content and simply showing the age verification loading text.  This setting lets you set the color of that text.
   
   

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.

If you'd like to change the text that displays in the age verification app, click on the "Translations" link in the upper right hand corner.  This will take you to a list of text that you can enter translations for in any of the supported languages.  Each piece of text has a default value, but you can override that value by entering your own into the message's translation field.  Be sure to click the "Save Changes" button after you enter/change any translations. *

* After making a change to the "Loading Text Color" setting or any Translation changes, you'll need to click "Check Install/Publish Changes" for those changes to take effect on your web store.

"Une fois installé, les applications de vérification d'âge affichent un popup la première fois qu'un utilisateur visite votre site. Il est l'intention est que l'utilisateur arrête d'afficher tout le contenu du site sans avoir d'abord confirmant qu'ils sont dessus de l'âge requis pour l'entrée. Une fois qu'un utilisateur confirme leur âge, le popup n'affichera à nouveau jusqu'à leur prochaine visite du site / session ».

"Suivez les instructions dans Lightspeed eCom pour acheter l'application Vérification de l'âge de l'App Marketplace. Au cours de l'installation, vous serez redirigé vers notre site de gestion de l'application soit connexion à un compte existant (si vous avez acheté une application Lightspeed eCom de nous avant) OU créer un nouveau compte avec nous pour installer et gérer cela et toutes les applications futures vous pouvez acheter chez nous pour Lightspeed eCom. "

Une fois que vous avez créé un compte ou connecté à votre compte existant, l'application installe automatiquement, après quoi vous serez redirigé vers la liste des magasins, qui affiche une liste de boutiques Lightspeed eCom enregistrées avec votre compte et toutes les applications installées avec ces magasins. Pour gérer cette application, cliquez sur son nom "Vérification de l'âge» dans la boutique appropriée. Cette volonté vous amène à la forme des paramètres de vérification de l'âge.

Sous Paramètres, vous pouvez contrôler les éléments suivants:

1. "Âge minimum requis - vous permet de définir comment les utilisateurs vieux devrait être d'entrer dans votre boutique en ligne. La valeur par défaut à 18, mais vous pouvez le régler à tout numéro que vous souhaitez afin de déterminer l'âge requis pour l'entrée. "
2. Date de naissance requise être saisie - si vous voulez faire vos utilisateurs d'entrer leur date de naissance dans le vérification de l'âge contextuel, cochez cette case. Lorsqu'elle est cochée, l'utilisateur sera présenté avec mois, jour et année des menus de sélection pour entrer leur date de naissance dans. La date de naissance entré volonté être comparé au réglage âge minimum requis pour assurer ce que l'utilisateur a entré répond l'âge requis.
   
   
3. URL de sortie - si un utilisateur ne répond pas à la condition d'âge, le popup fournit un bouton "de sortie" d'envoyer l'utilisateur ailleurs. L'utilisation de ce paramètre, vous pouvez fournir l'URL que vous souhaitez envoyer l'utilisateur si elles choisissent de ne pas vérifier qu'ils répondent l'âge requis. La valeur par défaut pour envoyer le utilisateur à http://google.com (la page d'accueil de Google).
   
   
4. Fond Overlay Couleur - Lorsque la vérification de l'âge pop-up montre, il afficher toute superposition la couleur en arrière-plan (qui couvre le contenu de votre site). Ici vous pouvez choisir ce que vous vous colorez souhaitez utiliser pour cette superposition.
   
   

5. Background Popup Color - ce  contrôle la couleur de fond la boîte de pop-up (qui de spectacles centrés  dans la fenêtre de navigateur) 

6. Popup Couleur du texte - contrôle la couleur du texte apparaîtra dans la case popup pour définir la couleur de cette ligne de frontière.

7. Popup Border Color - une petite frontière lignes de la boîte de pop-up, vous permet pour définir la couleur de cette ligne de frontière.

8. Chargement Text Color * - quand un utilisateur visite abord votre site, il peut prendre 1-2 secondes pour l'âge vérification à charger. Pendant ce temps,  puisque l'utilisateur n'a pas encore de vérifier leur   âge, nous nous cachons votre  le contenu du site et en montrant simplement le texte vérification de l'âge de chargement.   Ce paramètre permet de définir la couleur de ce texte. 

"Si vous apportez des modifications à l'un de ces domaines, assurez-vous de cliquer sur" Enregistrer les paramètres "" "bouton pour enregistrer ces changements. "

Si vous souhaitez modifier le texte qui apparaît dans l'application de vérification de l'âge, cliquez sur les "traductions" lien dans le coin supérieur droit. Cela vous mènera à une liste de texte que vous pouvez entrer traductions pour l'une des langues prises en charge. Chaque morceau de texte a une valeur par défaut, mais vous pouvez remplacer cette valeur en entrant votre propre dans le domaine de la traduction du message. Assurez-vous de cliquez sur le bouton "Enregistrer les modifications" après avoir entré / modifier les traductions. *

* Après avoir fait un changement à la "Chargement Text Color" réglage ou toute modification de traduction, vous besoin de cliquer sur "Vérifier Installation / Publier les modifications" pour que ces modifications prennent effet sur votre boutique en ligne.

Once installed and setup, the Color Swatches app will allow users of your site to select the color of a product based on representative swatch images you've uploaded.  So if you have product with color options like Red, Blue, or Leopard Print, you can upload images (or set a solid color) for each that shows the customer a swatch of that color/pattern on the product's details page.  When a swatch is clicked on, the color option is updated and eCom performs the standard functionality that normally occurs on color selection (i.e. pricing, stock, product image gallery info update).

Follow instructions in Lightspeed eCom to purchase the Color Swatches app from the App Marketplace.  During install, you'll be forwarded to our app management site to either login to an existing account (if you've purchased a Lightspeed eCom app from us before) OR create a new account with us to install and manage this and any future apps you may purchase from us for Lightspeed eCom.

Once you've created an account or logged into your existing account, the app installs automatically, after which you'll be forwarded to the shops list, which displays a list of Lightspeed eCom shops registered with your account and any apps installed with those shops.  

For the Color Swatches app to function, the Catalog Clone app is installed at the same time.  Catalog Clone app is needed to clone (and keep in sync with)  your eCom catalog into our app framework (so your catalog can be available to the Color Swatches app in the app admin).  Before you start working in the Color Swatches app, you'll want to perform the initial sync in the Catalog Clone app to pull your current catalog of products into your AdVision app account.  To do this, click on the "Catalog Clone" app link, and then click the button "Import/Full Sync Catalog".  Be sure to leave your browser window open and computer on while the import runs.

Once you've imported your catalog into your AdVision app account, you can now begin working in the Color Swatch app.  

WARNING: Be sure to assign your image files unique filenames before uploading. If you use duplicate filenames, those files will overwrite each other. For example: If you upload "image-1.jpg" to Product A, and then a different file with the same filename of "image-1.jpg" to Product B, the second upload will overwrite the file from the first upload, which will cause Product A and Product B to use the same image file.

Check out our video tutorial!

To manage this app, click on it's name "Color Swatches" under the appropriate shop.  This will take you to the products listing view showing any products the Catalog Clone app has imported from eCom.

Each product in your catalog will show in this view, and with each product you can see the following info:

1. ID - in AdVision app system
2. eCom ID - the product's ID in eCom
3. Title
4. URL - path to the product in your eCom webstore
5. Visibility - whether or not the product is set to show in your eCom webstore
6. Has Swatches - indicates if you've uploaded any swatches for the product in the app yet

Now we can start setting up swatches.  First, find a product that you know has a color option in your catalog.  You can do this by either browsing through the list of products or by using the keyword search at the top.  Once you locate the product you want to work with, click on it's title to manage it's swatches.

If the product you've selected has any variants (e.g. Color, Size) setup for it in eCom, you'll see them listed on the page that loads.  With each variant, you'll see it's title (e.g. Color), under which will be listed any options within that variant.  For example, variant options for Color might Red, Blue, and Green; for each variant option there will be a thumbnail displayed that shows:

1. A box that will show the option's image or color swatch, once you've set it
2. The option's title (e.g. Blue)
3. A default caption field, which you can set to determine the value that will be used for the option's image's ALT and TITLE attributes.  If you leave this blank, the option's title (e.g. Blue) will be used for ALT and TITLE.  Not familiar with ALT and TITLE?  Please check out https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/
4. Below the default caption field are two icons, the image icon and the color palette icon.  The image icon (left) is used to upload an image for the option's swatch.  The color palette icon (right) is if you choose to set a solid color for the option's swatch instead of using an image.

Selecting a Color for Swatch

If a solid color is sufficient for an option's swatch, you can use the color picker to find and set a simple, solid color to represent the option.  Using a solid color allows the swatch to load faster for your customers (solid colors load faster than images) and allows you to avoid having to prepare an image.  To use the color picker, click the color palette icon under the option you want to work with, use the color picker tool to find and select your color and then click the "Choose" button.  This will set the options color and display the color in the options thumbnail swatch.

Uploading an Image for the Swatch

If you need something more detailed than a solid color display for the swatch, you can prepare and upload an image to be used.  Before uploading the image, you must first prepare it.

At the top of the page you’ll see a message titled “Please remember to optimize your images before upload”.  This outlines the requirements for a swatch image.  Each swatch image you plan to use should be:

1. A maximum of 150 pixels wide
2. 72 DPI
3. Optimized for the web.  If you’re unfamiliar with optimizing images for the web, please check out https://www.abetterlemonadestand.com/optimizing-images-for-web/  Failure to optimize an image before upload may result in the image failing to upload into the app, and will result in slower load times for your customers when loading the swatch images.
4. Height of the image can be whatever you want, but the height should be uniform for all swatch images.

Once you’ve prepared your swatch images as necessary, click on the image icon under the option you want to upload an image to.  This will produce the file selection dialog box from your operating system so you can locate the file you’ve prepared and want to use.  Once you find the file, select it (double click or click on it and then click “Open” or “Select”).The image will upload immediately for the swatch and you see a thumbnail of the image display above the option’s title.

Once you’ve completed setting all the swatches for a product, visit the product’s page in your eCom webstore.  By default, any swatches you’ve set will show below the variant’s select menu.  Note that if you don’t set a color or image swatch to all options within a variant, any options that were neglected will show their title in place of a color or image swatch.  To fix this, be sure to set an image or color swatch for every option in a variant that you’re going to use swatches for.

Now that you’ve seen how to setup swatches for a product, click on the Settings tab to see the fields you can adjust. Under settings, you can control the following:

1. Swatch Width - This will determine how wide the color and image swatches will display on a product's page. You can enter as a pixel value (e.g. 50px - this is the recommended method), a percentage (e.g. 80%), an em value (e.g. 3em), or with a pt value (e.g. 48pt). What to know about these sizing units? Check out https://www.w3.org/Style/Examples/007/units.en.html.  The default width is 30px, maximum width 150px.
2. Image Swatch Height - Determine the how tall the image swatches will display on product pages.  The default image swatch height is 30.
3. Color Swatch Height - Determine the how tall the color swatches will display on product pages.  The default color swatch height is 30.
4. Split on Dash - This is for advanced use only.  AdVision will recommend under certain circumstances.

If you make any changes to any of these fields, be sure to click "Save Settings" button to save those changes.

Go to Top

Nach der Installation und Einrichtung ermöglicht die Color Swatches App den Benutzern Ihrer Website, die Farbe eines Produkts anhand repräsentativer Musterbilder, die Sie hochgeladen haben, auszuwählen. Wenn Sie also ein Produkt mit Farboptionen wie Rot, Blau oder Leopardendruck haben, können Sie Bilder hochladen (oder eine Vollfarbe einstellen), die dem Kunden ein Muster dieser Farbe / dieses Musters auf der Detailseite des Produkts anzeigen. Wenn Sie auf ein Muster klicken, wird die Farboption aktualisiert und eCom führt die Standardfunktionen aus, die normalerweise bei der Farbauswahl auftreten (z.B. Preisgestaltung, Lagerbestand, Aktualisierung der Informationen zur Produktbildgalerie).

Folgen Sie den Anweisungen in Lightspeed eCom, um die Color Swatches App über den App Marketplace zu kaufen. Während der Installation werden Sie zu unserer App-Management-Site weitergeleitet, um sich entweder bei einem bestehenden Konto anzumelden (wenn Sie bereits eine Lightspeed eCom-Anwendung von uns gekauft haben) oder ein neues Konto bei uns zu erstellen, um diese und alle zukünftigen Anwendungen zu installieren und zu verwalten, die Sie von uns für Lightspeed eCom erwerben können.

Sobald Sie ein Konto erstellt oder sich in Ihr bestehendes Konto eingeloggt haben, wird die App automatisch installiert. Danach werden Sie zur Shop-Liste weitergeleitet, die eine Liste der mit Ihrem Konto registrierten Lightspeed eCom-Shops und alle mit diesen Shops installierten Anwendungen anzeigt.

Damit die Color Swatches App funktionieren kann, wird gleichzeitig die Catalog Clone App installiert. Die Catalog Clone App wird benötigt, um Ihren eCom-Katalog in unser App-Framework zu klonen und damit zu synchronisieren (damit Ihr Katalog für die Color Swatch App im App-Admin verfügbar ist). Bevor Sie mit der Arbeit in der Color Swatches App beginnen, sollten Sie die erste Synchronisierung in der Catalog Clone App durchführen, um Ihren aktuellen Produktkatalog in Ihr AdVision App-Konto zu ziehen. Klicken Sie dazu auf den App-Link "Catalog Clone" und dann auf die Schaltfläche "Importieren/gesamten Katalog synchronisieren". Achten Sie darauf, dass Ihr Browserfenster geöffnet und Ihr Computer eingeschaltet ist, während der Katalog importiert wird.

Nachdem Sie Ihren Katalog in Ihr AdVision App-Konto importiert haben, können Sie nun mit der Arbeit in der Color Swatch App beginnen.

Schauen Sie sich unser Video-Tutorial an!

Um diese App zu verwalten, klicken Sie auf den Namen "Color Swatches" unter dem entsprechenden Shop. Dies führt Sie zur Ansicht der Produktliste mit allen Produkten, die die Catalog Clone App aus eCom importiert hat.

Jedes Produkt in Ihrem Katalog wird in dieser Ansicht angezeigt, und mit jedem Produkt können Sie die folgenden Informationen einsehen: 

1. ID - im AdVision App-System
2. eCom ID – die Produkt-ID in eCom
3. Titel
4. URL – Pfad zum Produkt in Ihrem eCom Webstore
5. Sichtbarkeit - ob das Produkt in Ihrem eCom-Webshop angezeigt wird oder nicht.
6. Muster - zeigt an, ob Sie bereits Muster für das Produkt in der App hochgeladen haben

Jetzt können wir mit der Erstellen von Mustern beginnen. Finden Sie zuerst ein Produkt, von dem Sie wissen, dass es eine Farboption in Ihrem Katalog hat. Sie können dies tun, indem Sie entweder durch die Liste der Produkte blättern oder die Schlüsselwort-Suche oben verwenden.  Sobald Sie das Produkt gefunden haben, mit dem Sie arbeiten möchten, klicken Sie auf den Titel, um seine Muster zu verwalten.  

Wenn für das von Ihnen ausgewählte Produkt in eCom Varianten (z.B. Farbe, Größe) eingerichtet sind, werden diese auf der Seite, die geladen wird, aufgelistet. Bei jeder Variante sehen Sie ihren Titel (z.B. Farbe), unter dem alle Optionen innerhalb dieser Variante aufgelistet sind. Varianten für Farbe können zum Beispiel Rot, Blau und Grün sein; für jede Variantenoption wird ein Miniaturbild angezeigt, das Folgendes anzeigt:

1. Ein Feld, das das Bild oder die Farbmuster der Option anzeigt, sobald Sie es eingestellt haben
2. Den Titel der Option (z.B. Blau)
3. Ein Standardbeschriftungsfeld, bei dem Sie einstellen können, welcher Wert für die ALT und TITEL Attribute des Bilds der Option verwendet werden. Wenn Sie dieses Feld leer lassen, wird der Titel der Option (z.B. Blau) für ALT und TITLE verwendet. Nicht vertraut mit ALT und TITLE? Bitte besuchen Sie https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/
4. Unter dem Standardbeschriftungsfeld befinden sich zwei Symbole, das Bildsymbol und das Farbpalettensymbol. Das Bildsymbol (links) wird verwendet, um ein Bild für das Muster der Option hochzuladen. Das Farbpalettensymbol (rechts) wird verwendet, wenn Sie eine Vollfarbe für das Muster der Option festlegen, anstatt ein Bild zu verwenden.

Auswahl einer Farbe für das Muster

Wenn eine Vollfarbe für das Muster einer Option ausreichend ist, können Sie die den Farbwähler verwenden und eine einfache Vollfarbe einstellen, um die Option darzustellen. Bei Verwendung einer Vollfarbe kann das Muster für Ihre Kunden schneller geladen werden (Vollfarben laden schneller als Bilder); so können Sie es vermeiden, ein Bild vorbereiten zu müssen. Um den Farbwähler zu verwenden, klicken Sie auf das Farbpalettensymbol unter der Option, mit der Sie arbeiten möchten, verwenden Sie das Farbwähler-Tool, um Ihre Farbe zu finden, und klicken Sie dann auf die Schaltfläche "Auswählen". Dadurch wird die Farbe der Option festgelegt und die Farbe im Miniaturbild angezeigt.

Hochladen eines Bildes für das Muster

Wenn Sie etwas Detaillierteres als ein Vollfarbdisplay für das Muster benötigen, können Sie ein Bild vorbereiten und hochladen. Bevor Sie das Bild hochladen, müssen Sie es zunächst vorbereiten.

Oben auf der Seite finden Sie eine Anmerkung unter dem Titel "Denken Sie bitte daran, Ihre Bilder vor dem Hochladen zu optimieren." Darin sind die Anforderungen an ein Musterbild festgelegt. Jedes Musterbild, das Sie verwenden möchten, sollte Folgendes erfüllen:

1. Maximale Breite von 150 Pixeln
2. 72 DPI
3. Optimiert für das Internet. Wenn Sie nicht damit vertraut sind, wie man Bilder für das Internet optimiert, besuchen Sie bitte https://www.abetterlemonadestand.com/optimizing-images-for-web/ Wenn Sie ein Bild vor dem Hochladen nicht optimieren, kann dies dazu führen, dass das Bild nicht in die App hochgeladen wird, sodass Ihre Kunden länger auf das Laden der Musterbilder warten müssen.
4. Das Bild kann beliebig hoch sein, sollte jedoch für alle Musterbilder gleich sein.

Nachdem Sie Ihre Musterbilder wie benötigt vorbereitet haben, klicken Sie auf das Bildsymbol unter der Option, zu der Sie ein Bild hochladen möchten.  Dadurch wird das Dateiauswahl-Dialogfeld Ihres Betriebssystems geöffnet, damit Sie die Datei finden können, die Sie vorbereitet haben und verwenden möchten. Wenn Sie die Datei gefunden haben, wählen Sie sie aus (per Doppelklick oder durch Klicken auf das Symbol und Auswahl von "Öffnen" oder "Auswählen"). Das Bild wird sofort für das Muster hochgeladen und Sie sehen ein Miniaturbild der Bildanzeige. 

über dem Titel der Option. 

Wenn Sie alle Muster für ein Produkt eingestellt haben, besuchen Sie die Produktseite in Ihrem eCom-Webshop. Standardmäßig werden alle von Ihnen eingestellten Muster unterhalb des Auswahlmenüs der Variante angezeigt. Beachten Sie, dass, wenn Sie nicht alle Optionen innerhalb einer Variante mit einem Farb- oder Bildmuster versehen, alle vernachlässigten Optionen ihren Titel anstelle eines Farb- oder Bildmusters anzeigen. Um dies zu korrigieren, sollten Sie für jede Option in einer Variante ein Bild oder ein Farbmuster festlegen, für die Sie Muster verwenden werden.

Nachdem Sie nun gesehen haben, wie Sie Muster für ein Produkt einrichten, klicken Sie auf die Lasche "Einstellungen", um die Felder zu sehen, die Sie verändern können. Unter Einstellungen können Sie Folgendes festlegen:

1. Musterbreite - Dies bestimmt, wie breit die Farb- und Bildmuster auf der Produktseite angezeigt werden. Sie können als Pixelwert (z.B. 50px - dies ist die empfohlene Methode), als Prozentsatz (z.B. 80%), als em-Wert (z.B. 3em) oder als pt Wert (z.B. 48pt) eingeben. Was muss man über diese Maßeinheiten wissen? Bitte besuchen Sie https://www.w3.org/Style/Examples/007/units.en.html. Die Standardbreite ist 30px.
2. Bildmusterhöhe – Legt fest, wie hoch die Bildmuster auf den Produktseiten angezeigt werden. Die Standard-Bildmusterhöhe ist 30.
3. Farbmusterhöhe - Legt fest, wie hoch die Farbmuster auf den Produktseiten angezeigt werden. Die Standard-Farbmusterhöhe ist 30.
4. Split-on-Dash – Diese Funktion ist für fortgeschrittene Benutzer gedacht. AdVision wird die Verwendung dieser Funktion unter bestimmten Bedingungen empfehlen.

Wenn Sie Änderungen in einem dieser Felder vornehmen, sollten Sie auf "Speichern" klicken, um diese Änderungen zu speichern.

Go to Top

Van zodra geïnstalleerd en ingesteld, maakt de Color Swatches App het voor de gebruikers van uw website mogelijk om de kleur van een product te kiezen om basis van de door u opgeladen en representatieve staalafbeeldingen. Wanneer u dus een product hebt met kleuropties zoals Rood, Blauw of Luipaardmotief, kunt u afbeeldingen opladen (of een vaste kleur instellen) voor elk product, waardoor u de klant een overzicht geeft van die kleur/motief op de pagina met de productdetails. Wanneer men een staal aanklikt, krijgt de kleuroptie een update en voert eCom de standaardfuncties uit die men normaal aantreft bij een kleurselectie (namelijk de prijs, de voorraad, de update van de galerij met productafbeeldingen).

Volg de instructies in Lightspeed eCom indien u de Color Swatches App wilt aankopen via de App Marketplace. Tijdens de installatie wordt u doorverwezen naar onze website voor het beheren van de Apps om er in te loggen met een bestaande account (indien u voorheen al bij ons een Lightspeed eCom App aankocht) OF om een nieuwe account aan te maken bij ons, waardoor u deze en toekomstige Apps die u bij ons zal aankopen voor Lightspeed eCom kunt installeren en beheren.

Van zodra u een account hebt aangemaakt of bent ingelogd met uw bestaande account, wordt de App automatisch geïnstalleerd om u vervolgens door de sturen naar de lijst van de Lightspeed eCom winkels, geregistreerd met uw account evenals alle andere Apps die bij deze winkels zijn geïnstalleerd.

Voor de goede werking van de Color Swatches App, wordt de Cataloog Clone App ook geïnstalleerd op hetzelfde moment. Deze Catalog Clone App is nodig voor het kopiëren van (en het synchroniseren met) uw eCom-catalogus in ons App framework (zodat uw catalogus beschikbaar wordt voor de Color Swatches App in het beheersmenu van de App). Alvorens u begint te werken in de Color Swatches App, zult u eerst de synchronisatie in de Catalog Clone App moeten uitvoeren om uw huidige productcatalogus te importeren in uw AdVision account. Om dit uit te voeren klikt u op de "Catalog Clone" link, en vervolgens klikt u op de knop "Import/Full Sync Catalog". Houd zeker uw navigatievenster open en laat uw computer aanstaan tijdens de uitvoering van deze import.

Van zodra uw catalogus is ingevoerd in uw AdVision App account, kunt u direct beginnen werken in de Color Swatch app.

Bekijk onze handleiding op video!

Om deze App te beheren, klik op de naam "Color Swatches" onder de betrokken winkel. U krijgt vervolgens een zicht op de lijst met producten, waarin men alle producten toont die de Catalog Clone App heeft geïmporteerd uit eCom.

Elk product in uw catalogus worden zichtbaar en voor elk product ziet u de volgende informatie: 

1. ID – in het systeem van de AdVision App
2. eCom ID – de ID van het product in eCom
3. Titel
4. URL – de weg naar het product in uw eCom webwinkel
5. Visibiliteit – of uw product al dan niet online zichtbaar is in uw eCom webwinkel
6. Has Swatches (‘heeft beschikbare stalen’) – geeft aan of u al stalen voor het product hebt opgeladen in de App.

Nu kunnen we starten met het installeren van uw stalen. Vooreerst, zoek een product in uw catalogus waarvan u weet dat het beschikt over een kleurkeuze. U kunt dit doen, ofwel door te bladeren doorheen de lijst van producten, ofwel door gebruik te maken van de zoekfunctie op sleutelwoorden bovenaan de pagina. Van zodra u het product waarop u wilt werken hebt gelokaliseerd, klik deze titel aan om de stalen te kunnen beheren.

Indien er varianten zijn op het door u geselecteerde product (bv. Kleur, Grootte) geconfigureerd in eCom, zullen deze zichtbaar zijn op de pagina die oplaadt. Voor elke variant zult u de naam zien (bv. Kleur), met daaronder een overzicht van alle opties voor deze variant. Bijvoorbeeld, de variant opties voor de kleur zouden Rood, Blauw en Groen kunnen zijn; voor elk van deze variant opties zal er een thumbnail (=‘miniatuurvoorstelling’) verschijnen die volgende informatie toont:

1. Een box die de afbeelding of het kleurstaal weergeeft van de afbeelding, van zodra u deze hebt bepaald
2. De titel van de optie     (bv.Blauw)
3. Een standaardveld met de legende, dat u kunt instellen om de attributen ALT en TITLE van de afbeelding van de optie.te bepalen Indien u deze niet invult, dan zal de titel van de optie ( bv. Blauw) worden gebruikt voor ALT en TITLE. U bent niet vertrouwd met ALT en TITLE? Meer informatie op: https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/
4. Onder het standaardveld met de legend bevinden zich 2 icoontjes, het icoontje voor de afbeelding en het icoontje voor de kleurenpalet. Het icoontje voor de afbeelding (links) wordt gebruikt voor het opladen van een afbeelding van het staal van de optie. Het icoontje voor de kleurenpalet (rechts) gebruikt u wanneer u een vaste kleur instelt voor het staal van de optie, in plaats van een afbeelding te gebruiken.

Kiezen van een staalkleur.

Indien een vaste kleur volstaat voor de het staal van een optie, kunt u de kleurenkiezer gebruiken op het vinden en het gebruiken van een eenvoudige vaste kleur voor het weergeven van de optie. Dankzij het gebruik van een vaste kleur zal het staal sneller zichtbaar zijn voor uw klant (vaste kleuren laden sneller op dan afbeeldingen) en het laat u toe om de voorbereiding van een afbeelding te vermijden. Om de kleurenkiezer te gebruiken, klikt u onder de optie waarmee u wilt werken op het icoontje met het kleurenpalet. Om uw kleur te vinden en te selecteren klikt u vervolgens op de 

"Choose" knop (Kiezen). Dit zal de kleur bepalen van de optie en de kleur weergeven in het overzicht van de opties aan stalen. 

Opladen van een afbeelding voor het staal

Indien u met meer details wilt werken voor het staal, kunt u de gewenste afbeelding voorbereiden en opladen. Alvorens de afbeelding op te laden, moet u deze eerst voorbereiden. 

Bovenaan de pagina zult u een boodschap zien staan met de titel “Please remember to optimize your images before upload” (“Vergeet niet om uw afbeeldingen te optimaliseren alvorens ze op te laden”). Tot zover de vereisten voor een afbeelding van een staal. Elke afbeelding van een staal die u plant te gebruiken moet voldoen aan volgende voorwaarden:

1.  Maximum breedte van 150 pixels
2. Beschikken over 72 DPI

3. Geoptimaliseerd zijn voor het Internet. Indien u niet vertrouwd bent met het optimaliseren van afbeeldingen voor het Internet,, lees meer op
   https://www.abetterlemonadestand.com/optimizing-images-for-web

4. De hoogte van de afbeelding bepaalt u volledig vrij, doch de hoogte zou uniform moeten zijn voor alle afbeeldingen van stalen.

Van zodra u de afbeeldingen van de stalen hebt voorbereid zoals gewenst, klik dan op het icoontje voor de afbeelding onder de optie waarvoor u een afbeelding wenst op te laden. Hierdoor zorgt u voor de aanmaak van de dialoogbox nodig voor de selectie van het bestand vanop uw operationeel systeem, zodat u het bestand dat u voorbereidde kunt lokaliseren en gebruiken. Van zodra u dit bestand hebt gevonden klikt u dit aan (klik of dubbelklik en klik vervolgens op “Open” of “Select”). De afbeelding voor dat staal zal onmiddellijk opladen en je zult een thumbnail zien met de voorstelling van deze afbeelding boven de naam van deze optie.

Wanneer u klaar bent met de configuratie van alle stalen voor een product, bezoek dan deze productpagina in uw eCom webwinkel. Standaard zult alle stalen zien die u configureerde onder het variant keuzemenu. Niet vergeten dat wanneer u geen staal voor een kleur of afbeelding configureert voor alle opties van een variante, de namen van alle opties die werden genegeerd zullen te zien zijn in plaats van een staal van een kleur of afbeelding. Wanneer u dit wilt herstellen, zorg er dan voor dat u goed het staal voor de afbeelding of kleur definieert voor alle opties van een variante waarvoor u stalen zult gebruiken.

Nu u hebt gezien hoe men de stalen voor een product moet definiëren, klik op de “Settings” (‘Instellingen’) knop om een overzicht te krijgen van de velden die u kunt aanpassen. Onder de rubriek Instellingen kunt u de volgende elementen controleren:

1. Breedte van de stalen – Dit zal bepalen hoe breed de stalen van de kleur en afbeelding zullen worden voorgesteld op een productpagina. U kunt een pixelwaarde ingeven (bv. 50px - dit is de aanbevolen methode), een percentage (bv.80%), een waarde in em (bv. 3em), of met een waarde uitgedrukt in pt.(bv. 48pt). Wat moet u weten over deze dimensioneringseenheden? Meer info op https://www.w3.org/Style/Examples/007/units.en.html. De standaard breedte is 30px.
2. Hoogte van het staal van de afbeelding – bepaal de hoogte van de stalen van de afbeelding op de productpagina’s. De standaardhoogte van een staal van een afbeelding is 30.
3. Hoogte van het staal van de kleur- Bepaal de hoogte van de stalen van de kleur op de productpagina’s. De standaard hoogte van een staal van een kleur is 30.
4. Opsplitsen van de tabel - Dit is enkel voor gevorderde gebruikers. AdVision zal onder bepaalde omstandigheden aanbevelingen verschaffen.

Bij het aanbrengen van om het even welke aanpassingen aan deze velden, wees dan zeker dat u klikt op de knop “Save Settings" (“bewaren instellingen”) om deze wijzigingen op te slaan. 

Go to Top

Une fois installée et configurée, l’application Color Swatches permettra aux utilisateurs de votre site de sélectionner la couleur d’un produit en fonction des images représentatives que vous avez chargées. Ainsi, si vous avez un produit avec des options de couleur comme rouge, bleu ou imprimé léopard, vous pouvez télécharger des images (ou définir une couleur unie) pour chaque produit, montrant au client un échantillon de cette couleur/motif sur la page des détails du produit. Lorsqu’on clique sur un échantillon, l’option de couleur est mise à jour et eCom exécute la fonctionnalité standard qui s’applique normalement à la sélection de couleur (c.-à-d. le prix, le stock, la mise à jour de la galerie des images du produit).

Suivez les instructions sur Lightspeed eCom pour acheter l’application Color Swatches sur l’App Marketplace. Pendant l’installation, vous serez redirigé vers notre site de gestion des applications pour vous connecter à un compte existant (si vous avez déjà acheté une application Lightspeed eCom chez nous) OU pour créer un nouveau compte chez nous, vous permettant d’installer et de gérer cette application et toutes les futures applications que vous pourriez acheter chez nous pour Lightspeed eCom.

Une fois que vous avez créé un compte ou que vous vous êtes connecté à votre compte existant, l’application s’installe automatiquement, après quoi vous serez redirigé vers la liste des boutiques Lightspeed eCom enregistrées avec votre compte et toutes les applications installées avec ces boutiques.

Pour que l’application Color Swatches fonctionne, l’application Catalog Clone est installée en même temps. L’application Catalog Clone est nécessaire pour copier votre catalogue eCom (et rester en synchronisation avec celui-ci) dans le cadre de notre application (afin que votre catalogue soit disponible pour l’application Color Swatches dans l’administrateur de l’application). Avant de commencer à travailler dans l’application Color Swatches, vous devrez effectuer la synchronisation initiale dans l’application Catalog Clone pour extraire votre catalogue actuel de produits dans votre compte AdVision. Pour ce faire, cliquez sur le lien « Catalogue Clone » (Cloner catalogue), puis sur le bouton « Import/Full Sync Catalog » (Importer/Catalogue synchronisé complet). Assurez-vous de laisser ouverte la fenêtre de votre navigateur et votre ordinateur allumé durant l’importation.

Une fois que vous avez importé votre catalogue dans votre compte AdVision, vous pouvez commencer à travailler dans l’application Color Swatch.

Regardez notre tutoriel vidéo !

Pour gérer cette application, cliquez sur son nom (Color Swatches) dans la boutique adéquate. Vous verrez alors la liste des produits montrant tous les produits que l’application Catalog Clone a importés d’eCom.

Tous les produits de votre catalogue s’afficheront et avec chaque produit, vous verrez les informations suivantes :

1. ID - dans le système de l’application AdVision
2. ID eCom - l’ID du produit dans eCom
3. Titre
4. URL - chemin vers le produit dans votre boutique eCom en ligne
5. Visibilité - si le produit est prêt ou non à être affiché dans votre boutique eCom en ligne 
6. Has Swatches (Echantillons disponibles) - indique si vous avez déjà téléchargé des échantillons pour le produit dans l’application.

Nous pouvons à présent commencer à installer les échantillons. Tout d’abord, trouvez dans votre catalogue un produit qui a une option de couleur. Vous pouvez le faire soit en parcourant la liste des produits, soit en utilisant la recherche par mot-clé en haut de la page. Une fois trouvé le produit sur lequel vous désirez travailler, cliquez sur son nom afin de gérer ses échantillons.

Si le produit que vous avez sélectionné a des variantes (par exemple Couleur, Taille) configurées dans eCom, elle seront reprises sur la page qui se charge. Pour chaque variante, vous verrez son nom (par exemple Couleur), sous lequel seront reprises toutes les options de la variante en question. Par exemple, les options de variante pour Couleur peuvent être Rouge, Bleu et Vert ; pour chaque option de variante, une vignette s’affiche indiquant :

1. Une boîte qui montrera l’image ou la nuance de couleur de l’option, une fois que vous l’avez définie
2. Le titre de l’option (p. ex. Bleu)
3. Un champ de légende par défaut, que vous pouvez paramétrer afin de déterminer les attributs ALT et TITLE de l’image de l’option. Si vous le laissez vierge, le titre de l’option (p. ex. Bleu) sera utilisé pour ALT et TITLE. Vous n’êtes pas familier avec ALT et TITLE ? Veuillez lire https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/
4. Sous le champ de légende par défaut se trouvent deux icônes, l’icône d’image et celle de palette de couleurs. L’icône d’image (à gauche) permet de télécharger une image pour l’échantillon de l’option. L’icône de la palette de couleurs (à droite) vous sert à définir une couleur unie pour l’échantillon de l’option plutôt que d’utiliser une image.

Sélectionner une couleur d’échantillon

Si une couleur unie est suffisante pour l’échantillon d’une option, vous pouvez utiliser le sélecteur de couleurs pour trouver et utiliser une simple couleur unie afin de représenter l’option. L’utilisation d’une couleur unie permet à vos clients de charger l’échantillon plus rapidement (les couleurs unies se chargent plus vite que les images) et vous permet d’éviter de préparer une image. Pour utiliser le sélecteur de couleurs, cliquez sur l’icône de la palette de couleurs sous l’option avec laquelle vous voulez travailler, utilisez l’outil de sélection de couleurs afin de trouver et de sélectionner votre couleur et cliquez ensuite sur le bouton « Choose » (Choisir). Ceci définira la couleur des options et affichera la couleur dans l’aperçu des options.

Télécharger une image pour l’échantillon

Si vous avez besoin de quelque chose de plus détaillé qu’un affichage dans une couleur pour l’échantillon, vous pouvez préparer et télécharger une image à utiliser. Avant de télécharger l’image, vous devez tout d’abord la préparer.

En haut de la page, vous verrez le message suivant « Please remember to optimize your images before upload » (« N’oubliez pas d’optimiser vos images avant de les télécharger »). Voici les exigences requises pour l’image d’un échantillon. Chaque image d’un échantillon que vous désirez utiliser doit :

1. Avoir une largeur maximale de 150 pixels
2. Avoir 72 dpi
3. Être optimisée pour le Web. Si vous n’êtes pas familier avec l’optimisation d’images pour le Web, veuillez consulter la page https://www.abetterlemonadestand.com/optimizing-images-for-web/ Si vous n’optimisez pas une image avant le téléchargement, l’image risque de ne pas être téléchargée dans l’application, ce qui ralentira les temps de chargement pour vos clients lors du chargement des images des échantillons.
4. La hauteur de l’image est libre, mais elle doit être uniforme pour toutes les images des échantillons.
   

Une fois que vous avez préparé vos images d’échantillons, cliquez sur l’icône de l’image sous l’option pour laquelle vous voulez télécharger une image. Ceci permettra la création de la boîte de dialogue de sélection du fichier dans votre système d’exploitation afin que vous puissiez trouver le fichier que vous avez préparé et que vous désirez utiliser. Après avoir trouvé le fichier, sélectionnez-le (cliquez ou double cliquez sur celui-ci et cliquez ensuite sur « Open » (Ouvrir) ou « Select » (Sélectionner)). L’image se chargera immédiatement pour l’échantillon et vous verrez une vignette de l’image sous le nom de l’option.

Lorsque vous avez terminé de configurer tous les échantillons pour un produit, visitez la page du produit dans votre boutique eCom en ligne. Par défaut, tous les échantillons que vous avez configurés s’afficheront sous le menu de sélection de la variante. Notez que si vous ne définissez pas un échantillon de couleur ou d’image pour toutes les options d’une variante, les noms de toutes les options qui ont été négligées s’afficheront au lieu d’un échantillon de couleur ou d’image. Pour résoudre cela, assurez-vous de bien définir un échantillon d’image ou de couleur pour toutes les options d’une variante pour laquelle vous utiliserez des échantillons.

Maintenant que vous avez vu comment définir les échantillons d’un produit, cliquez sur l’onglet Settings (Paramètres) pour voir les champs que vous pouvez ajuster. Sous Paramètres, vous pouvez contrôler les éléments suivants :

1. Largeur des échantillons - Ceci déterminera la largeur des échantillons de couleurs et d’images sur la page d’un produit. Vous pouvez indiquer une valeur en pixels (par ex. 50px - c’est la méthode recommandée), un pourcentage (par ex. 80 %), une valeur en em (par ex. 3em) ou une valeur en pt (par ex. 48 pt). Que faut-il savoir sur ces unités de dimensionnement ? Lisez https://www.w3.org/Style/Examples/007/units.en.html. La largeur par défaut est de 30px.
2. Hauteur de l’échantillon d’image - Déterminez la hauteur d’affichage des échantillons d’image sur les pages des produits. La hauteur par défaut des échantillons d’images est 30.
3. Hauteur de l’échantillon de couleurs - Déterminez la hauteur d’affichage des échantillons de couleur sur les pages des produits. La hauteur d’échantillon de couleur par défaut est 30.
4. Séparation du tableau - Uniquement pour les utilisateurs avancés. Dans certaines circonstances, AdVision fournira des recommandations.
   

Si vous apportez des modifications à n’importe lequel de ces champs, n’oubliez pas de cliquer sur « Save Settings » (Enregistrer les paramètres) pour enregistrer ces modifications.

Go to Top

When a user is checking out from your eCom website, the payment option we setup for the Gift Card app will display as an option in checkout.  If selected, once the user completes eCom checkout, they are sent to our payment page where they can enter their gift card codes to apply their gift card balances to the order.  If the user's gift cards don't cover the full order balance due, we setup a "back-up" credit card form (to work through your preferred payment gateway), so the user can use a credit card to cover the remaining balance due.  Once payment is completed with gift cards (and credit card if necessary), the user is forwarded back to the order receipt page of your eCom website.

When the app takes a gift card payment, it has to create a separate sale in your Lightspeed Retail account to debit the card. When the app is installed, you'll note AdVision created a new product in your LSR for gift card payments. Please don't modify or remove this product, it's needed for the app to charge the appropriate amount to gift cards.

Some common issues

Issue:

We had your gift card app installed not too long ago. We have had several customers call in confused and/or angry about receiving an order confirmation before any payment processing has taken place. I'd appreciate help with this error asap.

Resolution:

Today, you reached out regarding an issue with your Advision gift card customization. Every time a customer reaches the customization, an order confirmation is sent.

This can be remedied by removing all the content and title from the Order Confirmation email, and reconfiguring the contents of your Order Paid email notification. This way no order confirmations will be sent, but customers who completed sales will still receive the necessary information.

Please note this will inhibit your ability to receive email notifications for orders. I would highly recommend installing Order Alert https://www.lightspeedhq.com/ecommerce/store/apps/order-alert-for-lightspeed/ in your Lightspeed eCom back office, and searching the Google Play or Apple App store for the corresponding order alert app. This will allow you to continue receiving notifications for orders without the need for notification emails.

Selling and Generating Gift Cards

To sell gift cards on eCom, you can setup gift card products for certain amounts ($5, $10, $25 gift card, etc.) in your catalog.  When a customer purchases one of these, you can either: a) setup the app to auto-generate and email the gift card or b) manually setup the gift card in your LSR account (https://retail-support.lightspeedhq.com/hc/en-us/articles/228842287-Selling-and-recharging-gift-cards) and deliver the gift card code to the customer.  If you want the app to auto-generate cards, continue reading...

Based on product SKUs you provide to the app to identify gift card items (see Digital Product SKUs and Physical Product SKUs fields below), the app will check eCom orders that come through your site for gift card items.  When an order is marked as paid in eCom, the app will check that order to determine if there are any gift card items in it.  If one or more gift card items are found in the order, for each card purchased, the app will attempt to:

1. Create a new gift card in your Retail account
2. Create a new sale (separate from the eCom sale) in Retail to charge (credit) the created card for the price of that gift card item (e.g. $10 gift card is priced at $10 so the created gift card in Retail will be credited with a balance of $10)
3. If the gift card product is "digital", app will attempt to email the card to the intended recipient

Within your AdVision app account, the gift card app provides:

1. Under the Summary tab, any recent errors related to the generating of gift cards
2. Under the Cards tab, a list of any cards recorded from eCom orders along with each card's status, an action button (to retry a failed action or resend email for digital cards), and a "view log" link for activity history of the card)
3. Under the Orders tab, a list of any orders that had gift card items in them that the app recorded

Settings

Within the app's Settings form and under "Auto-Generate Gift Cards" section, check the box "Generate Gift Cards and Email Automatically" and fill out the following fields:

1. Alert Email on Failure: provide an email address the app can alert if a failure occurs when attempting to generate a gift card.
2. Digital Product SKUs For Gift Card: For the app to detect and create gift cards when purchased, you need to tell it which product SKUs (from your eCom catalog) to look for.  In this field, enter the product SKUs for any "Digital" gift card products.  Digital gift cards means the app should email the gift card info to the purchaser (if you don't want gift card info emailed, use the Physical Product SKUs field).
   
   For example: if I want to sell a $10 gift card that will be automatically emailed to the customer when purchased, I'd set up a non-inventory item in my Retail catalog called "$10 gift card" (or whatever description you choose) priced at $10, with Manufacturer SKU set to something like "10-digital-gift-card".  Then in app's settings, within Digital Product SKUs field, I'd enter that SKU "10-digital-gift-card".  Now the app will know to look for this item in eCom orders.
   
   If offering multiple digital gift card products for sale, you'll need to enter the SKU of each digital gift card product into the field, separated by a comma (e.g. "10-digital-gift-card, 15-digital-gift-card, 25-digital-gift-card").
   
   The app creates gift cards based on the amount charged for the gift card item.  E.g. If user pays $10 for the gift card item, app will create a gift card with a balance of $10.  For this reason, you should not discount or tax these gift card items.
3. Physical Product SKUs For Gift Card: For the app to detect and create gift cards when purchased, you need to tell it which product SKUs (from your eCom catalog) to look for.  In this field, enter the product SKUs for any "Physical" gift card products.  Physical gift cards means the app will NOT email the gift card info to the purchaser, the app will only create and charge the card in your Retail account for you, and delivery of the card to the customer is left up to you.
   
   For example: if I want to sell a $10 gift card, I'd set up an item in my Retail catalog called "$10 gift card" (or whatever description you prefer) priced at $10, with Manufacturer SKU set to something like "10-gift-card".  Then in app's settings, within Physical Product SKUs field, I'd enter that SKU "10-gift-card".  Now the app will know to look for this item in eCom orders.
   
   If offering multiple physical gift cards, you'll need to enter the SKU of each physical gift card product into the field, separated by a comma (e.g. "10-gift-card, 15-gift-card, 25-gift-card").
4. Gift Card Prefix: If you'd like to set a custom prefix to the EAN13 code used by gift cards in Retail, you can enter a 3 digit prefix here.  If left empty, 200 will be used as the code prefix.  For example, if we set this to 333, any cards generated by the app would have a code that starts with 333 (e.g. 333000000001).
   
   Warning: Some prefixes will allow a card to be created, but not charged. Consult with Lightspeed Retail support for acceptable prefixes for gift cards.
5. 'Paid By' Payment Type ID: Indicate the payment type you'd like the app to use when charging the card.  If left empty, Cash payment type will be used.
6. Employee ID for Generate Sales: Indicate the employee ID to use when charging a card.  If left empty, will use the same Employee ID set at the top of the settings form (which is used when the app needs to debit a card when customer uses the card for payment in eCom checkout).
7. Register ID for Generate Sales: Indicate the register ID to use when charging a card.  If left empty, will use the same Employee ID set at the top of the settings form (which is used when the app needs to debit a card when customer uses the card for payment in eCom checkout).
8. SMTP for Outgoing Email: When we setup your gift card app, we'll ask for SMTP info to be used when sending outgoing email from your app (for digital gift card emails or to alert you of errors).  The SMTP credentials to be used are chosen with this field.

Once you've filled in the necessary fields, be sure to click "Save Settings".

Common Questions

• Question:  Why can't I indicate a Shop ID?
  
  The app currently charges cards using the same Shop ID set for debiting cards.
• Question:  What if I only want to offer one type (digital or physical) of cards?
  
  If you only want to create digital gift cards, simply leave the "Physical Product SKUs" field empty.  Likewise, if you only want to create physical gift cards, leave the "Digital Product SKUs" field empty. One or the other needs to be set if you want the app to auto-generate gift cards from eCom purchases.

Additional Considerations for Digital Cards

Optional Security Settings

If you're auto-generating digital gift cards (card info that is automatically emailed upon order payment), it's highly recommended that you consider one or both of the "Authentication" settings offered in the app:

1. Use Description as Pin: If checked, when the app creates the gift card, it will enter a random 3 digit number in the card's "description" field in Retail, and that number will then be required to use the gift card as payment in eCom checkout.  You can choose to include this pin in the email sent with the gift card info, or if you're concerned about fraudulent purchases, you could provide it manually in a separate email or via phone after you're sure the order is not fraudulent.  If you choose to exclude the pin from the email, it's recommend you inform the customer of this fact and how/when you'll provide the pin.
2. Require Gift Card Purchaser's Name: if checked, the customer will be required to enter the first and last name of the person that ordered the gift card.  The first/last name must match (case-insensitive) the first and last name on the eCom order (the billing first/last name).  If you use this setting, it's recommend you provide instructions to the gift recipient in the gift card email.

Setup Gift Recipient Fields

If you'd like to offer your customer's the ability to purchase a gift card for someone else, you can do so by setting up a specific set of custom fields for the digital gift card items in your eCom catalog.  The fields must match the following underlined values:

1. Sender name
   
   The name of the person making the purchase (i.e. the gift giver).  If not provided, will default to order purchaser's name.
2. Sender email
   
   The email of the person making the purchase, this will be set as the "Reply to" email address for the email sent to the recipient with the gift card info.  If not provided, will default to order purchaser's email.
3. Recipient email
   
   The email address of the gift recipient (where the app should send the gift card info to).  If not provided, will default to order purchaser's email.
4. Recipient name
   
   The name of the gift recipient.  If not provided, will default to order purchaser's name.
5. Message to Recipient
   
   (optional) The gift message to include in email to recipient (e.g. "Happy birthday!")

If you'd like to name these fields something else, or need to support other languages, go to the app's Translations and look for these field names in the records (e.g. "Sender email", "Sender name", "Recipient email", "Recipient name", "Message to Recipient").  The default field name is listed in the first column, and you can enter the field name you plan to use in the second column.  Be sure to click "Save Changes" after entering/updating any translations.

Gift Cards Email Content

If you're selling digital gift cards and would like to modify the email subject or body content that is used when the app emails gift card info, go to the app's Translations and look for "Gift Card - Generated Card Email Subject" and "Gift Cards - Generated Card Email Body" records.  The default value is shown in the left hand column and you can enter your preferred version in the right hand column.  Note the following placeholders and the value each will be replaced with:

1. PURCHASER_NAME = purchaser's first and last name
2. PURCHASER_EMAIL = purchaser's email address
3. RECIPIENT_NAME = recipient's name (if no recipient, uses purchaser's name)
4. RECIPIENT_EMAIL = recipient's email (if no recipient, uses purchaser's email)
5. CARD_CODE = the full EAN13 code for the card from Retail
6. CARD_PIN = card's pin (if "Use Description as Pin" is checked under "Authentication" in app's settings)
7. MESSAGE = if you've setup a custom field to allow a gift message to be included, this will be replaced with that message (see "Setup a Gift Recipient Fields" above)
8. AMOUNT = the amount the gift card is for

Note: placeholder names must be wrapped in curly braces (e.g. "{CARD_CODE}")

Be sure to click "Save Changes" after entering/updating any translations.

Check out this video that outlines how the compiler and order splitter apps work.

eCom/Retail Order Refunds

Please note: the splitter does not automatically handle refunds.  If an eCom order is refunded after the splitter has handled the order, you will need to manually locate and refund any split sales created from that eCom order.