Google Font Real-Time Personalizer

This tutorial will guide you through creating a Google Font selection menu that dynamically updates the font of a text area for personalization. This can replace the need for third-party personalization apps.

Step 1: Duplicate Your Live Theme

Always work on a duplicated development theme to ensure your live store remains unaffected by changes.

Step 2: Create and Upload the JavaScript File

1. Navigate to the Assets folder in your theme.
2. Create a new JavaScript file named giftship-font-selector.js.
3. Copy and paste the following code into the file:

(() => {
    const MODULE = {
        config: {
            fonts: {
                'Raleway': "'Raleway', serif",
                'Alex Brush': "'Alex Brush', serif",
                'Lora': "'Lora', serif"
            },
            fontDropdown: null,
            engravingTextarea: null
        },

        init: function () {
            this.registerEventHandlers();
        },

        registerEventHandlers: function () {
            // Register the `giftship.loaded` event listener
            document.addEventListener('giftship.loaded', this.handleGiftshipLoaded.bind(this));
        },

        handleGiftshipLoaded: function () {
            // Query elements dynamically after `giftship.loaded` fires
            this.config.fontDropdown = document.querySelector('[name="properties[Font]"]');
            this.config.engravingTextarea = document.querySelector('[name="properties[Engraving Text]"]');

            const { fontDropdown, engravingTextarea } = this.config;

            // Validate element existence
            if (!fontDropdown || !engravingTextarea) {
                console.error(
                    'Error: Font dropdown or engraving text area is missing. ' +
                    'Ensure the giftship.loaded event is triggered after the elements are rendered.'
                );
                return;
            }

            // Centralized event listener binding
            this.bindFontDropdownChange();

            // Initialize the engraving textarea with the current font
            const initialFont = fontDropdown.value;
            this.updateTextareaFont(initialFont);
        },

        bindFontDropdownChange: function () {
            const { fontDropdown } = this.config;

            if (fontDropdown) {
                // Debounce the dropdown change handler
                fontDropdown.addEventListener(
                    'change',
                    this.debounce(this.handleFontDropdownChange.bind(this), 200)
                );
            }
        },

        handleFontDropdownChange: function () {
            const { fontDropdown, engravingTextarea, fonts } = this.config;
            const selectedFont = fontDropdown.value;
        
            // Update the engraving textarea with the selected font
            this.updateTextareaFont(selectedFont);
        
            // Update the fontDropdown styling
            const fallbackFont = "'Arial', sans-serif"; // Fallback font
            const font = fonts[selectedFont] || fallbackFont;
        
            if (fontDropdown) {
                fontDropdown.style.fontFamily = font; // Apply font style to the dropdown
            }
        
            console.log(`Font dropdown and engraving textarea updated with font: ${selectedFont}`);
        },

        updateTextareaFont: function (selectedFont) {
            const { engravingTextarea, fonts } = this.config;
            const fallbackFont = "'Arial', sans-serif"; // Fallback font

            if (engravingTextarea) {
                const font = fonts[selectedFont] || fallbackFont;

                // Update the font style
                engravingTextarea.style.fontFamily = font;

                // Update the placeholder text
                engravingTextarea.placeholder = `Engraving Text (${selectedFont || 'Default Font'})`;

                // Add accessibility support with an aria-label
                engravingTextarea.setAttribute(
                    'aria-label',
                    `Engraving text input with ${selectedFont || 'Default Font'} font`
                );
            } else {
                console.error('Error: Engraving textarea is not available for font updates.');
            }
        },

        debounce: function (func, delay) {
            let timer;
            return function (...args) {
                clearTimeout(timer);
                timer = setTimeout(() => func.apply(this, args), delay);
            };
        }
    };

    // Initialize the MODULE
    MODULE.init();
})();

Step 3: Edit theme.liquid to Include the Snippet

Add the following code to your theme.liquid file within the <head> section or where appropriate:

{% if template.name == 'product' %}

<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Ms+Madi&family=Shadows+Into+Light+Two&display=swap');
</style>

<style>
body .gs__row [name="properties[Engraving Text]"] {
font-size: 2rem;
font-weight: 400;
font-style: normal;
}
</style>

<script src="{{ 'giftship-font-selector.js' | asset_url }}"></script>

{% endif %}

Step 4: Create Product Option Blocks

1. Create a Dropdown Menu with the input name Font.
   • Check Disable first option.
   • Add the following dropdown options:
     • “Choose Font”
     • “Raleway”
     • “Alex Brush”
     • “Lora”
2. Create a Text Area with the input name Engraving Text.

Step 5: Add or Update Fonts

1. Edit the product options and add new font names.
2. Update the following files:
   • In giftship-font-selector.js, add new font names to the fonts object (line 3).
   • In theme.liquid, embed the new Google Font URLs.