Ck Sections Documentation

Après l’installation, vous accéderez à la Marketplace des sections CK. Parcourez les modèles disponibles, comme le « Compteur de statistiques » ou l’« Image moderne avec texte ». Lorsque vous trouverez une section qui vous plaît, cliquez sur le bouton Ajouter gratuitement pour l’ajouter à votre collection.

Depuis le tableau de bord "Mes sections", trouvez la section spécifique que vous souhaitez utiliser (ex : CK - FAQ #1). Cliquez sur le bouton "Installer dans le thème" situé en bas de la carte de la section.

Une fenêtre contextuelle intitulée « Installer [Section Name] dans le thème » apparaîtra. Cliquez sur le menu déroulant « Sélectionner un thème » pour afficher la liste de tous les thèmes actuellement disponibles dans votre boutique Shopify. Choisissez le thème dans lequel vous souhaitez ajouter la section

Accédez à la barre latérale de votre administration Shopify et cliquez sur Boutique en ligne. Cela vous mènera à la section des thèmes où vous pourrez gérer vos thèmes actifs et en brouillon.

Dans la barre latérale de l’éditeur de thème, trouvez la zone où vous souhaitez ajouter le nouveau contenu (comme la zone « Modèle ») et cliquez sur le bouton (+) Ajouter une section.

Un menu de recherche s’ouvrira. Parcourez la liste ou recherchez la section que vous venez d’installer. Elle commence généralement par « CK » (ex. : CK faq #1). Cliquez dessus pour l’ajouter à la mise en page de votre page.

Une fois la section affichée sur votre page, vous pouvez utiliser la barre latérale de droite pour modifier les couleurs, les polices et le texte. Lorsque le résultat vous convient, cliquez sur le bouton Enregistrer dans le coin supérieur droit pour publier les modifications.

Cliquez sur le bouton + Créer un formulaire en haut à droite ou au centre du tableau de bord pour ouvrir l'écran de configuration.

Vous avez deux façons de créer un formulaire :

• Modèles : Choisissez parmi des options préconçues comme Formulaire de contact, Candidature ou Commande personnalisée pour gagner du temps.
• Partir de zéro : Cliquez sur Créer un formulaire vierge pour concevoir une mise en page unique de A à Z.

L'éditeur est divisé en trois zones principales :

• Barre latérale gauche (Types de champs) : Votre boîte à outils. Cliquez sur n'importe quel champ (Texte, E-mail, Téléphone, Menu déroulant, etc.) ou faites-le glisser dans la zone centrale.
• Zone de travail centrale : L'aperçu en direct de votre formulaire. Vous pouvez y modifier le Titre du formulaire et la Description.
• Barre supérieure : Contient les actions Annuler/Rétablir, un bouton Aperçu pour voir la version en direct, les Paramètres et le bouton Enregistrer.

Une fois qu’un champ a été ajouté, cliquez dessus pour ouvrir la barre d’édition sur le côté droit. La personnalisation est divisée en quatre catégories :

Modifiez l’étiquette, ajoutez un texte de suggestion ou indiquez que le champ est obligatoire.

Définissez les longueurs minimales/maximales de caractères ou utilisez des expressions régulières pour des types de données spécifiques.

Basculez entre Pleine largeur et Demi-largeur pour placer deux champs côte à côte.

La logique conditionnelle vous permet de créer des formulaires « intelligents » qui s’adaptent en fonction des réponses des utilisateurs. Vous pouvez afficher ou masquer des champs spécifiques uniquement lorsque certaines conditions sont remplies.

Comment configurer la logique

1. Sélectionner un champ : Cliquez sur le champ que vous souhaitez afficher ou masquer dynamiquement.
2. Activer la logique : Dans la barre latérale droite, développez la section Logique conditionnelle et cochez la case Activer la logique conditionnelle.
3. Définir l’action : * Choisissez d’afficher ou de masquer le champ sélectionné.
4. Définir la correspondance des conditions :
   Toutes : Toutes les conditions doivent être remplies.
   L’une d’elles : Une seule des conditions doit être remplie.
5. Configurer les conditions :
   Sélectionner le champ : Choisissez le champ dont la valeur déclenchera la logique.
   Sélectionner l’opérateur : Choisissez comment comparer la valeur (par ex. Est égal à, Contient, Supérieur à, Est vide).
   Saisir la valeur : Saisissez la valeur spécifique recherchée.

Contrôlez ce qui se passe après qu’un utilisateur a interagi avec votre formulaire.

• Texte du bouton d’envoi : Personnalisez l’intitulé de votre bouton d’action principal (ex. : « Envoyer le message », « Réserver maintenant »).
• Message de confirmation : Rédigez un message de remerciement personnalisé qui s’affiche immédiatement après l’envoi réussi du formulaire.
• URL de redirection : (Facultatif) Redirigez automatiquement les utilisateurs vers une page spécifique (comme une page de remerciement ou une page d’offres) après qu’ils ont soumis le formulaire.

Adaptez le formulaire à l’identité visuelle de votre boutique sans écrire de code.

• Couleurs : Définissez des codes hexadécimaux spécifiques pour votre couleur principale (boutons/éléments mis en évidence), votre arrière-plan et votre texte.
• Typographie : Choisissez une famille de polices ou sélectionnez Hériter du thème pour conserver l’apparence de votre boutique.
• Espacement et forme : Utilisez les curseurs pour ajuster le rayon de bordure (pour des coins arrondis) et le rembourrage (pour donner plus d’espace à vos champs).

Restez informé des nouveaux prospects et demandes.

• Activer les notifications : Activez l’interrupteur pour recevoir un e-mail à chaque soumission de formulaire.
• E-mails de notification : Cliquez sur + Ajouter un e-mail pour envoyer des alertes simultanément à plusieurs membres de l’équipe ou services.

Protégez votre boutique du spam et des robots automatisés.

• Protection CAPTCHA : Activez-la pour ajouter une étape de vérification pour les utilisateurs et empêcher les soumissions par des robots.
• Limitation du débit : Définissez un nombre maximal de soumissions autorisées par minute pour un utilisateur donné afin d’éviter les abus de formulaires.

Avant qu’un formulaire puisse apparaître sur votre boutique, il doit être publié.

• Publier : Cliquez sur le bouton Publier en haut à droite de l’éditeur.
• Copier l’ID : Une fois le formulaire publié, cliquez sur le bouton Copier l’ID dans la barre supérieure. Vous aurez besoin de cet identifiant unique pour indiquer à Shopify quel formulaire afficher.

Vous pouvez placer votre formulaire sur n'importe quelle page (Accueil, Contact, Produit, etc.) à l'aide de l'éditeur de thème Shopify.

• Ouvrir l'éditeur de thème : Allez dans votre administration Shopify > Boutique en ligne > Thèmes > Personnaliser.
• Ajouter une section : Cliquez sur Ajouter une section dans la barre latérale gauche.
• Sélectionner l'onglet Applications : Passez de "Sections" à l'onglet Applications et sélectionnez Ck Forms.

Coller l’ID du formulaire : Cliquez sur le bloc Ck Forms que vous venez d’ajouter. Dans la barre latérale des paramètres à droite, collez l’ID que vous avez copié précédemment dans le champ ID du formulaire (Capture d’écran 11).

Enregistrer : Cliquez sur Enregistrer en haut à droite de l’éditeur Shopify.

Votre formulaire apparaîtra désormais en ligne sur votre boutique. Il héritera automatiquement des styles (couleurs, polices et mise en page) que vous avez configurés dans les paramètres de l'application.