Mois : septembre 2023

Les Dates Clés du e-commerce en 2023

Quelques repères pour ne pas oublier les principales actions commerciales à mettre en place tout au long de l’année 2023.

French Days de la rentrée : à partir du vendredi 29 septembre 2023

Les French Days de rentrée se dérouleront du vendredi 29 septembre au lundi 2 octobre 2023. Cette alternative au Black Friday s’étale sur un week-end durant lequel, des actions commerciales inédites pourraient être impulsées sur votre site web.

Fête des grands-pères : dimanche 1er octobre 2023

Traditionnellement fêtée chaque premier dimanche d’octobre, la fête des grands-pères 2023, se déroulera le dimanche 1er octobre. Profitez de l’événement pour pour mettre en avant vos idées cadeaux sur votre site e-commerce ou des actions sur vos réseaux sociaux pour engager votre communauté.

Halloween : mardi 31 octobre 2023

Des bonbons ou un sort ! Halloween et son univers monstrueux sont une bonne occasion d’adapter votre communication et séduire vos clients avec des opérations originales et ludiques. Coupons de réductions, jeux interactifs, expérience collaborative, objets déco… Ne lésinez pas durant cette fête considérée comme l’une des plus grandes, après Noël et Pâques.

Black Friday : vendredi 24 novembre 2023

Venu des États-Unis, le Black Friday (vendredi noir en français)  est le rendez-vous des e-commerçants à ne surtout pas manquer ! Très plébiscité par les Français depuis 2014, le concept du Black Friday est simple : proposer des articles soldés toute la journée aux consommateurs. D’abord axé vers les commerces physiques, le Black Friday a désormais inondé Internet de ses promos en cascade. De quoi mettre votre site e-commerce aux couleurs du Black Friday et préparer cette journée en amont pour proposer vos meilleures promotions.

Cyber Monday : lundi 27 novembre 2023

À l’instar du Black Friday, le Cyber Monday est une opération commerciale de très grande ampleur. Suivie de près par de nombreux consommateurs, cet événement qui a lieu après Thanksgiving, vous permet de développer vos ventes sur le web grâce à la mise en avant de bonnes affaires.

Green Monday : lundi 12 décembre 2023

Concept inventé par eBay en 2007, le Green Monday donne une seconde chance aux absents du Black Friday mais pas seulement. Programmé le deuxième lundi de décembre, il représente le meilleur jour de ventes du mois sur la marketplace dans la mesure où passé ce délai, les commandes de Noël n’arriveraient pas à temps aux pieds des sapins.

Noël : lundi 25 décembre 2023

Synonyme de fêtes, cadeaux et bonnes tablées, Noël est sur le podium des dates clés du e-commerce. Préparez en amont votre stratégie commerciale sur votre site web et vos réseaux sociaux pour passer cette période de forte consommation, l’esprit serein.

Fête du Nouvel An : dimanche 31 décembre 2023

Même si Noël est derrière vous, la ferveur des fêtes d’année perdure encore quelques jours chez les consommateurs. Un conseil, prolongez vos actions marketing sur votre site et gardez en tête que de nombreuses personnes peuvent fêter Noël en décalé.

situs rtpslot gacor online maxwin
situs slot dana 5000 tanpa potongan
situsslot gacor dana slot5000 terpercaya
situs slot gilaspin88 gacor

situs resmi gilaspin88 deposit tanpa potongan

situs slot dana 5000 deposit tanpa potongan

situs sbobet resmi

Les outils indispensables pour un bon site e-commerce

Développer son activité e-commerce est une entreprise longue et assez complexe. Mais certains outils me semblent plusqu’indispensables, notamment pour gagner du temps et // ou de l’autonomie.

Solutions pour la gestion de votre boutique en ligne

Si vous ne devez investir que dans un seul outil, c’est bien dans Storecommander que ce soit d’ailleurs sur Prestashop ou Shopify.

Storecommander va venir se greffer sur votre backend et vous faciliter de manière intuitive la gestion de votre catalogue, de vos commandes ou de vos clients. Votre backend prend l’apparence d’une feuille Excel ou Google Sheet, les copier – coller ou duplications de produits deviennent un jeu d’enfant. La gestion des prix et promotions IDEM.

Storecommander vous permet en outre d’exporter vos produits, de générer des flux pour vos marketplace, d’optimiser l’intégration de vos contenus pour vos campagnes SEA ou SEO.

Le logiciel vous offre en plus un scan des principales erreurs figurant sur votre site. Notamment les produits fantômes, doublons, erreurs d’association entre les différentes tables de la structure, doublons dans les descriptions.

Le logiciel vous amène même vers la segmentation client, le tout pour trentaine d’euros / mois. C’est probablement le MUST de ce que l’on peut faire en terme d’interface et je me demande souvent pourquoi des solutions comme Prestashop ou Shopify ne proposent pas en natif cette solution. Bref, Storecommander c’est à tester d’urgence pour ne plus s’en passer par la suite quand on veut gérer sérieusement son e-commerce.

Solutions de paiement

Si vous hésitez entre Stripe, Prestashop Express Checkout, la solution bancaire de votre banque, je vous recommande sans hésiter la solution de paiement par carte bancaire Payplug.

Affilié au Banque Populaire, c’est une solution tout en un qui cherche à optimiser les taux de conversion aussi bien sur PC que sur Mobile.

La solution vous permet de proposer du paiement fractionné et permet d’être associé au moyen de Paiement Oney. Elle intègre dans sa solution les liens de paiement directs et peut être intégré avec une gestion de caisse Magasin.

La sécurité est évidemment au rendez-vous et s’appuie évidemment sur la DSP2.

Si vous êtes intéressé par la solution, je vous invite à contacter Nicolas Sawicki (nsawicki AT payplug.com) de ma part (patrice ruault). Il vous présentera les nombreuses possibilités de cette solution de paiement par carte bancaire et vous proposera une offre adaptée à votre besoin avec une bonne surprise à la clé.

 

Créer un thème enfant Prestashop

Créer un thème enfant : Prestashop

Prestashop est installé avec un thème de base que vous pouvez avoir envie de modifier, de personnaliser. La manière la plus simple et la plus sûre de le faire est de passer par la création d’un thème enfant du thème principal et de ne modifier que les fichiers que vous souhaitez.
Ainsi le thème enfant est en quelque sorte une extension du thème principal. Tous les changements que vous apporterez seront placés dans le répertoire du thème enfant. L’avantage de procéder ainsi est de conserver intactes les pages natives du thème Prestashop par défaut. C’est pratique en cas d’erreur de codage des fichiers que vous modifierez car vous pouvez toujours revenir en arrière. Par ailleurs lorsque vous mettrez à jour votre boutique Prestashop les modifications faites dans le thème enfant seront conservées.
La création d’un thème enfant peut se faire en quelques clics à partir de l’interface d’administration. Seulement, afin de comprendre cette notion de thème enfant, voyons dans un premier temps comment le faire manuellement.

Méthode 1 : création manuelle du thème enfant.

Le thème principal de Prestashop se nomme classic. Il se situe dans le répertoire …/themes, et se compose de 5 dossiers et d’une image.

01-theme-enfant

Pour créer un thème enfant vous aurez besoin de créer à minima un dossier que vous pouvez nommer comme vous le souhaitez. Dans notre exemple il est appelé : theme-enfant.

Dans ce dossier créez un sous-dossier : config et ajoutez une image nommée preview.png. Cette image peut-être une copie de celle du thème classic ou tout autre image de votre choix. Elle sert à prévisualiser votre thème enfant dans l’interface d’administration de Prestashop. Il est simplement conseiller de respecter la taille initiale de 500×746 px et l’extension .png.
Vous avez maintenant une structure de répertoire qui doit correspondre à l’image ci-dessous.

03-theme-enfant

Dans le dossier …/themes/theme-enfant/config créez un fichier qui sera nommé theme.yml et copier le code comme sur l’image ci-dessous.

  • Parent : indique le répertoire thème parent.
  • Name : indique le nom du répertoire du thème enfant.
  • Display_name : indique le nom de votre thème tel qu’il sera affiché dans la partie administration du site.
  • Assets : la mention true, indique que ce sont les éléments du thème parent qui sont utilisés (feuille de style, scripts, image et modules).

02-theme-enfant

Une fois ces étapes effectuées, le thème enfant est désormais visible dans la partie administration de votre site Prestashop.
Dans le menu de navigation, cliquez sur le lien Apparence du bloc PERSONNALISER, puis sur le lien Thème et logo. Votre thème enfant apparait, et vous pouvez l’activer sur votre boutique.

04-theme-enfant

Le thème enfant est donc désigné par le nom que vous avez donné, la version, et l’auteur de conception.
Pour modifier l’auteur, il suffira d’ajouter dans le fichier theme.yml les éléments d’auteur : nom, email et url, comme sur l’image ci-dessous.

A noter : il peut être nécessaire de vider le cache de votre navigateur.

05-theme-enfant

Méthode 2 : création automatique du thème enfant.

Il est possible de créer directement un thème enfant à partir de l’interface d’administration. Pour cela, cliquez sur le lien Thème et logo du menu Apparence du bloc PERSONNALISER. Puis cliquez sur le troisième onglet Personnalisation avancée.
Vous pouvez alors télécharger le thème classic. Un fichier zippé nommé child_classic se charge dans le répertoire …/themes.

Extraire le contenu de ce fichier, et le mettre dans le répertoire …/themes. Vous devez avoir une structuration de fichiers comme sur l’image ci-contre. On remarque la création d’un répertoire supplémentaires nommé assets. Il contient un sous-dossier css dans lequel se trouve le fichier custom.css.
C’est dans ce fichier que vous pourrez écrire toutes les règles de mise en forme css que vous souhaitez apporter à votre boutique.

06-theme-enfant

07-theme-enfant

Maintenant que votre thème enfant est crée il est possible d’y apporter toutes les modifications et de l’adapter au rendu que vous souhaitez pour votre boutique. A noter, si vous avez appliqué la méthode 1 pour la création du thème enfant, il faudra rajouter dans le répertoire de votre thème le dossier assets, le sous-dossier css et le fichier custom.css.

Comprendre et utiliser Flexbox CSS

Flexbox CSS Layout est un modèle de mise en page permettant d’afficher les éléments de contenu d’une page web en boîtes flexibles. Avec ses diverses propriétés, Flexbox est une alternative intéressante par rapport au modèle de mise en page Float. En effet, le contrôle de l’alignement, la direction, la taille et l’ordre des boîtes de contenu se fait aisément.

Exemple pratique avec un conteneur div et 4 conteneurs enfants div.

01-flexbox

Et une feuille de style associée.

02-flexbox

Les propriétés du conteneur parent : flex

La direction : flex-direction

La lecture de la page peut se faire en ligne – row ou en colonne – column. Ce sens de lecture définira l’axe principal de votre page.

Par exemple : l’axe principal d’une organisation des éléments enfants en ligne est horizontal, l’axe secondaire est l’axe vertical. C’est l’inverse si les éléments enfants sont organisés en colonne, l’axe secondaire est l’axe horizontal.

  • row : les éléments enfants sont affichés en ligne, de gauche à droite. C’est la valeur par défaut. Il n’est pas nécessaire de la renseigner dans la feuille de style.

03-flexbox

  • row-reverse : les éléments sont affichés en ligne, de droite à gauche

04-flexbox

  • column : les éléments sont affichés en colonne de haut en bas

05-flexbox

  • column-reverse : les éléments sont affichés en colonne de bas en haut

06-flexbox

Les propriétés d’alignement : justify-content et align-items

Justify-content

Cette propriété s’utilise pour définir l’alignement horizontal et les espaces entre chacun des éléments enfants
répartis sur l’axe principal.

  • flex-start : les éléments enfants se placent au début de l’élément parent. C’est la valeur par défaut. Il n’est
    pas nécessaire de la renseigner dans la feuille de style.
  • flex-end : les éléments enfants se placent à la fin de l’élément parent.

07-flexbox

  • center : les éléments enfants se placent au centre de l’élément parent.

08-flexbox

  • space-between : les éléments enfants sont uniformément répartis avec un espace entre eux. Le premier élément enfant étant situé au début, le dernier à la fin du parent.

09-flexbox

  • space-around : les éléments enfants sont uniformément répartis et entourés d’un espace.

10-flexbox

  • space-evenly : les éléments enfants sont uniformément répartis et l’espace qui les séparent est égal.

11-flexbox

align-items

Cette propriété d’alignement s’utilise sur l’axe secondaire.

  • stretch : les éléments enfants s’étirent pour remplir l’élément parent. C’est la valeur par défaut. Il n’est pas nécessaire de la renseigner dans la feuille de style.

12-flexbox

  • flex-start : les éléments enfants sont empilés au début de l’élément parent.

13-flexbox

  • flex-end : les éléments enfants sont empilés à la fin de l’axe secondaire.

14-flexbox

  • center : les éléments enfants sont empilés au centre de l’axe secondaire.

15-flexbox

Gérer les débordements et les aligner : flex-wrap et align-content

flex-wrap

Par défaut, tous les éléments enfants se placent sur une seule ligne. Lorsque ces éléments enfants sont trop larges (espacement intérieur – padding, ou extérieur – margin) pour leur conteneur parent, ils débordent de celui-ci.
16-flexbox

La propriété flex-wrap permet de gérer les retours à la ligne, grâce aux valeurs suivantes.

  • nowrap : c’est la valeur par défaut, elle n’a donc pas besoin d’être écrite. Il n’y a pas de retour à la ligne, les éléments enfants se serrent sur la même ligne pour tenir dans l’élément parent, quelque soit les valeurs de largeurs affectées aux éléments. La valeur de largeur des éléments enfants n’est pas prise en compte.

17-flexbox

  • wrap : les éléments enfants passent à la ligne, et les valeurs de largeurs sont prises en compte.

18-flexbox

  • wrap-reverse : les éléments enfants passent à la ligne et s’affichent dans l’ordre inverse.

19-flexbox

align-content

Cette propriété permet d’aligner les éléments enfants sur l’axe secondaire. Son rôle et les valeurs sont les mêmes que pour la propriété justify-content qui affecte l’axe principal.

  • stetcht : les lignes des éléments enfants s’étirent pour occuper tout l’espace disponible. C’est la valeur par défaut, elle n’a pas besoin d’être écrite.

20-flexbox

  • flex-start : les lignes des éléments enfants se placent au début de l’élément parent.

21-flexbox

  • flex-end : les lignes des éléments enfants se placent à la fin de l’élément parent.

22-flexbox

  • center : les lignes des éléments enfants se placent au centre de l’élément parent.

23-flexbox

  • space-between : les lignes éléments enfants sont uniformément réparties dans l’élément parent. La première en début de contenu, la dernière en fin de contenu.

24-flexbox

  • space-around : les lignes des éléments enfants sont uniformément réparties dans l’élément parent avec un espace autour.

25-flexbox

  • space-evenly : les lignes des éléments enfants sont uniformément réparties dans l’élément parent, les espaces autour sont égaux.

26-flexbox

La propriété flex-flow

Cette propriété permet d’associer les propriétés et les valeurs de flex-direction (axe-principal) et de flex-wrap (axe-secondaire) en une seule ligne de css. Par défaut cette propriété prend les valeurs suivantes : flex-flow : row nowrap . Le flux s’affiche en ligne, sans passage à la ligne.

Les propriétés des éléments enfants

La propriété order

Cette propriété permet d’affecter un ordre d’affichage aux éléments enfant et ce quel que soit leur ordre d’écriture dans le flux html. La valeur par défaut est 0. Les valeurs affectées sont des nombres entiers.
27-flexbox

La propriété align-self

Cette propriété permet d’affecter un alignement spécifique sur l’axe secondaire à un ou plusieurs éléments enfants indépendamment de l’alignement défini dans le conteneur parent. Les valeurs prises sont les même que pour align-items (strecth : valeur par défaut, flex-start, flex-end et center).

  • Exemple : flex-end

28-flexbox

  • Exemple : center

29-flexbox

La propriété flex-grow

Cette propriété permet d’augmenter la taille relative d’un ou plusieurs éléments par rapport aux entres enfants de l’élément parent.
Exemples :
30-flexbox
31-flexbox

La propriété flex-shrink

A l’inverse de flex-grow, flex-shrink permet de réduire la taille d’un ou plusieurs éléments enfants.

Exemples :
32-flexbox

La propriété flex-basis

Cette propriété définit la taille de base des élément enfants, l’espace disponible restant sera occupé en fonction des facteurs de flexibilité. Si l’axe principal est horizontal (row) cela correspond à une largeur, si l’axe principal est vertical (column) cela correspond à une hauteur.

Comme pour les propriétés css classiques de width ou height, les valeurs acceptées sont de type longueur absolue ou relative (px, %, rem, em). La valeur par défaut étant auto, cette propriété accepte aussi les valeurs de content (selon le contenu), initial et inherit.

Exemple :
33-flexbox

La propriété flex

C’est une propriété raccourcie de flex-grow, flex-shrink et flex-basis. Les valeurs automatiques, sans autres précisions sont : flex : 1 1 auto ;

Tester votre mise en page flex avec l’outil : flexbox.help