Drag
Item added to your cart
Recently, I came across a Reddit post where a user asked how to implement a font preview tool inside a Shopify store. This inspired me to build a simple and customizable section that lets customers preview text in different fonts directly on a Shopify page. If you sell products like custom prints, signs, or t-shirts, this tool can be a valuable addition.
In this guide, I'll explain how the tool works and break down each part of the code to help you integrate it into your store. We'll focus on building and integrating the functionality within the Shopify CMS, with the styling hard-coded. For a deeper dive into styling, feel free to checkout my Custom Quiz Section where a build custom quiz that recommends products.
The schema is the backbone of your Shopify section, defining how the tool will be configured and displayed within the Shopify theme editor. It allows you to set up various options for font selection and text preview, making it easy for store managers to customize the tool according to their needs.
In this section, we’ll break down the schema into three main parts:
The first part of the schema focuses on setting up default fonts using checkboxes. This section defines the fonts that will be available for selection in the preview tool. Here’s how it’s structured:
checkbox. This allows the store manager to select or deselect specific fonts.id attribute uniquely identifies each font option in the schema. This is used to reference the font in the theme code and JavaScript.label provides the name of the font as it will appear in the Shopify theme editor. This makes it clear which font each checkbox represents.default attribute determines whether the font is pre-selected when the section is first added to the theme. For example, fonts like "Arial" and "Roboto" are set to true, meaning they will be checked by default, while others are set to false.This setup allows store managers to easily enable or disable fonts for preview, giving them control over which fonts are showcased in the tool.
Next, let’s move on to the section that handles custom fonts.
The second part of the schema focuses on adding custom fonts. This section allows store managers to specify additional fonts that aren't included in the default list. Here’s how it's set up:
text input. This allows the store manager to type in the names of additional fonts they want to include.id attribute uniquely identifies each custom font input. This is used to reference these fonts in the theme code and dynamically update the font list.label provides a descriptive name for each custom font input field in the Shopify theme editor. It helps store managers understand which field they are filling out.default attribute provides a placeholder value for each input. This is useful for suggesting common fonts that can be easily replaced or customized.With these text inputs, you give store managers the flexibility to add any font they wish to the preview tool. They can type in the names of additional fonts that aren’t part of the default list, ensuring the preview tool is adaptable to various needs.
Finally, let's explore how the schema handles the preview text that users will see in the font preview tool.
Now that we’ve set up the schema, let's dive into the HTML structure that creates the font preview tool. This section of the code sets up the user interface, including inputs for text and font selection, and a preview area where the text is displayed in the chosen font. Here’s a breakdown of how it all comes together:
Type: This is a standard text input field.
ID: The id="fontInput" attribute helps uniquely identify this input field, which will be used to dynamically update the preview text.
Placeholder: placeholder="Type your text here..." provides a hint to users about what they should enter.
Value: value="{{ settings.default_text }}" sets the initial text value to what’s defined in the schema, so users see a default message when they first load the page.
Explanation:
default_fonts: This variable holds a list of predefined fonts split into an array. It’s a static list of common fonts.additional_fonts: This starts as an empty array and will be populated with custom fonts provided in the schema.if statements check if each additional font field is not blank and, if so, add it to the additional_fonts array.all_fonts combines both default_fonts and additional_fonts arrays to ensure all fonts are available in the dropdown.for loop generates an <option> for each font. It sets the selected attribute if the font matches the default font.
<div> acts as a container for the text preview.<p> element displays the text using the font selected in the dropdown.style="font-family: {{ settings.default_font }};" applies the selected font to the preview text. It dynamically updates based on the user's selection.This HTML setup ensures that users can interactively select different fonts and see their text displayed in real-time with those fonts. The integration with Shopify's Liquid templating language allows for dynamic content based on the schema settings.
Now let’s dive into the JavaScript part of our font preview tool. This script makes the tool interactive by allowing users to see real-time changes as they input text or select different fonts. Here’s how each part of the code works:
This ensures that the script runs only after the entire HTML document has been loaded and parsed. This is important because it guarantees that all elements (like fontInput, fontSelect, and previewText) are available for manipulation.
fontInput: Refers to the text input where users type their custom text.fontSelect: Refers to the dropdown menu where users select a font.previewText: Refers to the paragraph element that displays the preview text. 
Explanation: When the page first loads, this function call ensures that the default font selected in the dropdown is loaded and applied to the preview text.
input event on the fontInput field. This event fires whenever the user types something into the field.previewText element with the text the user types. If the input field is empty, it defaults to the initial text provided in the schema ({{ settings.default_text }}).
fontSelect dropdown menu.loadFont function to load the selected font from Google Fonts.fontFamily style of previewText to apply the selected font.
<link> element that points to the Google Fonts stylesheet URL for the selected font.encodeURIComponent(fontName) ensures that the font name is correctly formatted for the URL.<link> element to the document’s <head>, which triggers the browser to load and apply the font.With this JavaScript code, the font preview tool becomes interactive and responsive. Users can see their text in different fonts instantly, making it easier to choose and visualize how text will appear in various styles. This integration enhances user experience, especially for Shopify stores offering customizable products.
With this guide, you’ve learned how to build a dynamic font preview tool for your Shopify store. This tool allows users to see real-time text previews in various fonts, making it a valuable addition to any store offering customizable products.
By breaking down the schema, HTML, and JavaScript, we’ve ensured that each part of the tool is clear and easy to integrate. The schema allows you to manage font options and default text directly from Shopify’s CMS, the HTML structures the tool’s layout, and the JavaScript adds interactivity by updating the preview as users type and select different fonts.
If you’d like to see the full code or need a reference for your own implementation, you can check out the GitHub repository where the complete project is available. Feel free to fork the repository and customize the tool to fit your store’s needs.
Happy coding!
