Solved

Notify Me button adding an icon to the button

  • 16 September 2023
  • 2 replies
  • 244 views

Badge

Is there a way to add an image or icon to the “notify me” button? I changed the complete text from “Notify me when available” to “Notify me”. It a bit shorter and I want to add an emoji or other icon after the text.

Can someone show me how thats done?

 

Thanks!

icon

Best answer by retention 17 September 2023, 23:25

View original

2 replies

Userlevel 7
Badge +58

Hi @bram-lazea, welcome to the community!

I think you can add emojis (unicode text) as part of the button text label in both the product page or in the modal. However, I’m not aware of how you can use an image instead without a lot of custom javascript or css/html implementation.  

I’m assuming you’re using Shopify?  If so, you can edit the Trigger setting parameters directly in the Template code and add emojis as part of the text.  Look for the code that might look like this:d

 

trigger: {
product_page_text: "Notify Me When Available",
product_page_class: "btn",
product_page_text_align: "center",
product_page_margin: "0px",
alternate_anchor: "AddToCart",
replace_anchor: false
},

Change the text between the quotes from “Notify Me When Available” to “Notify Me 😀” or whatever emoji you want to use.

You can also do this for the confirmation modal (popup window) too under the “modal” parameters:

modal: {
headline: "{product_name}",
body_content: "Register to receive a notification when this item comes back in stock.",
email_field_label: "Email",
button_label: "Notify me when available",
subscription_success_label: "You're in! We'll let you know when it's back.",
footer_content: '',
additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#439fdb",
close_button_color: "#ccc",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}

Replace the “button_label” text for “Notify me when available” to anything else you want.

Does this help?  Let us know if it worked.

Also, you may want to reference this documentation for more details:

---
Joseph Hsieh // retentioncommerce.com // twitter: @retenion 

 

Badge

Thanks, that was actually quite simple! 

Reply