How to embed PDF document file into the page on Shopify
Generally, a hyperlink is used to link a PDF document to display in the browser. HTML anchor link is the easiest way to display a PDF file.
1 | <p>Open a PDF file <a href="https://cdn.shopify.com/s/files/1/2981/8208/files/sample-document.pdf">example</a>.</p> |
But if you want to display PDF document on the web page, PDF file need to be embedded in HTML.
Use the following code to embed PDF file in the HTML web page.
1 | <embed src="https://cdn.shopify.com/s/files/1/2981/8208/files/sample-document.pdf" type="application/pdf" width="100%" height="600px" /> |
Now we will show how you can control the PDF document view on the web page. Using parameters in URL, you can specify exactly what to display and how to display PDF document.
The following parameters are commonly used to embed PDF file in HTML or open in the browser.
- page=pagenum – Specifies a number (integer) of the page in the document. The document’s first page has a pagenum value of 1.
- zoom=scale – Sets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.
- view=Fit – Set the view of the displayed page.
- scrollbar=1|0 – Turns scrollbars on or off.
- toolbar=1|0 – Turns the toolbar on or off.
- statusbar=1|0 – Turns the status bar on or off.
- navpanes=1|0 – Turns the navigation panes and tabs on or off.
You can specify multiple parameters in URL. Each parameter should be separated with either an ampersand (&) or a pound (#) character. Actions are executed from left to right and later actions will override the previous actions.
URL with parameters looks like the following.
1 2 3 4 5 | https://www.huratips.com/sample-document.pdf#Chapter2 https://www.huratips.com/sample-document.pdf#page=2 https://www.huratips.com/sample-document.pdf#page=2&zoom=200,250,100 https://www.huratips.com/sample-document.pdf#zoom=90 https://www.huratips.com/sample-document.pdf#page=72&view=fitH,100 |
You can hide or remove the toolbar, navpanes, and scrollbar of the PDF file opened in HTML <embed> using parameters in URL.
Use the following code to embed PDF document in the web page and remove or hide toolbar of embedded PDF.
1 | <embed src="https://cdn.shopify.com/s/files/1/2981/8208/files/sample-document.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="600px" /> |
Another way of adding a PDF file to your HTML document is using the <iframe> tag. It allows to set also your preferred width and height. To have the code, copy the below code:
1 | <iframe src="https://cdn.shopify.com/s/files/1/2981/8208/files/sample-document.pdf" width="100%" height="500px"> |
Hi there,
I have a csv file i import with stock-sync app it has a URL to a PDF Product Spec Sheet. I want to be able to use Stock-sync to import that URL with PDF to a custom metafield i have allocated to a specific location on my product page liquid template. How would i add your code using the metafield so it imports and unpacks the pdf spec sheet in this location.
how to delete a pdf link from shopify site and also it should delete for the people i have sent