Schedule a Call
How to Add SMS to Shopify Password Page
by Ha Nguyen0 CommentsShopify FAQs

If you’re running a Shopify store under password protection while preparing for launch, you probably want to collect potential customer contacts — not just emails, but SMS subscribers too.

Adding SMS to your Shopify password page allows you to build a pre-launch audience that you can notify instantly when your store goes live. In this guide, we’ll walk through how to add an SMS signup form to your Shopify password page using different methods — both manual code editing and app integrations.

How to Add SMS to Shopify Password Page

1. Why Add SMS to Your Shopify Password Page?

Before your store launches, the password page acts as your “Coming Soon” landing page. By default, Shopify only provides an email signup form for customers who want to be notified when the store opens.

Adding SMS signup functionality gives you three major advantages:

  1. Higher engagement: SMS open rates exceed 90%, much higher than email.

  2. Instant communication: Notify subscribers immediately when your store is live.

  3. Personalized marketing: Use phone numbers to send discount codes, early access links, and updates.

2. Understanding Shopify Password Page Structure

Your Shopify password page is built using a Liquid template:

/layout/password.liquid
/templates/password.liquid
/sections/password-template.liquid

Depending on your theme, the actual file may vary (in Online Store 2.0, the path is usually /sections/password-content.liquid).

By default, this page includes:

  • A logo or brand image

  • A short welcome or “Coming Soon” message

  • An email signup form

  • A password entry field

To add SMS signup, you’ll edit this template or embed a third-party form.

3. Method 1 – Add SMS Signup Form Manually (Liquid + HTML)

If you want full control over your design and data collection, you can manually add an SMS form to your password page.

Step 1: Access the Password Page Template

  1. Go to your Shopify admin panel.

  2. Navigate to Online Store → Themes → Edit Code.

  3. Open your password page template.
    Usually, it’s under:

    /sections/password-content.liquid

Step 2: Add the SMS Form Code

Paste this HTML code where you want the SMS form to appear (usually below the email signup form):

<form id="sms-signup-form" class="sms-form">
<label for="phone">Get SMS updates</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
<button type="submit">Notify Me</button>
</form><p id=“sms-message”></p>

Step 3: Add JavaScript for Form Submission

You can use JavaScript to handle submissions via a third-party SMS API like Twilio, Klaviyo, or Postscript.

Example with a fake endpoint (replace with your own):

<script>
document.getElementById('sms-signup-form').addEventListener('submit', async function(e) {
e.preventDefault();
const phone = document.getElementById('phone').value;
const msg = document.getElementById('sms-message');try {
const response = await fetch(‘https://your-sms-api-endpoint.com/subscribe’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ phone })
});if (response.ok) {
msg.textContent = ‘Thank you! You’ll get an SMS when we launch 🚀’;
msg.style.color = ‘green’;
e.target.reset();
} else {
msg.textContent = ‘Something went wrong. Please try again.’;
msg.style.color = ‘red’;
}
} catch (error) {
msg.textContent = ‘Network error. Please try again later.’;
msg.style.color = ‘red’;
}
});
</script>

Step 4: Style the SMS Form

Add simple CSS for better design:

<style>
.sms-form {
margin-top: 20px;
display: flex;
flex-direction: column;
max-width: 320px;
}
.sms-form input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 6px;
}
.sms-form button {
background-color: #000;
color: #fff;
padding: 10px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.sms-form button:hover {
background-color: #333;
}
#sms-message {
margin-top: 10px;
font-size: 0.9rem;
}
</style>

4. Method 2 – Use a Shopify App for SMS Signup

If you prefer not to handle code or API connections manually, you can use Shopify apps that offer SMS collection features and integrate directly with your password page.

  1. Postscript SMS Marketing

    • Allows you to add an SMS opt-in form to any Shopify page.

    • Integrates with the password page easily using an embedded form snippet.

    • Compliant with TCPA and GDPR.

  2. Klaviyo SMS

    • Create a custom signup form that collects phone numbers.

    • Use Klaviyo’s form embed script and paste it into your password page section.

    • Automatically syncs subscribers into your Klaviyo account.

  3. SMSBump (by Yotpo)

    • Provides a pre-built “Coming Soon” SMS capture form.

    • Easy drag-and-drop form builder.

    • Supports automatic welcome messages.

How to Embed the App Form

  1. Create a form inside your SMS app dashboard (e.g., Klaviyo form builder).

  2. Copy the embed code provided by the app.

  3. In your Shopify code editor, paste the embed code inside your password page file (password-content.liquid).

  4. Save changes and test your form in preview mode.

Example embed snippet:

<!-- Example Klaviyo Form -->
<div class="klaviyo-form-R4Gh2t"></div>
<script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_ID"></script>

5. Make Sure Your SMS Form Is Compliant

Collecting phone numbers for marketing purposes requires compliance with privacy regulations:

✅ Include explicit consent language like:

“By submitting your number, you agree to receive SMS notifications from [Your Store Name]. Msg & data rates may apply.”

✅ Ensure you follow:

  • TCPA (US) – Telephone Consumer Protection Act

  • GDPR (EU) – General Data Protection Regulation

✅ Provide an unsubscribe option when you start sending messages.

6. Testing Your Password Page

Once your SMS form is live:

  1. Go to your password page URL (e.g., https://yourstore.com/password).

  2. Enter a test phone number.

  3. Check if:

    • The form submits correctly.

    • A success message appears.

    • The number is received in your SMS platform.

If you’re using an app, confirm the contact appears in your subscriber list.

7. Best Practices for SMS on Password Page

  1. Keep it simple: One field for the phone number is enough.

  2. Add a clear message: Tell visitors why they should sign up (e.g., “Get notified when we launch”).

  3. Combine email + SMS forms: Offer both options for better reach.

  4. Use incentives: Offer a discount or early access to encourage signups.

  5. Test on mobile: Most visitors access password pages via phones, so make sure it’s mobile-friendly.

8. Example: Full Password Page with SMS Form

Here’s how a full working section might look:

<section class="password-page">
<h1>We’re Launching Soon!</h1>
<p>Be the first to know when we go live.</p><form id=“sms-signup-form” class=“sms-form”>
<input type=“tel” id=“phone” name=“phone” placeholder=“Enter your phone number” required>
<small>By signing up, you agree to receive SMS updates from us.</small>
<button type=“submit”>Notify Me</button>
</form><p id=“sms-message”></p>
</section>

You can send a broadcast message from your SMS platform or set up an automated “Store Launch” campaign.

Adding SMS signup to your Shopify password page is one of the most effective ways to build hype before your store launch. Whether you choose the manual Liquid method or a professional app like Klaviyo or Postscript, it’s crucial to test your form, ensure compliance, and deliver a clear value proposition to your audience.

A well-optimized password page can convert casual visitors into engaged SMS subscribers — giving your Shopify launch the momentum it deserves 🚀.

FAQ: Adding SMS to Shopify Password Page

Q1: Can I add both email and SMS signup forms?

Yes. You can include both on the same password page — one for email (default) and one for SMS (custom or app-based).

Q2: Do I need coding knowledge for this?

If you use an app like Klaviyo or SMSBump, you don’t need to code. Manual methods require basic HTML/Liquid editing.

Q3: Is it safe to collect phone numbers this way?

Yes, as long as you use secure HTTPS and comply with consent requirements (TCPA/GDPR).

Q4: Can I style the SMS form with my theme’s design?

Absolutely. Use CSS to match your theme’s color, font, and button style.

Q5: How do I notify subscribers when my store launches?

Leave A Comment

Your email address will not be published. Required fields are marked *