How to trigger a Klaviyo form with a button click on my website?

Technical Q&A

Topic summary

A user is attempting to integrate a Klaviyo popup form with a custom button on their Shopify website but faces a styling issue.

Current Status:

  • Successfully connected Shopify to Klaviyo and obtained the form embed code
  • The form triggers correctly when clicked, but the button loses its original design styling

Technical Challenge:
The user needs to modify the theme’s ‘impact-text’ section to maintain the existing button design while adding the Klaviyo trigger functionality. The provided code snippets show:

  • Klaviyo’s JavaScript event listener for triggering the form
  • The theme’s button render section that controls styling (background color, text color, size, href, content)

Key Issue:
The user cannot figure out how to integrate the Klaviyo trigger code without breaking the button’s visual design from the original theme.

Another user reports experiencing the same problem, but no solution has been provided yet. The discussion remains open with unanswered questions.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to add a klaviyo form to a button which will appear when the button is clicked. I have successfully configured shopify to klaviyo and created the form where it provides a code.

To get the button to trigger the form I would need to edit the theme code, I have been trying to edit the section (impact-text) which contains the button. I was able to successfully get the text on my website and was able to trigger the form when clicked. However, the button link is not in the same design as my original button.

Here is the code I’m meant to add to the theme:

<button class="klaviyo_form_trigger">Click here</button>
<script type="text/javascript">
document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
window._klOnsite = window._klOnsite || [];
window._klOnsite.push(['openForm', 'MY-CODE']);
});
</script>

and here is the section in my code where I’m meant to change

<div class="impact-text__content">

                    {{- block.settings.content -}}
                    {%- if block.settings.button_text != blank -%}
                      {%- render 'button', content: block.settings.button_text, href: block.settings.button_url, size: 'xl', background: section.settings.button_background, text_color: section.settings.button_text_color -%}
                    {%- endif -%}

I’m meant to change the render ‘button’ section but I cant seem to figure it out!!

Could someone help please

1 Like
2

any advice on this? having the same problem