Nous allons voir dans ce tutoriel comment rajouter un champ date d’anniversaire lors de la création du compte client. C’est très pratique pour connecter un système de mailing et proposer à vos clients des offres pour leur anniversaire 😉

Installation du code

Rendez-vous dans boutique en ligne – Actions – Modifier le code et ouvrez le dossier Templates. A l’intérieur de celui-ci vous trouverez un fichier customers/register.liquid ! Ouvrez-le et logiquement vous devriez trouver un formulaire, balise form avec des labels et des inputs.

A l’endroit souhaité copier collez le code suivant afin de rajouter la date d’anniversaire :

Version champ optionnel :

<div class="birthday-wrapper" class="clearfix large_form">
	<label for="birthday" class="label">Date d'anniversaire</label>
	<input type="date" value="" name="customer[note][birthday]" id="birthday" class="text" size="30" {% if form.errors contains "birthday" %} class="error"{% endif %}>
</div>

<style>
	.birthday-wrapper {
	display:flex;
	border: 1px solid var(--colorBorder);
	background-color: rgba(var(--color-text-body),.1);
	width: 100%;
	max-width: 100%;       
	margin: 0 0 15px;
	padding:0 0 0 1rem;
	text-align:left;
	align-items:center;
	justify-content:space-between;
	font-size:13px;       
	}
	.birthday-wrapper * {
	color:#666 !important;
	border:none;
	margin:0;
	}
	.birthday-wrapper label {
	font-size:inherit;
	}
</style>

Version champ obligatoire :

<div class="birthday-wrapper" class="clearfix large_form">
	<label for="birthday" class="label">Date d'anniversaire</label>
	<input required type="date" value="" name="customer[note][birthday]" id="birthday" class="text" size="30" {% if form.errors contains "birthday" %} class="error"{% endif %}>
</div>

<style>
	.birthday-wrapper {
	display:flex;
	border: 1px solid var(--colorBorder);
	background-color: rgba(var(--color-text-body),.1);
	width: 100%;
	max-width: 100%;       
	margin: 0 0 15px;
	padding:0 0 0 1rem;
	text-align:left;
	align-items:center;
	justify-content:space-between;
	font-size:13px;       
	}
	.birthday-wrapper * {
	color:#666 !important;
	border:none;
	margin:0;
	}
	.birthday-wrapper label {
	font-size:inherit;
	}
</style>

 

Il ne vous reste plus qu’a tester tout cela en vous créant un compte client de test !

Merci de me laisser une petite note 😉
[Note moyenne de: 0 sur 0 votes]

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine