Adding Documents or PDF files to Product Pages

Article Number: 625 | Rating: Unrated | Last Updated: Thu, Nov 19, 2015 at 11:52 AM

Summary:

Sometimes it is necessary to add files to a product page. This is useful for providing User Guides, Product Documentation or other downloads for each specific product.

Solution:

The best way to add files to a product page is to create an attribute that you can store a link to the file in and then displaying that attribute in the Additional Info tab on the product page.

To create the attribute, from the NRO Admin Panel, brows to Catalog / Attributes / Manage Attributes :

Click on Add New Attribute:

Enter in the Attribute Code . This can be anything that you want to call the Attribute.

Set the Catalog Input Type for Store Owner to Text Area.

Note: If this is set to Text Field then you will be limited to only 256 characters in length for the link that you are adding.

In the Frontend properties section set Visible on Product View page on Front-end to Yes

Click on the Manage Label / Options tab on the left and enter in a name for the Attribtue in the Admin field . This is what will display in the Additional Info tab.

Click Save Attribute at the top right.

Once the Attribute has been created, you will need to add it to the Default Attribute set. To do this, from the NRO Admin Panel brows to Catalog / Attributes / Manage Attribute Sets .

Click on the Default Attribute Set.

Select the attribute that was just created from the Unassigned Attributes section on the right and drag it over to the General section in the Groups field on the left:

Click Save Attribute Set at the top right.

Now that the Attribute has been created and assigned to the Attribute set, it should now be visible in the Product Details page under Catalog / Manage Products when a product is selected:

You can now upload your files to the site under CMS / Images and other files .

It is recommended that you create a folder for your files. For this example, we are uploading PDF files, so we should create a directory called PDF:

To create the new directory click the media/wysiwyg listing in the Folders section on the left and click New Dir from the Toolbar at the top:

Enter in a name for the directory and click the green checkmark.

To upload your files, click on the PDF folder that you just created and click on Upload in the toolbar at the top and select From Computer then click Browse :

Select the file that you want to upload and click Send .

Now that the file is uploaded, we can determine the link to the file by looking at the directory structure at the top of the Manage Images & Other Files window:

This shows us that the file is in the /media/wysiwyg/pdf directory. For this example the link would be http://domainname.com/media/wysiwyg/pdf/NCR_Secure_Pay_User's_Guide.pdf.

Now that the file is uploaded and the path to the file has been established, the link can be created in the product page under Catalog / Manage Products. Select the product and scroll down to the Product Documentation attribute that was created in the steps above.

You can use the following html code to display the link:

<a href=" /media/wysiwyg/pdf/NameOfFile.pdf " target="_blank"> Text to Display </a>

Note : You may see a message at the top of the Admin Panel stating that the Indexes need to be updated. If this message is displayed go to System / Index Management and select the index to be updated. Choose Reindex from the dropdown at the top right and click Submit .

This will now display in the Additional Info tab on the Product Detail Page: