How to add a file to a product page?

StoreHippo allows you to provide a downloadable file related to the product on the product page. A product file can be detailed information about the product in the form of image, document or pdf files, etc. Using this feature, you can provide a free downloadable file directly on the product pages, such as an e-book, size chart or assembly instructions, etc.

Follow the below steps to add a file on the product page:

1. Go to Products > Products section in the StoreHippo Admin Panel. 
2. Add or edit a product. 
3. In the add/edit form, go to the Miscellaneous tab.
4. Find the Files field and click on Add File button.
   
5. The fields to upload a file and description opens up. Click on Choose file and upload a file from your system. Enter the description of the file, if any.
   
6. Click on Insert file button.
   
7. Click on Save to save the product.
8. Now, go to the Design theme. 
9. Go to the product page. Click on the Product as shown below to access the code of the product page.
   
10. Place the following snippet in the HTML code of the product page where you want to display the file.
    

    <div class="files" ng-if="product.files.length">
      <div data-ng-repeat="record in product.files">
        <div ng-if="record.file" class="ms-mt-s ms-mb-s">
          <a ng-href="{{record.file|file}}" download="file" target="_blank">
              {{'Download File'|msTranslate}}
          </a>
        </div>
      </div>
    </div>​

    
    
11. Save the changes.
12. The file is displayed on the storefront as shown below. You can click on the file to download it.