Solved

Button for Replenishment

  • 12 July 2022
  • 3 replies
  • 266 views

Userlevel 3
Badge +11

Hi Klaviyo Fam,

How to create a one button that added multiple products in the cart? ( in just one click)This flow is for Replenishment flow for those who ordered multiple products. 

Thank you

 

 

icon

Best answer by In the Inbox 12 July 2022, 19:01

View original

3 replies

Userlevel 6
Badge +29

Hi @thepowerofcopy 

Thank you for posting your question in the Klaviyo Community.

This is a great question and something I have helped many of my clients implement over the last several months and its been a huge revenue driver for their business. 

I developed the following code to insert into a text block that will pre-populate the customers past order when clicked.

Note, this is based on a Shopify Integration where the replenishment flow is triggered by the Placed Order event. 

<div style="background-color:#FF5000;padding-top:15px;padding-bottom:15px; padding-left:15px;padding-right:15px;border-radius:2px;text-align:center;">{% with event.extra.line_items as items %}<a href="{{ organization.url|trim_slash }}/cart/{% for item in items %}{{ item.variant_id }}:{{ item.quantity|floatformat:'0' }}{% if not forloop.last %},{% endif %}{% endfor %}" style="font-family:'Century Gothic';color:#ffffff;font-size:16px;font-weight:700;text-decoration:none;">Re-Order Now</a>{% endwith %}</div>

The nice part about using the HTML in the text block is you can fully customize this button to match your client’s branding. Within the style parameters of the div tag, you can edit:

  • Background-color: color of the button (Currently #FF5000)
  • Padding: space around the button text you can increase or decrease (Currently 15px)
  • Button Radius: How smooth the corners of the button are (Currently 2px)

Within the <a href> tag to make the element a clickable button you’ll find a second style parameter that allows you to customize the text of the button including:

  • Font-family
  • Font color 
  • Font size 
  • Font weight
  • Text-Decoration (is the hyperlink underlined or not - currently no underline)

I hope this helps! If you have any other questions, don’t hesitate to let me know.

@In the Inbox 

Userlevel 3
Badge +11

Wow! Thank you so much @In the Inbox. I REALLY APPRECIATE IT. 🙌🏼

Badge

 

 

Reply