How can we help?

Search our help center

How to Create a Subscription Form Floating Button

The Subscription Form in SMSBump allows you to create 3 visual types of phone number signup forms to appear on your Shopify store’s website:

  • Floating button: a floating button displays at the bottom of your website and opens the signup form when clicked.

  • Popup: the popup will appear in the center of any page on your website you select.

  • Embed form: Copy the embeddable form code and paste it in your theme files to display on any page.


In this post you will learn how to create a subscription floating button.


Getting Started


Click on Subscription Form on the main menu.




Choose Subscription Form Type


You should now see the three types of subscription form types you can choose to create. Click on Select under Floating Button to create one.






Subscription Form Editor

On the left side, you will see the necessary steps needed to customize your floating button. On the right is the site layout, which lets you preview how the button will display. Above it, you can click on the desktop, tablet, or phone icon to display the layout size accordingly.




Click on Button on the Floating button menu, to start setting up its visual characteristics.




Choose the Button Style

Choose the style of the button from the dropdown menu. Keep an eye on the site layout to preview how it will appear on the site. You can change the color and text later.




The default style option of the floating button looks like this:



The modern style option adds a shadow effect:




The rounded style option appears like this:




The ghost style option looks like this:




Adding an Icon

You can toggle the switch under Icon to on or off choosing whether it will appear on your floating button. You can do the same next to Only icon on mobile if you’d like the icon to appear only on mobile phones without any text.



Click on the dropdown menu to choose the icon you would like to appear.



Text and Color

You have three main fields for configuring the button content and colors.


  • Text: write a short text that will appear on the floating button (e.g. “NEW DEALS HERE”).

  • Text Color: choose the color of the floating button by clicking on the square icon or type in a unique hex code for a specific shade (e.g. #00FFFF for aqua).

  • Background Color: choose the color of the floating button by clicking the square icon or type in a hex code if you have a particular color in mind.




Keep an eye on the site layout to the right to see if the button style looks alright.



Position of the Button

Under Position you can choose the button alignment, and slide the bar under Bottom Offset and Side Offset to make a finer adjustment.


  • Position: Click on Left, Center, or Right to align the button to your liking.

  • Bottom Offset: Use the slider to adjust the vertical offset of the button.

  • Side Offset: Use the slider to adjust the horizontal offset of the button.




Click on Next Step to get to the Form Appearance.




Form Appearance

In this step you can change the colors of the different elements that will appear on the subscription form.


  • Form Background Color: This is the color of the entire background for your signup form. In the example below it’s set to white.

  • Form Text Color: Set the color of the text that appears on the signup form.

  • Form Error Color: Choose the color of the text that will appear if customers have entered an invalid response or left a field blank.

  • Subscribe Button Color: This is the color of the button customers will press to subscribe to receive SMS marketing. It is set to red in the example below.

  • Subscribe Button Text Color: Select the text color on the button customers will press to subscribe.




This is how the form will look like with the colors set above, once the floating button expands:




Click on Next Step to get to Form Texts.



Editing the Form Text

You are able to add an icon and text to fully customize the way your subscription form will appear.

  • Icon: Toggle the button to On to choose an icon that will appear on the top of the subscription form.

  • Search icons: You can search for a specific icon by typing relevant words in the field box.

  • Load more: Click on Load more to expand the list and display more icons.




When you have chosen one, simply click on it and you will see it display on the site layout preview.




Header Text and Description

The next two fields are the first thing customers see once they click on the floating button and it expands to open the form:

  • Header Text: Write an attention grabbing header which tells customers the benefit of subscribing to receive SMS marketing. The text will appear bolded below the icon you chose.


  • Description: Use this text for your call to action — prompt customers to sign up by filling in the fields in the form.




Entering a Phone Number

Next, you can choose the text that will display to prompt the customer to enter their phone number that will subscribe them. Type the text in the box under Phone Field Placeholder.




Subscribe Text and Button

There are two fields which enable you to customize the way a customer is prompted to take action and subscribe to your SMS marketing:

  • Subscriber SMS Program Text: Let the customer know that message rates may apply as well as how to cancel their subscription and get help. Finally, let them know how many weekly messages they can expect to receive.


  • Subscribe Button: Write in the text that will appear on the button they will press to subscribe.



Success Heading and Description

Under Success Heading and Success Description write in what the customer will see once they have successfully subscribed to receive text marketing.

Click on Next Step to get to Subscription SMS.



Subscription SMS Settings

In the Opt In Method dropdown menu you can select how the customer subscribes:


  • Single: The customer is signed up after entering their phone number.

  • Double: The customer is subscribed after clicking a confirmation link sent in a text message.




  • Confirmation SMS: Edit the text message customers will receive if they have chosen the double opt in option. Only use the given short codes, as others will not work.


Important: Keep an eye on the SMS Counter to let you know if you’re exceeding the 160 characters allowed.




  • Subscription SMS: Edit the message customers will receive after they have subscribed to receive marketing messages.


Use the opportunity to link to your Shopify website using the {SiteUrl} short code below the field.




Click on Next Step to get to the final step, Additional fields.





Additional Fields


Enable Country Select can be toggled On or Off with a simple click. If turned on, customers will be able to choose their country.


If you leave this off all subscriber phone numbers will default to the country code where your business is located.




We strongly recommend you leave the Enable GDPR Checkbox turned to On, as this will give customers the chance to agree to your Privacy Policy & ToS. This will also be a requirement for TCPA.


  • Text: Customers can read and review the terms by clicking on a link you provide. Edit the text that prompts them to agree to those terms.

  • Link: This is the hyperlink that will lead customers to your Privacy Policy & ToS page.




  • Enable subscription with text message: Enable or disable this feature by clicking On or Off.


When a customer taps the Subscribe with text message button, they will be automatically redirected to their messaging app on their smartphones. Once there, they will see a specific keyword already generated in their message.


Next, they just need to tap the Send button to send the predefined keyword and this action will subscribe them to your SMSBump Text Marketing List.


Important: This feature is currently available to U.S. customers only.





Save and Publish

Once you are happy with how your floating button looks like, press the Save and Publish button. Good job!


You now have a floating subscribe button in your Shopify store website.




Related articles

View the reviews from happy Shopify merchants worldwide who succeed with SMSBump.

Build your SMS marketing strategy. Grow your text message subscriber lists. Segment your audience and automate SMS marketing messages that boost your revenue and ROI.

Copyright © 2020 SMSBump Inc.