The New Product Introduction page is a dynamic page dished out by a single form that contains all the requirements for a new product announcement. Unlike a standard campaign or Product Highlights page, where the format is configured by the designer, this is a form that auto-fills the NPI page template with content. The NPI landing page, dynamically creates a listing for each NPI page and links to the dynamically generated NPI page. As designers, we do not have control over the page layout but we do have some flexibility in the right rail components and some of the body area. The important thing to remember is that this is a template, some content components can be created outside of the form and embedded into some areas of the form (right rail and body content).

1) File name and Display title

Create your file title with lowercase letters connected by dashes as this will be displayed in the NPI url:

e.g. https://www.avnet.com/wps/portal/us/products/new-product-introductions/npi/xrf8-xilinx-rfsoc

NOTE: All required fields must be completed before a draft can be saved.

Hint: the DISPLAY TITLE is typically the same as the NAME, this makes it easier to locate the file component in the library when editing via the library. If a name is not entered, the system automatically duplicates the NAME in the DISPLAY TITLE field.

2) Add Open Graph Information

The information enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

3.1) OG URL

If there is an alternate URL, such as a vanity URL, please provide it here. Otherwise, use the production URL. (Example: https://www.avnet.com/wps/portal/us/products/new-product-introductions/npi/xrf8-xilinx-rfsoc/)

NOTE: make sure to use the production domain URL (avnet.com)

3.2) OG Title

Typically, the OG Title defaults to the page title unless otherwise specified. Try to restrict to 60 characters or less.

3.3) OG Description

What will appear as a default description on a social post. Restricted to 156 characters.

3.4) OG image and url

If a specific image has been designed, this is where to designate that image. Otherwise, social posts will display with a generic Avnet social image. Alt tag is a requirement for all images and again, ensure that the avnet.com domain is referenced in the image URL field

3) Primary region

Select a Primary Region from the local category library.

5) Canonical-override

This is the URL entered if the original posting of this content is being duplicated from another location. The link element (also known as a canonical element) is an element used in the head section of the HTML to indicate that another page is representative of the content on the page.

6) Hero Banner

The standard NPI hero/banner image is located in the Global Asset Library

Navigate to the default NPI image at:

Libraries > Global Asset Library > Images > Global > Products > General Assets > new-products.jpg

new products

Add Hero Banner text

Unless otherwise specified, the default hero banner text is "New Product Introduction."

7) Title (Page title)

This is the title that appears in the body copy area of the NPI page.

e.g.:

8) Intro text

Intro text is optional, it will display between the title and the intro paragraph.

9) Body

Add the NPI body copy here.

HINT: A few tips to keep in mind when formatting your content in the body area

PAGE TITLE: a page should only contain one H1 title, since the form already contains the page title field, do not add any other H1 titles anywhere else in the body or right rial.
COPY AND PASTE: any time text is copied and pasted from a document, PDF, or web page the REMOVE FORMAT one of two ways
1. Use Ctrl+a (with your mouse in the body area) to select the pasted copy or use the SELECT ALL icon to select all the copy in the body area
  
  Then use the REMOVE FORMAT icon on the toolbar after pasting to remove any previous formatting:
2. Simply paste your content into a text editor like NOTEPAD, this will clear all formatting (including any links in the copy) then copy and paste into the body area and format as desired.

10) Body content spots (optional)

This content will appear right below the body and can be entered via one of the tab options or as html

10.1) Add additional content using the available tabs:

Import: allows the import of copy from a plain text or another HTML file
Export: ignore, it's never used
Insert Tag (the most common): Adding a pre-designed component. (see insert tag instructions at the bottom of this page)
Insert Link: adds hyperlinks
Insert Image: to add an image from the Asset Library

10.2) Enter the desired content in the field with HTML code for formatting

11) Product Image

NPI images should always be 768x432 px, under 100kb, and be housed in the Global Asset Library. Also, a product image should always display the product, never anything else. This is the image that also displays on the NPI landing page where the images should remain consistent.
It is possible to upload an image from your local desktop, but it is discouraged.

NOTE: Alt tags must be entered in the Advanced Options drop down for the Alt text field

12) Supplier Image

Supplier logos are located in the Global Asset Library > Images > Global > Logos

Select the desired logo and ensure to populate the Alt text field

13) Supplier Link

The supplier link is the URL for the manufacture page on the site. For example, the Abradon supplier link for Americas is: https://www.avnet.com/shop/us/m/abracon/