Solved

Product image/title alignment

  • 24 January 2022
  • 2 replies
  • 278 views

Badge +3

Hi,

I have created a new newsletter, but it relates to any “file” created within Klaviyo.

When I choose the ‘Products’ block (I use woocommerce in wordpress), if a product title is longer than others, the products don’t align properly.

I was hoping to have the images aligned, and the first line of the product title aligned. For all titles longer, have them end on an additional line if needed.

Thanks.

icon

Best answer by retention 24 January 2022, 21:06

View original

2 replies

Userlevel 7
Badge +60

Hey @fandf 

Thank you so much for reaching out to the Klaviyo Community for help!

Can you send the community some screenshots of what you are seeing currently that you want to change, including the settings in the behaviours tab on the left of your template editor? this will help us understand why its showing up differently than you want.

Thank you in advance for providing more context to what you are looking to do!

Userlevel 7
Badge +57

@fandf - Would definitely be helpful if you showed some examples, as there’s probably lots of ways to solve your alignment issue.

One way is to use Template Variable Filters where you can “slice” a name to a certain number of characters.  So if you want to just truncate product title name in the first line to “X” many characters, and the second line (if longer) to the remaining characters,  See here:

Glossary of Variable Filters

slice

Can be applied to a list or string. If applied to a list, it provides the list items specified. If applied to a string, it provides the characters specified. 

If your variable is hello world 

{{ your_variable|slice:':5' }} renders as hello

{{ your_variable|slice:'3:8' }} renders as lo wo

{{ your_variable|slice:'8:' }} renders as rld

 

But there may be other solutions too, including wrapping things in a Table or managing the Image padding and spacing.  A screenshot or some code snippet could make it easier to help you.

Reply