Personalizing your Shopify store can significantly impact customer engagement and user experience. Store owners may also want to display a piece of text in multiple places on the website and be able to edit it easily together. This guide will show you how to add a custom field to your theme settings, make it editable via the Shopify theme editor, and display the custom text on your pages—all without hard-coding changes that would be difficult to update later.

Why It's Needed

Customizing the content on your Shopify store’s pages can serve many purposes. Whether you want to give personalized instructions, provide welcoming messages, or include additional information, being able to edit this text directly from the theme editor all at once makes it much easier to manage. This flexibility is particularly useful for store owners who may not be comfortable with coding but still want to maintain control over their site’s content.

In our example below, we will add a piece of text to the login page of Shopify. Please note that you need to set your customer account to legacy mode, as the new customer account page does not allow editing.

Steps to Implement

Before making any code modifications, always ensure you create a copy of the theme first. Test all your changes on this copy to confirm everything works perfectly before publishing it to the live theme. This precaution helps prevent any issues from affecting your main theme and keeps your work safe.

Step 1: Add the Custom Field to the Theme Settings

First, we need to add a custom field to the theme settings. This field will allow you to edit the login page text from the Shopify admin panel. Here's how to do it:

1. Navigate to the Online Store: In your Shopify Admin, go to Online Store.

2. Customize Your Theme: Under Themes, click Customize next to the Dawn theme (or your active theme).

3. Open Theme Settings: In the theme editor, locate Theme settings at the bottom left.

4. Check for Existing Options: Look for options related to Accounts or Login. If the field for the text you want to edit doesn't exist, you'll need to create a new custom setting.

To do this, we will edit the settings_schema.json file.

Step 2: Add a Custom Field in settings_schema.json

You need to add a custom field in the settings_schema.json file to make the text editable from the admin panel. Follow these steps:

1. Edit the Code: In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.

2. Locate the File: Open the config/settings_schema.json file.

3. Add the Custom Setting: Add a new setting for your custom text using the following structure:

{
"name": "Login Page Text",
"settings": [
{
"type": "textarea",
"label": "Custom Text for Login Page",
"id": "login_page_text",
"default": "Enter your credentials and select the 'Sign In' button to access your account.",
"info": "This text will be displayed on the login page."
}
]
}Copy

Step 3: Update the main-login.liquid File to Display the Custom Text

Next, you need to update the main-login.liquid file to display the custom text. Here’s how:

1. Open the Liquid File: In the theme editor, find and open the main-login.liquid file (or the relevant Liquid file where you want the text to appear).

2. Insert the Custom Text: Use the following code to pull the custom text from the settings:

<p>
{{ settings.login_page_text }}
</p>Copy

Step 4: Customize the Text in Shopify Admin

Finally, after adding the setting and updating the Liquid file, you will be able to change the text from the Shopify Admin. Here are the steps:

1. Access the Theme Settings: Go to Online Store > Themes.

2. Customize the Theme: Click Customize next to your theme.

3. Find the Custom Text Field: Go to Theme Settings (bottom-left corner) and look for the Custom Text for Login Page field under Accounts or Login settings.

4. Edit and Save: Edit the text as needed and save your changes.

Now, you can easily modify the login page text directly from the Shopify Admin without needing to dive back into the code each time you want to make a change. Additionally, you can add this piece of text to other places on the site by repeating step 3.