There are a few nuances with using VTE to build your email templates. In this document, you’ll learn how to troubleshoot issues with sale prices and misaligned grids.

You may have some images with different aspect ratios, meaning some are wider than they are tall, while some images are taller than they are wide. This can cause alignment issues in grids when trying to resize images.

If all your images are the same size, you can set the Product Images setting to Scale by Image Width. Since they’re all the same size, they will scale at the same rate.

If your images are different sizes, choose Constrain to Set Dimensions. This will lock those images at that size, and put an imaginary container around them. It will create extra white space around the images, but each container will be the same size.

By default, the latest sale price will be displayed in a product block in a template. Information on on sale status, sale price and original price all comes from the product catalog information.

To show the sale price and the original price in a product block, navigate to the Price dropdown and click Show Original Price. This will show both the sale price and the original price in the grid.

From there, you can make edits to the styling of either the sale price or the original to make the sale stand out, such as putting a strikethrough in the original, bolding the sale, and putting the sale price underneath the original.

If your buttons are misaligned in a grid of products, you may need to adjust some settings in VTE to fix the issue.

First, look at the line height setting under the “name” dropdown - this is how many pixels tall each line of text is.

Then, look at the container size under the same dropdown. The container size is basically an invisible box around the text. The container size is a designation of how much space exists for the text.

If the line height is 18 pixels and the container size is 36 pixels, there is space for two lines.

Set the product container size to be a multiple of the longest product name you have so the buttons aren’t misaligned.

For example, if your line height is set to 18, and some product names take up three lines, set your container size for all templates to 54.

If adjusting the line height didn’t solve your issue, another solution is to truncate the name of your products to about 30 characters. This will align the buttons, but cut off the text of some products.