Introduction:

Customizing the layout of the Product block allows you to control how your products are displayed in your emails, helping you create visually appealing and well-structured campaigns. By adjusting the layout settings in AiTrillion, you can highlight product images, titles, prices, and call-to-action buttons in a way that matches your brand and improves engagement. This article explains how to customize the Product block layout so you can design emails that are clear, responsive, and optimized for better conversions.

To edit a product block, follow these steps:

Step 1: Click on the block where the products are displayed.

Step 2: Each element provides various settings that allow you to customize how products are displayed, including:

1. Select Product Type – Choose the type of products to display (New Arrivals, Trending, Recent Views, or Shopify Collection).

2. Orientation – Set product display direction (vertical or horizontal).

3. Products in One Row – Define the number of products shown in a single row.

4. Total Number of Rows – Set the total number of product rows displayed.

5. Responsive Block – Ensures mobile-friendly product block arrangement.

6. Row Padding – Adjust spacing around the row (Left, Right, Top, Bottom).

7. Card Background Color – Customize the background color of product cards.

8. Card Border – Add/Enable or Hide/disable borders around product cards.

   
   

Step 3: You also have the following options to customize in the Image, name, price, and button.

1. Height

2. Color

3. Font

4. Alignment

5. Padding

6. Border

7. Width

8. Label

Important Notes:

1. Layout and styling changes apply only to the selected Product block and do not affect other blocks in the email.
   
2. Product information such as image, name, price, and availability is automatically pulled from Shopify and cannot be edited manually within the block.
   
3. Enabling the Responsive Block option is recommended to ensure proper alignment and stacking on mobile devices.
   
4. The total number of products displayed depends on the combined values of Products in One Row and Total Number of Rows.
   
5. Excessive padding, large font sizes, or borders may cause layout issues on smaller screens.
6. Styling changes made to image, name, price, or button settings are applied uniformly to all products in the block.
   
7. If a product is missing required data (such as an image or price) in Shopify, it may not render correctly in the email.
   
8. Different email clients may render fonts, spacing, and alignment slightly differently, so results may vary.
   

Next⏭️