Programmed Gender Identification

Determine Visitor Gender

Do you remember the time when people identified themselves as one of 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 generations.

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 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.

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 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.

Login For Code

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.

Login For Code

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.

Login For Code

Then enable it on registration forms and newsletter signup forms.

Login For Code

With the non-binary option, you can include an elsif or unless clause before defaulting to male when appropriate. To rule out initials, the code 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 (&nbsp;) with regular space and remove HTML line breaks (<br />). Let me know if it works for you in the comments section below.

Updated: Sep 14, 2023

Include Meaningful Comment