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.
 

SMSBump_dashboard_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.

 

 

choose_floating_button_SMSBump

 

 

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.

 

floating_button_subscription_form_SMSBump
 

 

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

 

main_menu_floating_button_SMSBump
 

 

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.

 

choose_button_style_SMSBump
 

 

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


default_floating_button_style_SMSBump

 

The modern style option adds a shadow effect:

 

shadow_floating_button_SMSBump

 

The rounded style option appears like this:

 

rounded_button_style_SMSBump

 

The ghost style option looks like this:

 

ghost_style_floating_button_SMSBump
 

 

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.

 

add_icon_floating_button_SMSBump
 

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

icon_types_floating_button_SMSBump
 

 

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.
     

 

button_text_color_floating_button_SMSBump


 

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


 

new_deals_site_layout_floating_button_SMSBump



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.
     

 

button_position_floating_button_SMSBump


 

Click on Next Step to get to the Form Appearance.


 

next_button_floating_button_SMSBump

 

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.
     

 

form_appearance_floating_button_SMSBump


 

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


 

floating_button_form_SMSBump

 

Click on Next Step to get to Form Texts.

 

next_button_floating_button_SMSBump



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.

 

floating_button_icon_choose_SMSBump


 

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

 

form_icon_floating_button_SMSBump

 



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.

     

header_text_and_description_floating_button_SMSBump
 

 

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.

 

phone_field_placeholder_floating_button_SMSBump

 

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.

 

subscribe_button_floating_button_SMSBump



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.
 

next_step_button_floating_button_SMSBump

 


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.

 

opt_in_method_floating_button_SMSBump

 

  • 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.

 

confirmation_SMS_floating_button_SMSBump


 

  • 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.
 

 

subscription_SMS_floating_button_SMSBump

 

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

 

next_step_button_floating_button_SMSBump

 

 

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.

 

enable_country_select_on_floating_button_SMSBump

 

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_GDPR_checkout_floating_button_SMSBump

 

  • 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.

 

text_to_subscribe_floating_button_SMSBump

 

 

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.

 

save_and_publish_button_SMSBump

 


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 © 2019 SMSBump Inc.