Publish Insights 11 December 2021
By Kevin RR Williams
Determine Visitor Gender
In the past, there were just two genders. The graphic icons on public restrooms were binary. Delivery room doctors worked to preserve such distinctions. Today, a growing number of people identify as transgender or non-binary. “He” and “she” has expanded to “they.” Rest assured, this post is not about modifying DNA to assign the gender of future generations.
For the purpose of providing clothing, healthcare products or services, you may wish to identify the gender of site visitors. When a customer logs in, you might have them choose whether they are female and assume the rest are male (or visa versa, depending upon your primary site audience). For personal reasons, they may not wish to disclose such.
The fallback method is to compare the first name against a string of female names after login. Though you can include common names, it is less reliable due to the trend of using uncommon spellings. Androgynous nicknames like “Mat” for either Matilda or Matthew complicate distinction.
An international audience may also include unfamiliar names. Personal gender preference or reassignment also obfuscates determination of gender based on names. But as acknowledged, it’s a fallback method.
Modify Liquid Code
Shopify is an e-commerce platform on which sellers build custom websites based on themes. Each theme adheres to similar underlying structure based on programming code called Liquid. [1]
A globally accessible customer fields are the user name and customer tags after login. This method provides a method of adding a gender tag to the customer file.
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
Before making modifications to your Shopify theme, duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.
Now you access the Liquid programming code with Actions: Edit code. Beneath the area called Config, click to open settings_schema.json. Find a convenient place to store your names for global access.
Normalize the typographical case when using the contains parameter. It is also helpful to eliminate male names that begin with the same letters as female names. Schema fields store a maximum of 5000 characters, so choose the names most common in your primary audience.
For example, the list of female names differs between Japanese and United States visitors. Note that in China, Japan, Korea and Vietnam, the surname or family name always precedes the given name. So position contact name positions accordingly.
{
"type": "header",
"content": "Vistor Gender"
},
{
"type": "text",
"id": "female_names",
"label": "Female names",
"info": "Names used to guess customer gender (5000-character max)",
"default": "default": "Abby Abigail Adaline Adalynn Adeline Adelyn Adora Adriana Adrienne Alaina Alana Alani Alayna Aleena Alena Alexa Alexis Alexandra Aleyna Alice Alicia Alina Alivia Aliyah Aliza Allison Alyssa Amanda Amaris Amaya Amber Amelia Amelie Amira Amora Amy Anastasia Anneliese Anita Annita Andrea Angela Angie Annabelle Annalee Annalise Annamae Annette Annie Antoinette April Arabella Arcella Aria Ariana Arianna Ariella Arielle Arlene Asia Astrid Athena Aubree Audrey Aura Aurora Autumn Aviana Avianna Avril Ayana Ayla Azalea Baila Bailey Barbara Beatrice Beatrize Bella Belle Berdelle Bernice Bethany Bettye Beverly Bianca Birdie Blanca Bonnie Braelyn Brenda Brenna Brianna Briar Bridgette Brielle Brittney Brittany Brooke Brooklynne Bryar Bunny Cadence Caitlin Calia Callen Callie Calliope Camila Camilla Camille Camryn Candace Candice Candy Capri Carmen Caroline Carolyn Carrie Cassandra Cassia Cassie Catalina Cecelia Cecilia Celeste Celina Celine Chanequa Chantilly Charlene Charlotte Charmelle Chaya Chiara Clarisa Cheryl Christal Christiana Christina Christy Chloe Ciana Cianna Cindi Cindy Clara Clarice Claudia Colette Colleen Connie Cookie Cora Corina Cossette Courtney Cristina Cynthia Dahlia Daisy Dana Danna Daphne Darcie Darcy Darah Darcie Daria Darlaen Darleen Darlene Davina Dawne Debbie Debra December Dedra Dee Deirdra Deirdre Deloras Denise Deja Delilah Della Denisha Derseraie Desiree Demitria Devina Diana Dianna Dina Diona Dior Divine Dolly Dolores Donna Dora Doris Echo Edna Elaine Eleanor Elena Ellenna Eliana Elianna Elisa Elise Elizabeth Ella Ellen Elliana Ellie Elodie Eloise Elyse Ema Ember Emelia Emilia Emily Emmaline Emmalyn Emmie Erinn Erica Erika Esmeralda Esther Esperanza Etta Evangeline Evelia Evelina Evelynn Evie Fabiola Faith Fawn Faye Ferne Fiona Flora Fleur Frances Frida Gabriela Gabriella Gabrielle Gabbi Gabby Gail Gayelle Genean Gemma Genevieve Georgiana Giana Gianna Gigi Gillian Gina Giovanna Giselle Gisele Gladys Gloria Grace Graciella Greta Gretta Guinevere Halia Hana Hannah Harlow Hattie Heather Helena Hera Holly Hope Ida Ila Ileana Iliana Ingrid Ines Ineza Irene Iris Isabella Isadora Ivanka Ivanna Ivy Jacqueline Jade Jaime Jala Jana Janeen Janelle Janessa Janet Janna Jasmine Jeannene Jemma Jenna Jenny Jesica Jessica Jiana Jianna Jillian Jennifer Joanna Jodi Jolene Josie Josette Joyce Juanita Judith Judy Juliana Julieanne Juliette Julissa Kaira Kalia Kamari Kara Karen Karin Karis Karla Karly Karma Katalina Katelyn Katia Katie Katherine Kathleen Kathlyn Katy Kayla Kaylee Kayleigh Kaylen Kaylie Kaylyn Kaylynn Kendra Kerri Kerry Keira Kelly Kelsi Kenna Kevynn Keyla Kiara Kiki Kimberly Kira Kora Korina Krissy Krista Kristie Kristen Kristina Kristine Kristy Kyla Kylee Kylie Kyra Laila Lainey Lakeysha Lana Lani Lara Latoya Laura Laurie Laurel Lauren Lauryn Lavonne Lawanda Layla Leah Leia Leila Leilani Lena Lennie Leona Leslie Lexi Lexy Liana Lila Lilah Lilith Lillian Lilly Lily Linda Lisa Lois Lola Lonnice Lora Lorelei Loretta Lori Lorraine Lottie Louise Luana Lucia Lucie Lucille Lucile Lucy Luella Luna Lydia Lyndsey Lyla Lynne Lyra Lyza Mabel Maci Madaline Maddie Madeleine Madeline Madelyn Madison Maeve Maezelle Magdalena Marisol Martina Meagan Megan Maggie Meghan Magnolia Maira Maisie Maisy Makayla Makenzie Makimi Maleah Malia Mara Margarette Margot Mariam Marin Mariana Marielle Marilyn Marion Marianne Marla Marlee Marlene Marnie Maryanne Masha Matilda Mavis Maxine Maya Mayra Maura Meera Melanie Melia Melinda Melissa Melody Mia Michal Michelle Mika Mikaela Mikayla Mila Milana Mildred Millie Milly Mina Mindy Mira Miriam Misha Missy Misty Mollie Molly Monica Monique Moreene Moyah Myla Myra Nadia Nadine Naila Nancy Naomi Natalia Natalie Natasha Naya Nayla Nedra Nellie Nevaeh Niah Nicie Nicole Nichole Nicki Nicky Nila Nina Noelle Nola Norah November Nyla Octavia October Odessa Odette Olive Olivia Ophelia Pamela Patrice Patty Pearle Peggy Penelope Penny Petal Phyllis Phoebe Pia Pippa Piper Poppy Portia Pricilla Priyanka Prudence Rachelle Raeanna Raelyn Raelynn Raquel Ramona Rebekah Regina Reena Remmi Reyanna Reyna Rhea Rhiana Rhonda Roberta Robin Robyn Rochelle Romi Romy Rosalie Rosalyn Rose Marie Rose Mary ann Rosemary Roselyn Rosie Roxanne Ruby Ruthie Ruthy Ryleigh Sabrina Sadie Sally Samantha Sandra Saundra Sapphire Sarah Sarai Sariah Sasha Savannah Scarlette Sidney Simone Selena Serena Shanelle Sandy Sharon Sharron Shayla Sheila Shelly Sheka Sherrie Sherry Shirley Sienna Sierra Skylar Sofia Sonja Sonjia Sonya Sophia Sophie Stacey Stacy Sue Susie Susannah Sylvia Sylvie Tabitha Talia Tamara Tameka Tammie Tammy Tanya Tara Tatiana Tatum Teresa Terrie Tessa Thalia Thea Theda Theresa Tiana Tiffany Tina Toni Tonya Traci Trina Trisha Tyra Valencia Valentina Valerie Velesta Velma Valkyrie Vanessa Vandolyn Veda Veera Venus Vera Verity Veronica Vianna Vickie Vicky Victoria Viola Violet Virginia Vivian Vivienne Wendie Wendy Willow Winifred Xena Yasmine Ynez Yolanda Yvette Yvonne Zarsha Zenia Zinnia Zivia Zoey Zora"
},
{
"type": "text",
"id": "female_names_2",
"label": "More female names",
"info": "Names used to guess customer gender (5000-character max)",
"default": "default": "Abbie Aleksandra Aleisha Alexa Alexia Alisa Alizabethe Almog Anisoara Amélia Andreea Andria Aniya Anja Ashlea Asma Aylin Bavya Bobbijo Brandie Bridie Briana Brianne Camomille Chantelle Charmaine Charmella Charmelle Chiqueita Cintia Deanna Deeva Destiny Dishaka Dishika Dixa Elisabeth Enya Felista Hilarie Inma Janea Janetta Jannice Janyth Jenea Kandace Kandice Karol Kashish Kathiresan Katya Keisha Keliegh Kellie Kendall Keiry Keri Kerstin Kimia Kirstin Kirsty Krishna Landi Laney Larisa Lateefa Latifa Leji Leni Ligia Loredana Lubna Lucinda Luminita Luretha Marcie, Marcy, Mariah Marquita Mckenzie Melva Micaela Mirna Miyah Myah Nidia Norine Nyanika Ping Precious Preeta Preeti Pritti Rameesha Renuka Rimsha Roseneeya Rosemarie Rosemerie Shamista Shanti Sherrill Shonda Shreya Snežana Snezana Snezhana Su-lyn Sue lyn Suelyn Sumyra Sylvana Talia Talulla Tarnecia Tasheka Tasia Tavia Teri Terri Twila Tyneka Vivek Windie Winiya Wyndi Zeena"
},
{
"type": "text",
"id": "male_names",
"label": "Male names",
"info": "Female name exclusions (5000-character max)",
"default": "Abel Albert Antoine Andre Andrzej Alan Alex Beacon Biraj Brian Cadogan Christopher Donald Eric Fredrick Gabriel Gene George Joel Jona Jorge Kari Karl Kathiravan Ken Kevin Kyle Latif Leon Luis Mark Martin Maurice Max Mckenna Mel Melvin Montana Nick Noel Patrick Philip Priyankar Robert Ray Robbert Robert Roy Russell Santana Siddappa Stephen Steven Theodore Thomas Tom Tugay Van"
},
{
"type": "text",
"id": "unisex_names",
"label": "Unisex names",
"info": "Disables gender guess (5000-character max)",
"default": "default": "Aiden Angel Arden Ariel Avery Cameron Carsam Corriga Dana Frankie Harlow Hollis Jaime Jodie Kelly Kris Landry Leighton Leslie Logan Marion Merrill Morgan Peyton Rene Riley Shi Timber Tracy Yildiz"
},
{
"type": "checkbox",
"id": "latina_names",
"label": "Guess Latina names",
"info": "Female names end with 'na' or 'ita' or 'ala'",
"default": true
}The sample has the maximum number of female_names. Exceeding it will truncate the list. To add others, a secondary list called female_names_2 is available. With a name limit (approximately 1500), the method is not entirely foolproof. But you do gain some variations.
For example, the female name exclusion Robert prevents it from being considered female as a result of Roberta in the female list. Alli is included within the female name Allison. By virtue of female name exclusions containing Al, someone with this name is regarded as male. When adding new female names, be certain to also add any male derivative names within it as female exclusions.
There are unisex names from which it is impossible to distinguish gender. In such cases, it is best not to guess. The code includes an area to add unisex exclusions.
Now, where do you wish to distinguish genders on your site? It may be within an announcement bar, product page, or blog article. If it is only one location, you can include the code below directly within that section. To use it in multiple places, create a new snippet called female_gender and then use {%- render 'female_gender' -%} within different sections or other snippets.
{%- if shop.customer_accounts_enabled and customer.first_name != blank -%}
{%- assign male = false -%}
{%- assign fname_case = customer.first_name | capitalize | remove: '.' -%}
{%- if customer.tags contains 'Woman' -%}
{%- assign female = true -%}
{%- elsif customer.tags contains 'Male' -%}
{%- assign female = false -%}
{%- elsif fname_case.size > 2 -%}
{%- if settings.male_names contains fname_case -%}
{%- assign male = true -%}
{%- endif -%}
{%- if male == false -%}
{%- assign fname_last_2 = fname_case.size | minus: 2 -%}
{%- assign fname_end_2 = fname_case | slice: fname_last_2, 2 -%}
{%- assign fname_last_3 = fname_case.size | minus: 3 -%}
{%- assign fname_end_3 = fname_case | slice: fname_last_3, 3 -%}
{%- if settings.unisex_names contains fname_case -%}
{%- assign non-binary = true -%}
{%- assign female = '' -%}
{%- elsif settings.female_names contains fname_case -%}
{%- assign female = true -%}
{%- elsif settings.female_names_2 contains fname_case -%}
{%- assign female = true -%}
{%- elsif settings.latina_names -%}
{%- elsif fname_end_2 == 'na' or fname_end_3 == 'ita' or fname_end_3 == 'ala' -%}
{%- assign female = true -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{{ female }}In red, I have added an optional first name ending with ‑ita and ‑na, which are common among females in Latin languages. With this option enabled, you can free up space within the list of female names by removing those with this ending.
There are only about two dozen male names ending with ‑na and most are uncommon or unisex. Approximately 182 ‑ita names are often feminine. The majority of Indian, Hebrew, Hindi, or Sanskrit male names ending with -ita are not within the top 1000 most popular. You can add exclusions within the male_names list.
When a visitor is logged in, the code returns a true if female value that is only useful if your site adds value to gender-specific individuals. Examples include jewelry, clothing, cosmetics, or personal hygiene products. Registration forms on some sites are beginning to include a pronoun field to eliminate ambiguity.
You can add an option to include pronoun in the global schema using the code below.
{
"type": "checkbox",
"id": "show_pronoun",
"label": "Capture pronoun during registration",
"default": true
}Then enable it on registration forms and newsletter signup forms.
{%- if settings.show_pronoun -%}
<div class="Form__Item">
<select id="contact_tags" name="contact[tags]" class="notranslate">
<option value=">Optional pronoun</option>
<option value="Woman">Ms (She/Her)</option>
<option value="Male">Mr (He/Him)</option>
<option value="Non-binary">Non-binary (They/Them)</option>
</select>
</div>
{%- endif -%}
With the non-binary option, you can include an elsif or unless clause before defaulting to male when appropriate. To rule out initials, it omits names under three characters. (In some countries two-letter names are common. However, for this site, some customers enter “Dr.” in the first name field.) The notranslate class prevents customer tags from being translated when a visitor is using Google Translate on the website.
For customers you know to be female who do not indicate so during registration, you can manually add the “Woman” customer tag. It is only necessary to tag male customers in order to distinguish unisex names or those ending with “na” (Dana, Evan…). Tagging a customer ‘Male’ or ‘Woman’ supersedes algorithm for figuring out gender. Elsewhere within the theme code, you may include conditional operands based on gender.
Code includes hidden formatting characters that should not interfere with operation. If necessary, replace non-breaking spaces ( ) with regular space and remove HTML line breaks (<br />). Login and let me know if it works for you in the comments section below.
