Customize Product Block Layout | Design Branded Email Sections with AiTrillion

Customize the layout of product's block

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⏭️


    • Related Articles

    • Setup Recently Viewed Product Recommendations

      Introduction Let your shoppers reconsider the products and make that purchase with the recently viewed feature. This is a step-to-step guide for the setup of Recently Viewed Product Recommendations on your Shopify store. Here are the steps to setup ...

    • Setup Trending Product recommendations on your Shopify Store

      Introduction Trending products can be displayed on the homepage, in the navigation menu, or in a dedicated section of the website, and they can help customers to see which products are currently in demand and popular on the website. Here are the ...

    • Setup New Arrival Product recommendations for your Shopify store

      Introduction Present your newly arrived products to your customers so that they can buy your latest products. Here are the steps to setup new arrival product recommendations: Step 1: Head over to Product Recommendations> New Arrivals Step 2: Make ...

    • How to customize Layout Setting of Product Recommendations?

      Introduction This is a article to fine-tune your product recommendation layout and display and make the system blend seamlessly with your Shopify store. Here are the steps to customize layout settings of product recommendations: Step 1: Head over to ...

    • Add a Logo block to your email template

      Introduction Adding your brand's logo to an email template is a simple yet powerful way to build trust and create a consistent visual identity. In this article, you'll learn how to insert a Logo block into your email template using the AiTrillion ...