Product Block in AMP Email

Showcase items, catalogs, or real-time inventory directly inside an AMP email with the Product Block.

The Product Block now works inside AMP Drag & Drop emails. You can add product content such as recommendations, catalog picks, product feeds, collections, and merchandising-triggered products, the same way you already do in HTML Drag & Drop emails.

Prerequisites

Before you start, make sure:

  • Product Catalog Integration is enabled for your account.
  • At least one catalog is synced to your account.

Add Product Block

Refer to the steps below on how to add a product block in the AMP email editor.

Add Product Block in AMP Email Editor

  1. Log in to the Netcore CE dashboard and click CREATE > Email > AMP.
  2. Spot the Widget section in the left pane and drag & drop a Product block on the canvas.
  3. Click on the block. Multiple options appear on the right pane.

General Options

Refer to the table below to learn more about General options.

General OptionsDescription
Type

Select the method for displaying products in your email:

Dynamic: This displays products that update automatically based on predefined rules or triggers. These rules can be based on:

  • Recommendations: Products tailored to the user’s preferences or behavior.
  • Collections: Specific product groups curated in the catalog.
  • Merchandising triggers: Rules like Best Sellers or New Arrivals.
  • Product Feed: Products filtered by attributes like price, inventory, or categories.

Static: This displays a fixed selection of products selected manually by you. These products remain the same for all recipients, regardless of their preferences or behavior.

When you choose Static:
  1. Click Select next to Products to display.
  2. The Browse products window opens.
  3. Use the account, category, and status filters to find products.
  4. Check the products you want to add and click Save.
Products to displayClick SELECT to choose the specific products you want to add to the email.
Product details to displayThis is a mandatory step to select the product details to include. You can choose up to seven details such as name, price, or description. Click Edit to select labels, map attributes, and redirection URLs, then click Save.
ButtonToggle On/Off to include a button for each product and add custom button text. For example, Buy now or Add to cart.
PaddingAdjust the spacing within the template.
AlignmentAlign the selected element within the template.
No. of images in a rowSpecify the number of product images to display per row in the email from a dropdown menu.
No. of productsSelect the number of products to include in the email from a dropdown menu.
Image AlignmentSet the alignment of product images: Left or Right.
Product AlignmentSelect how products are displayed in the email: Grid (products arranged in rows and columns) or List (products arranged vertically).
ResponsiveSelect whether you want to hide the element on mobile devices or a computer.

Style Options

Refer to the table below to learn more about Style options.

Product Block Styling Options

Style OptionsDescriptions
Block BackgroundAllows you to set background colour or image.
Block border

Allows you to adjust border thickness, style, colour, and corner radius with Border Settings.

  • Border Thickness: Adjust the width of the border.
  • Border Style: Choose from Solid, Dash, or Dotted for different border appearances.

Solid: Creates a continuous, solid line for the border.
Dash: Generates a border with a series of short dashes.
Dotted: Produces a border made up of evenly spaced dots.

  • Border Radius: Determine the curvature of the border's corners.
  • Border Colour: Select the colour of the border.

Card styleDefine how individual product cards are displayed. Image display options are Actual size, Fill space, Fit inside, and Stretch to fit. You can also edit the width, height, border color, thickness, style, and corner radius.
Image propertiesImage display options: Actual size, Fill space, Fit inside, Stretch to fit
You can also edit width, height, border color, thickness, style, and corner radius.
ButtonToggle the button on or off. Set the button text, font style, color, and alignment.
Product details styleUse the slider to set the spacing between details. Select font style, size, and color for the product name.
Gradient

Allows you to create gradual changes of colour within the template using the Gradient Type and Gradient Direction.

Gradient type: It refers to the specific manner in which colors transition within a gradient.

  • Radial: Radiates outward from a center point in a circular pattern.
  • Linear: Transitions in a straight line (horizontal, vertical, or diagonal).
  • Repeat Radial: Repeats the radial pattern across the element.
  • Repeat Linear: Repeats the linear pattern along the specified direction.

Gradient Direction: Select the direction for the gradient effect, including top, right, center, bottom, or left.

📘

Dynamic Rule in Product Feeds

  • If no products are fetched due to an out-of-stock catalog, the email will be suspended. The journey will continue, but the email will not be sent.
  • If a dynamic rule is in a template and the product feed is deleted, the email will also be dropped, while the journey remains active.
  1. When your template is ready using your desired elements and settings, click the Live Preview button to see how it will appear on the website.

    Preview Product Block

  2. Click the Preview button at the top of the editor.

    Preview the Product Block

    The preview pane opens with two columns.

    • AMP Preview on the left shows how the email renders on AMP-supported clients like Gmail and Yahoo Mail.
    • HTML/Fallback preview on the right shows how it renders everywhere else, and on AMP clients if the AMP version fails.
    • Use the toggles at the top center to check how the block looks under different conditions:
    • Desktop and Mobile icons switch both preview columns to that screen size.
    • The clock-style icon switches between light mode and dark mode, so you can check contrast and readability either way.
    • Click Back to editor to make more changes, or Close preview to exit.
  3. Click Save & Close once you finish configuring the block.

📘

Important

If a template uses a product feed that gets deleted later, an error message will appear saying Feed used in this template has been deleted.

Campaign and Journey Availability

The product source you pick decides where the template can go.

Works in campaigns and journeys:

  • Static Product Picker
  • Product feed (custom feed)
  • Recommendation algorithms marked as campaign-compatible

Works in journeys only:

  • Collection
  • Merchandising events
  • Recommendation algorithms marked as journey-only
📘

Important Points to Remember

  • If a template has more than one Product Block, and even one block uses a journey-only source, the whole template becomes journey-only. It won't appear in campaign template selection, and the "Use in campaign" option disappears from the template flow. It still shows up normally in journey template selection.
  • You can't use Collection and Merchandising events in the same template. If one is already added, the other stays blocked.
  • Templates that use Collection show their template type as Product Collection in the journey flow, since this source needs an extra setup step there.
🌟

Good to know

  • The block shows a preview in the editor. It doesn't preview live or random products yet. Dynamic preview support arrives with a separate release.
  • Send test uses the current behavior for now. Enhancements for Collection, Merchandising events, and Recommendation-based templates arrive with a separate release.
  • Product Block errors show the same error message style you already see in HTML emails. No new pop-up interrupts your flow.
  • The existing Shopify Product Collection block doesn't change. It stays separate from the standard Product Block covered in this guide.
  • Product and block limits follow your account's global settings, the same as HTML emails.



Did this page help you?