Peaux

Remarque : Les habillages peuvent être utilisés dans les magasins hérités uniquement.

Vue d’ensemble

Vous pouvez contrôler l’apparence et l’ergonomie de vos magasins soit en sélectionnant l'un des habillages par défaut d’uStore soit en utilisant votre propre habillage personnalisé. Si vous souhaitez utiliser votre propre peau, vous devez la préparer à l'avance. uStore prend en charge deux types d'apparences : bureau et mobile. La peau XMPieGreen par défaut est aussi adaptée aux appareils mobiles. Les habillages sont conçus en utilisant des CSS actifs qu'il est possible de modifier facilement en utilisant le code HTML5.

Vous pouvez télécharger des habillages existants pour les personnaliser, télécharger de nouveaux habillages et remplacer un habillage existant par un nouveau.

Il est fortement recommandé de télécharger l'habillage et de l’enregistrer en tant que sauvegarde avant de le supprimer ou de le remplacer.

Pour sélectionner une peau :

1. Rendez-vous sur Paramètres du magasin > Configurer le magasin et cliquez sur l’onglet Apparence .

2. Dans la section Peau de magasin, sélectionnez la peau appropriée dans la liste Nom de peau.

   

   Pour les magasins uStore Connect, assurez-vous de sélectionner un habillage qui correspond à l'apparence de l'application de e-commerce tierce.

3. Si vous souhaitez ajouter un titre d’entête à votre magasin, saisissez-le dans la boîte Titre d’entête. Il s’affichera dans la page Accueil du magasin.

   Exemple

   

4. Sélectionnez Afficher la barre de recherche de produits pour activer la Barre de recherche de produits dans les pages Accueil et Liste des produits de votre magasin.
   La Barre de recherche de produits permet aux clients de trouver rapidement les produits par le nom, la description et les mots clés du produit.

   Exemple

   

Personnalisation des habillages

Cette section passe en revue les principaux composants et principes de l’habillage XMPieGreen et explique comment vous pouvez personnaliser ce dernier selon votre marque et à des fins de design.

Cette information est conçue pour les concepteurs de sites Internet. Pour pouvoir profiter pleinement des informations fournies, vous devez avoir des connaissances en édition HTML et CSS.

Élements principaux

Le mécanisme de la peau de XMPie a été conçu pour offrir une mise en page et une souplesse maximales tout en réduisant la taille des pages et en accélérant leur chargement.

Les figures suivantes sont l’illustration de la flexibilité de l’habillage XMPieGreen. La peau personnalisée a été réalisée en apportant des petits changements aux définitions de CSS.

Peau XMPieGreen par défaut

Peau personnalisée basée sur la peau XMPieGreen

Fichiers d'habillage principaux

Les fichiers d'habillages principaux se trouvent dans le dossier Images :

Mise en page générale

La mise en page par défaut inclut les zones suivantes :

Les sélecteurs suivants, trouvés dans le fichier style.css définissent les styles généraux utilisés dans toutes les mises en page :

Entête

L’entête comprend les éléments suivants :

La plupart des éléments de l’entête ont un positionnement absolu sur la page. Cela signifie que vous pouvez facilement modifier leur position.

Voici les éléments de l’entête :

Zone de contenu

La zone de contenu comprend les sections suivantes, toutes affichées sur une image de fond :

Voici les éléments de la zone du contenu :

Bouton de connexion Facebook

Les administrateurs uStore peuvent permettre aux visiteurs du magasin de se connecter à l’aide de leurs informations d’identification de Facebook. Lorsque la fonctionnalité de connexion Facebook est utilisée, une nouvelle boîte apparaît dans la page de connexion avec le bouton de connexion Facebook.

Les classes suivantes contrôlent le bouton de connexion de Facebook : singleSignOnButtonFacebook

Bouton chat LivePerson

Les administrateurs de uStore peuvent ajouter un bouton chat sur toutes les pages du magasin. Par défaut, le bouton chat LivePerson est situé dans le coin inférieur gauche de chaque page.

Le sélecteur suivant contrôle le style de bouton de chat LivePerson : .LivePersonButton_Skin

Page de liste de produits

Les produits s’affichent soit sous forme de liste, soit sous forme de grille, en fonction des paramètres définis dans Configuration du magasin > Apparence onglet dans le BackOffice d'uStore.

Ce qui suit est la page de Liste de produits affichée comme une grille :

Voici les sélecteurs qui permettent de contrôler la page Liste de produits :

Pages détails du produit et personnalisation

Les pages détails du produit et personnalisation comprennent le flux d’achat, depuis l’affichage des informations au sujet d’un produit sélectionné jusqu’aux étapes de validation du paiement. Les éléments affichés sur ces pages et leur mise en page dépendent fortement des paramètres définis par l'administrateur uStore sur le BackOffice uStore.

Mise en page des pages détails du produit et personnalisation :

Dans l’étape de Personnalisation , par défaut, les étiquettes des contrôles de personnalisation DUC apparaissent à la gauche et à la même hauteur du contrôle de saisie comme vous pouvez le voir sur l’image ci-dessus. Si vous voulez placer les étiquettes au-dessus des contrôles de personnalisation et les aligner à gauche, ajoutez la règle suivante :

.Duc dt, .Duc dd

{

float:inherit;

margin-left: 10px;

marge intérieure : 0;

}

Fenêtres contextuelles

L’interface utilisateur de uStore inclut quelques fenêtres contextuelles. La boîte de dialogue Adresse de facturation, qui permet au visiteur de saisir l’adresse de facturation pour une commande spécifique, est un exemple de fenêtre contextuelle :

Voici les styles de fenêtre contextuelle :

Modèle de couleurs

Utilisez les sélecteurs CSS suivants pour modifier les modèles de couleurs de votre peau.

Sélecteurs dans Style.css et Popup.css

Voici une liste de modèles de couleurs que vous contrôlez via les sélecteurs situés dans les fichiers Style.css et Popup.css.

Sélecteurs dans FileSubmission.css

Voici une liste de modèles de couleurs que vous contrôlez via les sélecteurs situés dans le fichier FileSubmission.css.

Styles de police

Utilisez les sélecteurs CSS suivants pour définir le style de la police :

Images

Vous pouvez apporter toutes les modifications que vous désirez aux images tant que vous ne modifiez pas le nom des fichiers. Les images utilisées par le Générateur de documents sont trouvées dans le dossier Soumission de fichiers.

Les tableaux suivants répertorient les images qui ont probablement besoin d’être modifiées pour correspondre à une nouvelle marque ou un modèle de couleurs.

Images générales

Voici une liste des principales images utilisées dans la mise en page générale.

Emplacement <Disque d’installation uStore>:\XMPie\uStore\App\CustomerApp\Images\[Votre_nom_de_peau]

Nom de fichier	Image
Logo.jpg
Store.png
Proof_left.png
proofRight.png
ProofBtn.png

Images du Générateur de documents

Voici une liste des principales images utilisées dans les pages du Générateur de documents.

Emplacement <Disque d’installation uStore>:\XMPie\uStore\App\CustomerApp\Images\[Votre_nom_de_peau]\FileSubmission

Nom de fichier	Image
IconWrench.png
Wrench_Clicked.png
emptyDoc1_Hover.png
emptyDoc1_Clicked.png
emptyDoc2_Hover.png,	Même que emptyDoc1_Hover.png
emptyDoc2_Clicked.png,	Même que emptyDoc1_Clicked.png
emptyDoc3_Hover.png,	Même que emptyDoc1_Hover.png
emptyDoc3_Clicked.png,	Même que emptyDoc1_Clicked.png
Chapter_Sprite.png,
Page_Sprite.png
CompositeProof_Sprite.png
IconTrash.png,
IconPreflight.png,
fileWarning.png
IconColors.png
IconFonts.png
IconImages.png
IconWarning.png
IconWarningBig.png
AddItem.png
processingGif.gif
IconApproved.png
IconFile.png
IconMagnify.png
IconMove.png
IconPages.png
IconProperties.png
Document_Hover.png
/progressBar/bar.gif

Pages principales

Remarque : Seuls les utilisateurs avancés qui sont familiers avec ASP.NET devraient travailler avec les pages maîtres.

Si vous devez effectuer des modifications complexes aux pages de votre magasin pour qu’elles respectent les exigences de nature structurelle ou dues à la marque de votre organisation qui concernent votre site Internet, vous devez créer de nouvelles pages principales.

Les pages principales déterminent la mise en page de votre Storefront. Les pages principales affectent les éléments des pages, tels que l’entête, la zone de contenu et le pied de page. En outre, vous désirez peut-être modifier une page principale pour ajouter du code et d’autres éléments, tels que des widgets, des bannières et des fonctionnalités supplémentaires.

Les pages principales par défaut du uStore sont situées ici :

<Disque d’installation uStore>:\XMPie\uStore\App\CustomerApp\PageLayout

Il existe quatre fichiers de pages principales par défaut :

• Popup.Master

• ThemedPage.Master

• ThemedPageFullWidth.Master

• Login.Master

Créer des nouvelles pages maîtres

Créez une nouvelle page principale basée sur l’un des fichiers d’une page principale (appelé fichier principal). Vous devez d’abord copier le fichier principal que vous souhaitez modifier dans le même dossier que celui de votre nouvelle peau. Tous les changements que vous effectuez sur le fichier principal ne prennent effet que si le fichier principal est situé directement dans le dossier de la peau ou un sous-dossier.

Pour copier un fichier principal dans le dossier de votre nouvelle peau :

1. Sur le serveur uStore, naviguez jusqu’à <Disque d’installation de uStore>:\xmpie\ustore\App\CustomerApp\PageLayout.

2. Copiez le fichier principal approprié du dossier PageLayout au dossier de la nouvelle peau. Par exemple, copiez le fichier ThemedPage.Master dans : <Disque d’installation uStore>:\xmpie\ustore\App\uStoreShared\Skins\Images\<new_skin_folder>.

3. Apportez les modifications requises au fichier principal et enregistrez-le.