Customize Klaviyo E-mail Designs
On top of the main features such as adding product recommendations in your e-mail and adding the Questions and Answers in the follow-up e-mail you will need to use some of the Kaviyo left hand side customization settings to arrange the look of your new e-mail template.
Add or remove columns from your table
You can do this from the Table Settings tab.
Add padding to the columns to create some space
This is useful to make sure the content of each cell doesn’t ‘touch’ or appear too close to the neighboring cells. You can do this from the Table Settings tab, under Cells Style by adding some Left/Right padding.
Change column type
To do this head over to the Content tab, click on the column you want to change- this will highlight it in blue. Then select either the Text or Image option underneath Cell Content.
Add images inside text cells
A useful example of this is if you would like to include the product images above the product details inside the same cell. Start off by selecting the Add image icon. In the pop-up Image URL input box enter {{product.image}} and in the Alt text input box enter {{product.title}}
You can check how this will look using the Preview and test button in the right-hand corner of the screen.
Change the background color of the section
To do this, click on the section where you want to change the background color. On the left side of the editor, click on the ‘Background color toggle switch’. Choose a color of your choice.
- Header bar block background color
- Table style background color
Changing the font size and alignment
You can do this from the text editor above the cell.
Customize your Buy Now button
1. Changing the Buy Now text color
You can do this by selecting the Buy Now text and click the text color icon as shown in the video and then choose a color of your choice.
2. Custom code for a Buy Now button
If you want to achieve the results of showing a real Buy Now button you will need to add some custom code. You will need to click the </> icon in the text section of the left hand side menu and then paste the following code:
<div style="text-align: center;"><span style="font-weight: bold; font-size: 15px; font-family: Questrial, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-style: normal; color: rgb(255, 255, 255);"><a href="{[product.url}}" style="font-weight: bold; font-family: Questrial, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-style: normal; color: #ffffff; background-color: #0e1b4d; padding: 0.5rem 1.2rem; border-radius: 2rem; text-decoration: none;">Buy Now</a></span></div>
In the code you can replace the section below to use a different font for the button as well as replacing the colo code to change the color of the text saying Buy Now:
font-weight: bold; font-family: Questrial, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-style: normal; color: #ffffff;To change the color of the background you need to adjust the color code in the following section:
background-color: #0e1b4d;
Customize your Questions and Answers section
Adding some contrasting background color could bring a pop of color in your follow-up e-mail and also make the section easy to spot for customers interested in seeing a breakdown of their quiz answers.
In order to do this you will need to paste the following code in a dynamic text table like you can see in the GIF below:
<section style="border: 1px solid #cccccc; margin-bottom: 1rem;">
<div style="background-color: #0e1b4d; padding: 1rem;"><span style="font-family: Questrial, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 400; font-style: normal; color: #ffffff;"><span style="font-weight: bold;">Q:</span> {{answer.question}}</span></div>
<div style="padding: 1rem; background-color: #fff;"><span style="font-family: Questrial, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 400; font-style: normal;"><span style="font-weight: bold;">A:</span> {{answer.answer}}</span></div>
</section>
And these are different ways to customize your quiz results section inside Klaviyo email templates.