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.
Important Note: This is an advanced tutorial for qualified Shopify developers with JavaScript experience. If you’re not working with a developer and need assistance, we can implement this for a flat fee of $100 USD. Payment can be made at: https://shop.gist-apps.com.
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
- Navigate to the Assets folder in your theme.
- Create a new JavaScript file named giftship-font-selector.js.
- 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
- Create a Dropdown Menu with the input name
Font
.- Check Disable first option.
- Add the following dropdown options:
- “Choose Font”
- “Raleway”
- “Alex Brush”
- “Lora”
- Create a Text Area with the input name
Engraving Text
.
Step 5: Add or Update Fonts
- Edit the product options and add new font names.
- 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.
- In giftship-font-selector.js, add new font names to the
Can't find the answer in our documentation?
Contact Support Google Font Real-Time Personalizer
Showing Product Option Blocks Based on Customer Tags with the Hidden Input Block
Introduction to Product Options
Build a Product Options Set
Dynamic Display Logic in Product Options
Product Option Block: Upsells
Product Option Block: Gift Message
Product Option Block: Datepicker
Product Option Block: File Upload
Product Option Block: Inputs (Text, Number, Email, Phone, Textarea)
Product Option Block: Selections (Checkbox, Radio Button, Dropdown, Color Picker)
Product Option Block: Color Swatch
Product Option Block: Image Gallery
Showing Product Option Blocks Based on Product Variants with the Hidden Input Block
Edit Gift Messages etc on Multiship and Cart Page in Giftship
Styling you Product Options Image Row Upsell Components
Adding Bundles when a User Navigates to the Cart Page
How to show bundle price on product page as bundle is built
How To Implement Product Bundle Snippets With Handlebars.js Cart