How to Add a Custom Message to Your Shopify Signup Page

November 14, 2024
How to Add a Custom Message to Your Shopify Signup Page

You always want customers to feel good when they visit your Shopify store. So why not greet them with a custom message?

Adding a custom message to your Shopify account signup page is a simple way to connect with new customers and give them a sense of your brand’s personality and values. 

This guide will walk you through adding a personalized message to your signup page, helping you boost customer engagement with just a few steps.

How to Add a Custom Message to Your Shopify Signup Page

When building a Shopify website, you’ll for sure want to customize many of its aspects. However, keep in mind that Shopify doesn’t have a built-in feature specifically for customizing the signup page, so you’ll need to use a bit of coding to make this work.

Step 1: Go to Your Shopify Admin Dashboard

  1. Login to Shopify: Head to your Shopify dashboard. This is where you’ll find the settings you need to make the changes.

  2. Access Online Store Settings: On the left-hand side, go to “Online Store,” and under it, click on “Themes.” This is where you can edit your installed theme, which will let you add custom HTML or text.
shopify online store themes


Step 2: Edit the Theme Code

Once you’re in the Themes section, follow these steps:

  1. Select Customize: Click on the theme you’re currently using. For example, if you’re using the “Dawn” theme, you’ll see an option to customize that specific theme.
shopify themes


  1. Click Actions: Next to your theme, you’ll see a dropdown button labeled “…” Click on this and select “Edit code” from the dropdown list.
shopify edit code themes


Step 3: Find the Signup Page Template

Now that you’re in the code editor, it’s time to find the right file to edit.

  1. Find the “Customers” Folder: In the code editor, look for a folder called “Sections” or “Templates.” This location may vary depending on what theme you’re using.
shopify edit code sections


  1. Open sections/main-register.liquid: In most themes, the signup page file is called sections/main-register.liquid. Open this file to view the code that controls your signup page. Or you can search using the word “register.”
shopify main-register.liquid


Step 4: Add the Custom Message

  1. Insert Your Message: Within the register.liquid file, find the area where you want the message to appear. This could be near the top of the file, above the signup form, or below it.

  2. Write Your HTML Message: You can add HTML code directly in this file to display your message. For example:
<div class="custom-signup-message">

<h2>Welcome to [Your Store Name]!</h2>

<p>Join us today and enjoy exclusive perks, new arrivals, and much more.</p>

</div>

  1. Customize the Message: Replace “[Your Store Name]” with your actual store name and adjust the message to fit your brand’s voice and tone. This message will appear on the signup page and welcome new customers to your store.
shopify edit save code themes


Step 5: Style Your Message with CSS (Optional)

If you want the message to stand out visually, you can add some custom CSS to make it look more appealing.

  1. Open theme.css or theme.scss: Locate the main CSS file for your theme, usually found in the “Assets” folder. It might be named theme.css, theme.scss, base.css, or something similar.
shopify base.css theme


  1. Add Custom Styling: At the bottom of the CSS file, you can add styling for your custom message. Here’s an example:
.custom-signup-message {

    text-align: center;

    background-color: #f5f5f5;

    padding: 15px;

    border-radius: 5px;

    margin-bottom: 20px;

}

.custom-signup-message h2 {

    font-size: 24px;

    color: #333333;

}

.custom-signup-message p {

    font-size: 16px;

    color: #666666;

}

  1. Save Your Changes: After adding your CSS, click “Save” to apply the changes.

Step 6: Preview and Test Your Message

Now that you’ve added the message and customized it, preview the signup page to see how it looks:

  1. Go to the Signup Page: From your Shopify admin, go to the signup page to view your custom message.

  2. Test Across Devices: Check the appearance of your message on different devices, such as desktop and mobile, to make sure it looks good for all users.

Why Add a Custom Message?

A custom message on the signup page serves several purposes:

  1. Builds Trust: Customers feel more comfortable when they see a welcoming or informative message that reassures them of your store’s professionalism and reliability.

  2. Enhances Brand Identity: A custom message allows you to add a unique touch, reinforcing your brand voice and making your store feel more personal.

  3. Provides Important Information: Use the space to inform customers about perks, such as exclusive offers or benefits they’ll receive by creating an account.

  4. Encourages Engagement: A friendly message can make users feel more inclined to complete the signup process.

Troubleshooting Tips

If your message doesn’t appear as expected, here are a few things to check:

  • Theme Compatibility: Some themes might have different file structures. Make sure you’re editing the correct file.

  • Clear Cache: Sometimes, changes won’t show up immediately due to caching. Clear your browser cache or try a different browser.

  • Check Code Syntax: If the page breaks or your message isn’t displaying, double-check your HTML and CSS code for any mistakes.

Conclusion

Adding a custom message to your Shopify account signup page is a small yet impactful change that improves the customer experience on your Shopify store. By following these steps, you’ll make your signup page more engaging and provide a warm welcome to every new customer. 

Looking to boost your store’s engagement and sales further? Discover how Simple Affiliate can help you create a powerful referral program for your Shopify store. With just a few clicks, you can turn your customers into brand ambassadors and watch your network grow.