Sites web existants - personnalisation de vos intégrations

Voir ici pour notre guide sur l'intégration sur un site Web existant.

Shoprocket offre un contrôle total sur l'apparence de vos intégrations de code via le générateur de code dans votre tableau de bord.

Sélectionnez le type d'intégration que vous souhaitez (gadget Produit unique, Produit en pleine page, plusieurs Produits ou panier) puis activez/désactivez les éléments que vous souhaitez inclure, ainsi que personnalisez les tailles, styles et comportements.

Une fois que vous avez apporté des modifications à votre code d'intégration, vous devrez le copier et le coller sur votre site Web à l'endroit où vous souhaitez qu'il apparaisse. (si vous faites des modifications ultérieures, vous devrez à nouveau copier et coller le code)

Vous pouvez également cliquer sur "Enregistrer comme paramètres par défaut" dans le menu de gauche pour enregistrer vos paramètres d'intégration afin que tous les codes d'intégration futurs que vous générez commencent avec les mêmes paramètres.

Options

Les options suivantes sont disponibles dans la section "Options" du menu de gauche :

1. Produits à afficher - Choisissez d'afficher tous les Produits ou uniquement les Produits de catégories spécifiques
2. Taille du produit - Définissez la taille d'affichage des éléments intégrés (petit, moyen ou grand)
3. Ajustement de l'image - Définissez si les images des Produits doivent être recadrées à la taille disponible ou réduites (recadrées garderont toutes les images de la même taille et plus uniformes)
4. Style du bouton - choisissez entre "Standard" (boutons rectangulaires avec texte) "Minimal" (boutons ronds avec icônes) ou "Au survol" (boutons ronds avec icônes qui apparaissent uniquement lorsque l'on survole le Produit)
5. Ordre de tri par défaut - Définissez l'ordre de tri par lequel les Produits seront listés par défaut (Défaut, Nouveaux en premier, Nom : A-Z, Nom : Z-A, Prix : Faible à Élevé, Prix : Élevé à Faible)
6. Produits par page - Spécifiez combien de Produits à charger dans la vue
7. Cacher les Produits en rupture de stock - Choisissez de cacher complètement les Produits en rupture de stock ou de les afficher avec un message "En rupture de stock"

Inclut

Vous pouvez également spécifier quels éléments inclure, comme le bouton "Voir le produit", et les "Ribbons"

Les inclusions suivantes sont disponibles dans la section "Inclut" du menu de gauche :

1. Boîte de recherche - Affiche le champ "recherche" au-dessus de votre intégration de Produits (disponible uniquement sur l'intégration de plusieurs Produits)
2. Boîte de tri - Affiche le menu déroulant de l'ordre de tri (disponible uniquement sur l'intégration de plusieurs Produits)
3. Limiteur par page - Affiche le menu déroulant des éléments par page (disponible uniquement sur l'intégration de plusieurs Produits)
4. Boîte de devise - Affiche le menu déroulant de la devise pour que les clients puissent voir les prix dans leur devise préférée (les devises doivent d'abord être activées dans les paramètres de votre boutique)
5. Boîte de langue - Affiche le menu déroulant de la langue pour que les clients puissent changer de langue (les textes de la boutique doivent d'abord être configurés dans vos paramètres)
6. Boîte de catégorie - Affiche le menu déroulant de la catégorie, permettant aux clients de filtrer les Produits par catégorie (disponible uniquement sur l'intégration de plusieurs Produits)
7. Nom du Produit - Affiche le nom du Produit
8. Prix du Produit - Affiche le prix du Produit
9. Image du Produit - Affiche l'image principale du Produit
10. Résumé du Produit - Affiche le texte résumé du Produit
11. Bouton Voir le Produit - Affiche le bouton pour ouvrir les détails complets du Produit dans une fenêtre modale
12. Bouton Ajouter au panier - Affiche le bouton pour ajouter l'article au panier (des options apparaîtront ci-dessus au survol, les Produits nécessitant des options/variantes plus avancées ouvriront la fenêtre modale de voir le produit au clic)
13. Quantité de commande min/max - Affiche les quantités minimales et maximales de commande disponibles, si définies dans votre Produit
14. Ruban livraison gratuite - Affiche le ruban "Livraison gratuite" sur votre Produit si la livraison gratuite est applicable
15. Ruban nouveau Produit - Affiche le ruban "Nouveau" sur les Produits ajoutés dans les 20 derniers jours
16. Ruban téléchargement numérique - Affiche le ruban "Téléchargement numérique" sur les Produits qui incluent un fichier téléchargeable lors de l'achat

Popup Voir le Produit

Pour les Produits ayant l'option "voir le Produit" activée, vous pouvez personnaliser quels éléments suivant afficher dans la fenêtre modale :

1. Nom du Produit - Affiche le nom du Produit
2. Prix du Produit - Affiche le prix du Produit
3. Sélecteur de quantité - Affiche le champ de sélection de quantité (s'il est désactivé, seul 1 peut être ajouté au panier à la fois)
4. Image du Produit - Affiche la galerie d'images du Produit
5. Vignettes d'images - Affiche les vignettes de la galerie d'images
6. Avis sur le Produit - Affiche les avis sur le Produit
7. Résumé du Produit - Affiche le texte résumé du Produit
8. Description du Produit - Affiche la description du Produit
9. SKU du Produit - Affiche l'unité de gestion des stocks du Produit (SKU)
10. Catégories de Produits - Affiche les catégories liées aux Produits
11. Icônes de partage social - Affiche des boutons permettant de partager le Produit sur les réseaux sociaux en un clic
12. Produits connexes - Affiche les Produits connexes
13. Quantité de commande min/max - Affiche les quantités minimales et maximales de commande disponibles, si définies dans votre Produit

Vous pouvez également choisir parmi les options suivantes :

1. Ajustement de l'image - Définissez si les images des Produits doivent être recadrées à la taille disponible ou réduites (recadrées garderont toutes les images de la même taille et plus uniformes)
2. Largeur de l'image - Définir la largeur des images
3. Hauteur de l'image - Définir la hauteur des images
4. Disposition des vignettes - Positionnez les vignettes de la galerie d'images horizontalement en dessous de la galerie d'images, ou verticalement à gauche
5. Style de variation - Choisir entre les menus standard "dropdown" ou les menus "texte" simples
   (en redéveloppement)

Styles

Vous pouvez personnaliser les couleurs suivantes via le générateur :

• Titre du Produit
• Prix du Produit
• Résumé du Produit
• Arrière-plan du bouton d'achat
• Texte/icône du bouton d'achat
• Arrière-plan du bouton Voir le Produit
• Texte/icône du bouton Voir
• Arrière-plan du bouton Voir le panier
• Texte du bouton Voir le panier
• Couleur du widget Panier
• Arrière-plan du Panier
• Couleur du texte du Panier
• Arrière-plan de l'élément Produit

Pour ceux qui ont des compétences en codage, vous pouvez bien sûr utiliser vos propres règles CSS pour styliser les intégrations autant que vous le souhaitez, nous n'utilisons pas d'iFrames, donc tout le contenu rendu dans votre page fait partie du DOM et peut être stylisé avec vos propres CSS.

Assurez-vous simplement que vos règles CSS soient plus spécifiques que les nôtres.

Par exemple, nous avons cette règle :

.sr-filters-wrap {
   background: #fff;
}

pour remplacer cela, créez votre propre règle CSS avec un élément parent préfixé, tel que :

body .sr-filters-wrap { 
   background: #000; 
}

Parce que vous avez ajouté les éléments "body" avant notre règle, cela sera plus ciblé que le nôtre et prendra priorité. 

Vous pouvez également apporter des modifications directement dans le générateur d'intégration de code si vous êtes plus à l'aise avec cela.