⚠
Expert Email & SMS sur Klaviyo.
PrĂȘt Ă  te lancer ?
Getting Started
Step 1
Install Klaviyo
Klaviyo is super easy to use and you can get started in just a few steps.

First we need to install Tippy.js with just two scripts. You will install these in the closing </body> custom code section of the page settings or your site settings.

Copy Code Below:
    <!--These Loads Scripts--> 
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>

  
This next bit of code is just to install the "Light Theme" for Tippy. You will place the code below into the </head> (top custom code section) of the page settings.

Copy Code Below:
    <!--This Loads the Light Theme Style--> 
<link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light.css"/>

  
Here is an image reference of where to place the code snippets:
Step 2
Create an Instance
    <!--Tippy JS Settings--> 
<script>
tippy('.tippy', {             // Use class or id
  animation: 'scale',         // See docs for more options (there are a few nice ones 😉)
  duration: 200,              // Duration for ToolTip Animation
  arrow: true,                // Add ToolTip Arrow
  delay: [0, 50],             // First # = delay in, second # = delay out
  arrowType: 'sharp',         // Sharp or 'round' or remove for none
  theme: 'light',             // Dark is the default
  maxWidth: 220,              // Max width in pixels for the tooltip
})
</script>

  
You can see I am using a class name to call Tippy on any specific element that I give that class to.

So in the project I can highlight any text and wrap it in a <span> and then give that span the class of .tippy and the tooltip will show up.

You can give this class to any element too not just text or <span> elements.
Step 3
Tooltip Content/Text
Next we will use custom attributes to add the content/text to our tooltips. Super easy!

Simply go to the element settings in the toolbar in the designer and you'll see "Custom <div> attributes:".

Click the + icon to add a new attribute. Set its name to data-tippy-content.
‍
Next, for the value you will type in whatever you want the tooltip to say. It's that simple and you're done!
Next we need to set up an instance of Tippy to start working right underneath the scripts above in the </body> section.

You can copy the code below to get started. It has the necessary parameters needed to have Tippy working nice and clean.

You will also notice comments for each parameter in the code so you know what they are controlling.

Copy Code Below:
Products by Klaviyo:

Email Hack

Email Hack

+

5

% win's!

$

7

Order Now
No items found.

Sign up now!

Tutoriel
Le guide ultime sur Klaviyo en 2025

Propulser RAPIDEMENT votre boutique Shopify avec BoostEcom 🚀

Nous utilisons une stratégie omnicanal (Email & SMS) sur Klaviyo pour booster le CA mensuel de votre boutique Shopify de +30% !

Planifier un appel découverte
100+ marques accompagnées.
Lisez les témoignages