Skip to main content
Solved

Notify Me button adding an icon to the button

  • September 16, 2023
  • 2 replies
  • 433 views

Forum|alt.badge.img+1

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!

Best answer by retention

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 

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 944 replies
  • Answer
  • September 17, 2023

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 

 


Forum|alt.badge.img+1
  • Author
  • Contributor I
  • 2 replies
  • September 20, 2023

Thanks, that was actually quite simple!