CODE

Programmed Gender Identification

ESTIMATE 9-MINUTE READ

Determine Visitor Gender

In the past, there were just two genders. The graphic icons on public res­trooms were binary. Delivery room doctors worked to preserve such dis­tinc­tions. 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 children.

For the purpose of providing clothing, health­care 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 names like “Mat” for Matilda or Matthew complicates distinction. 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.

Until the option to include custom metafields is available, the only globally accessible customer fields have been the user name and tags after login. This method gives the user an option to add a gender tag to the customer file. (At the time of publication, the Shopify option to provide additional customer metafields to store different types of data is pending.)

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 parame­ter. 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": "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 Barbara Beatrice Beatrize Bella Belle Berdelle Bernice Bethany Bettye Beverly Bianca Birdie Blanca Bonita Bonnie Braelyn Brenda Brenna Brianna Briar Bridgette Brielle Brittney Brittany Brooke Brooklynne Bryanna 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 Erin 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 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 Krista Kristen Kristina Kristy Kristine Krissy 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 Marina 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 Prudence Rachelle Raeanna Raelyn Raelynn Raina Raquel Ramona Rebekah Regina Reena Reina Remmi Reyanna Reyna Rhea Rhiana Rhonda Roberta Robin Robyn Rochelle Romi Romy Rosalie Rosalyn Rose Marie Rose Mary ann Rosemary Roselyn Rosie 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 Traci Tonya 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 Wendi Wendy Willow Windi Winifred Xena Yasmine Ynez Yolanda Yvette Yvonne Zarsha Zenia Zinnia Zivia Zoey Zora"
 },
 {
  "type": "text",
  "id": "male_names",
  "label": "Male exclusions",
  "info": "Female name exclusions",
  "default": "Abel Antoine Alan Alex Christopher Donald Eric Fredrick Gabriel Gene George Joel Jorge Karl Kevin Leon Luis Mark Martin Maurice Melvin Nick Noel Pat Philip Robert Ray Robbert Robert Roy Russell Stephen Steven Theodore Thomas Tom Van"
 }

The sample has the maximum number of female names. Exceeding it will truncate the list. To add others, remove less common ones. With about 725 names, 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.

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 female = false -%}
 {%- assign fname_case = customer.first_name | capitalize | remove: '.' -%}
 {%- if fname_case.size > 2 -%}
   {%- assign fname_case = fname | capitalize -%}
   {%- assign non_female = false -%}
   {%- if settings.male_names contains fname_case -%}
    {%- assign non_female = true -%}
   {%- endif -%}
   {%- if settings.female_names contains fname_case and non_female == false -%}
    {%- assign female = true -%}
   {%- endif -%}
  {%- endif -%}
{%- endif -%}

This returns a true or false 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.

 {
  "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="">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. Elsewhere within the theme code, you may include conditional operands based on gender.

Code includes hidden formatting characters that might interfere with operation. Replace non-breaking spaces (&nbsp;) with regular space and remove HTML line breaks (<br />). Let me know if it works for you in the comments section below.

Reference
  1. Shopify Cheat Sheet. shopify.com

Impart Your Wisdom