(V5) Add a PDF to any page, product, or newsletter Print

Adding a PDF to a page, product, category, blog post, newsletter email, and other pages is possible with Ozcart.

There are 2 ways to achieve this:

1. Cloud storage link

Upload it to a cloud storage like OneDrive, Google Drive, Apple iCloud, and then create a link to that file in your cloud drive. Copy that link and paste it into your text editor. You can type text and add a link to that text or add an image and add that link to that image so that when users click on the text or image, they're taken to that PDF file.

2. Using the image library (Media Manager)

This is the one we'll be focusing on in this article.

Ozcart currently makes use of 2 text editors. We'll provide the instructions for both. We will refer to the one that has 3 rows of options as the advanced editor, and the one that has 1 or 2 rows of options as the simple editor.

The first step is to upload a PDF to your image library. You can do that by accessing the Media Manager found on the left side, in the menu. If you cannot yet see the Media Manager on the left, then your installation of Ozcart does not yet have that feature. It will be released soon. Alternatively, you can upload a PDF using the text editors and we will show how to do that as part of the instructions below.

The second step is to add that PDF to a text or an image, making them a link.

Here is how you can add a PDF to your page or as part of a newsletter email by using the text editor.

For the advanced editor, there are 2 ways to achieve this:

1. Using the Image button. This way will let you add an image and make that image clickable, leading to the PDF file.
   
   1. Click the Image button (where you upload/choose images).
   2. Click Browse Server.
   3. Create a specific folder for Newsletter attachments, name it what you would like, e.g., PDF, newsletter-attachments, attachments. Make sure to replace spaces with hyphens.
   4. Navigate to that folder and then click the upload button and upload your PDF file there.
   5. Find the image that you want to use as the one that your users must click on to download/view the PDF. Click on that image and click Insert File.
   6. Click Ok.
   7. Click the Link button.
   8. Click Browse Server.
   9. Navigate to the folder where you uploaded the PDF.
   10. Click on the PDF and click Insert File.
   11. Go through the tabs 'Target' and 'Advanced' to configure them as you need.
   12. Click Ok.
   13. The PDF will now be added to your image.
   14. Save the page or send the newsletter email.
       
       
2. Using the Link button. This way lets you add text and a link to that text, leading to the PDF file.
   
   1. Click the Link button. You can actually highlight text and then click the Link button to have that text become the link to the PDF.
   2. Click Browse Server.
   3. Create a specific folder for Newsletter attachments, name it what you would like, e.g., PDF, newsletter-attachments, attachments. Make sure to replace spaces with hyphens.
   4. Navigate to that folder and then click the upload button and upload your PDF file there.
   5. Enter a Display Text, if empty, and go through the tabs 'Target' and 'Advanced' to configure them as you need.
   6. Click Ok.
   7. The PDF will now be added to your content.
   8. Save the page or send the newsletter email.

For the simple editor:

1. Click the image manager button (where you upload/choose images).
2. Create a specific folder for Newsletter attachments, name it what you would like, e.g., PDF, newsletter-attachments, attachments. Make sure to replace spaces with hyphens.
3. Navigate to that folder and then click the upload button and upload your PDF file there.
   
   
4. Now that it's uploaded, you can't yet add it to your content. You have to add it as a clickable link or image, and to do that, you must find the path to that PDF.
   
   Here is how you can find out what the path is of an image in a folder. This is best done in an empty text editor so that you can find it quicker:
   1. Add any image to your content area using the text editor, preferably one in the same folder as your PDF.
   2. Click the </> button (Code View) in the text editor.
   3. Find the path that is between the quotes after src (src="path-here") and copy it. As an example, this is the location of an image in our demo website:
      src="https://demo.ozcart.com/_v5/image/catalog/Banners/ozcart-banners.jpg".
      You would take only this part: https://demo.ozcart.com/_v5/image/catalog/Banners/ozcart-banners.jpg
      If you're not using a staging site, it would be best to take the relative path, like this: /image/catalog/Banners/ozcart-banners.jpg
      
      Here's a description of what you are seeing:
      You have the domain and initial path structure which will never change (unless you change your domain): https://demo.ozcart.com/_v5/image/catalog or /image/catalog
      Note that our demo is in a subfolder. Your website most probably won't be in a subfolder, and so it should follow this format: https://example.com/image/catalog
      Then, you have the folder called Banners. You'll have to change Banners to your own folder name where your PDF is.
      The last one, ozcart-banners.jpg, is your file name.
      
      Knowing the above, here's an example. You want to upload a PDF named ozcart.pdf
      You upload it to the folder called attachments.
      And so, here's the path that you need to use:
      https://example.com/image/catalog/attachments/ozcart.pdf
      
      
5. Now that you have the path to the PDF, you must make it a clickable text or image that takes you to that PDF.
   
   You can use the text editor button method (easier):
   
   Clickable text:
      i. Type the text that you want to use as the one that your users must click on to download/view the PDF. Highlight your text.
      ii. Click the Link button.
      iii. In the 'To what URL should this link go?' field, enter the path, like this: https://example.com/image/catalog/attachments/ozcart.pdf or /image/catalog/attachments/ozcart.pdf
      iv. Click Insert Link.
   
   Clickable image:
      i. Add the image that you want to use as the one that your users must click on to download/view the PDF and click on it.
      ii. Click the pencil icon on the left to open the Image Attributes popup.
      iii. In the URL field, enter the path, like this: https://example.com/image/catalog/attachments/ozcart.pdf or /image/catalog/attachments/ozcart.pdf
      iv. Click Ok.
   
   You can use the Code View method (challenging):
   
   Clickable text:
   <a href="https://example.com/image/catalog/attachments/ozcart.pdf">Download our Ozcart PDF file</a>
   Clickable image:
   <a href="https://example.com/image/catalog/attachments/ozcart.pdf"><img alt="" src="https://example.com/image/catalog/Banners/ozcart-banners.jpg" /></a>
   
   The above must be added in the Code View. In the text editor, click the </> button to view the Code View. Paste one of the codes from above and then click the </> button again. You will see your links in the editor, either as text or image, depending on which code you chose.
   
   
6. Save the page or send the newsletter email.