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.
Considerations
Image scaling
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.
⚠️ Be sure to allow the Bluecore User Agent if you’re ever planning on selecting Constrain to Set Dimensions.
Show the sale price
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.
Send Test Email in VTE
If you send a test email to yourself from VTE, you are only testing the template - not the entire campaign the template may be connected to.
This means your test send won’t include the optional tracking parameters set up on the Message tab of creating a campaign.
The products included in this test send are random products from your catalog. If you want to test the campaign fully, include all tracking parameters and products that follow your recipe rules, follow the guide on proofing, previewing, and testing email campaigns.
Troubleshooting
Alignment issues (sizing of attributes and scale by width vs fixed pixel range)
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.