I’m trying to add a pdf to my website, like this one on the bottom of this page.
I don’t like the versions where you can see the pages to the right and the full pdf to the left. I wish it to be as simple as possible design wise. Does anyone know how I might accomplish that?
Hi!
You would more than likely need an app to do this for you like this one: https://apps.shopify.com/pdf-uploader
Hi,
Add below code where you want to embed the PDF
Replace src with yours.
Thanks
Hit Like and Accept as Solution
Thank you very much @Shop_Lovers
I tried the code and modified it a bit.
I can see, that it’s not behaving kindly when seen in different screen sizes.
If you see this page in to bottom of the page, you can see a pdf embedder showing the first page of the pdf. No matter how I pull the window, it keeps adapting and only showing that one page until you click the arrow for next pdf page.
It’s very clean and behave well in all window sizes.
I tried this one too: A google pdf
with some random google pdf.
It behaves nicer but it’s slow and still not really great. So I think I might be looking for something even more wow. Perhaps you know of a method? And otherwise I appreciate you help so far 
Thanks @WoodyDev .
Unfortunately it doesn’t behave too nicely. See me explanation on my reply to “Shop_Lovers” 2 min ago. Appreciate that you threw in an idea though. Thanks
No problem!
There may be other apps that do a better job out there, that was the first one that appeared when I searched 
The website you linked in your original post uses a plugin for WordPress so I imagine there will be someone with a similar application for Shopify
Hi,
Let try this.
<iframe src="https://visionline.dk/wp-content/uploads/2022/01/VisionLine-CL-800T.pdf#toolbar=1" width="100%" height="500px">
Share your experience.
Thanks
<iframe src="https://visionline.dk/wp-content/uploads/2022/01/VisionLine-CL-800T.pdf#toolbar=1" width="100%" height="500px">
Hi @Shop_Lovers
Shoot. Doesn’t look clean either.
Seems it’s not possible to have this clean look in Shopify 
What a shame
You can embed a PDF file within a page with free app Real3D Flipbook PDF Viewer.
It allows you to embed PDF directly in pages, or open PDF links in lightbox overlay as 3D flipbooks or swipe / scroll viewers.
Go to Shopify Admin → Content → Files
Click Upload files
After uploading, copy the file URL — it will look something like:
https://cdn.shopify.com/s/files/1/0000/0000/files/my-document.pdf?v=123456
Go to Online Store → Themes → Customize
In the Theme Editor, scroll down to your Footer
Click “Add block” → Custom Liquid
Paste this code:
<section class="pdf-download">
<h3>Download Our Brochure</h3>
<p>Learn more about our products and services.</p>
<a href="https://cdn.shopify.com/s/files/1/0000/0000/files/my-document.pdf?v=123456"
target="_blank" rel="noopener" class="btn-download">
📄 View PDF
</a>
</section>
<style>
.pdf-download {
text-align: center;
margin-top: 1.5rem;
padding: 1.5rem 1rem;
}
.pdf-download h3 {
font-size: 1.25rem;
margin-bottom: 0.25rem;
}
.pdf-download p {
margin-bottom: 0.75rem;
color: #666;
}
.btn-download {
background: #000;
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
text-decoration: none;
font-weight: 500;
display: inline-block;
transition: background 0.2s ease;
}
.btn-download:hover {
background: #333;
}
</style>
Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.
Hi Zlac.
This did not solve my very clean wishes for a pdf, but thank you for giving it a shot.
Hi @AnneLuo.
This was not the solution I was looking for, but thank you for giving it a shot.
Add custom HTML block to your page
<div style="width: 100%; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; margin-top: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
<iframe src="EN – Home - VisionLine" width=“100%” height=“700px” style=“border: none; display: block;”> `
Thank you @websensepro
Unfortunately this is not what i was going for.
I’m trying to add a pdf to my website, like this one on the bottom of this page.
I don’t like the versions where I can see space around the pdf. I wish it to be as simple as possible design wise. Meaning I only see one page at at time and change a full page up or down with arrows. Just like the buttom of the page in the link on this page.
Hello @CompleteNovice , please implement this below solution hope this will work :
Navigate to Online Store
Click here “edit code”
Create a section which name is “pdf-viewer.liquid”
Copy the below code and paste it in the pdf-viewer section
Then go to the customized add the Pdf viewer section in the home page
and upload link of the uploaded PDF which is available in the file option under the content section
{% style %}
.pdf-wrapper {
max-width: 1000px;
margin: auto;
background: #f5f5f5;
padding: 20px;
}
.pdf-viewer {
background: #fff;
padding: 10px;
}
canvas {
width: 100%;
height: auto;
display: block;
}
.pdf-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
padding: 8px 12px;
font-size: 14px;
}
.pdf-toolbar button {
padding: 4px 8px;
cursor: pointer;
}
.download-btn {
display: block;
margin: 20px auto 0;
background: #000;
color: #fff;
padding: 10px 20px;
text-align: center;
border-radius: 20px;
text-decoration: none;
width: fit-content;
}
{% endstyle %}
<div class="pdf-wrapper">
<div class="pdf-viewer">
<canvas id="pdf-canvas-{{ section.id }}"></canvas>
</div>
<div class="pdf-toolbar">
<div>
<button id="prev-{{ section.id }}">⬅</button>
<button id="next-{{ section.id }}">➡</button>
<span>
Page <span id="page-num-{{ section.id }}">1</span> /
<span id="page-count-{{ section.id }}">0</span>
</span>
</div>
<div>
<button id="zoom-out-{{ section.id }}">-</button>
<button id="zoom-in-{{ section.id }}">+</button>
<span id="zoom-level-{{ section.id }}">100%</span>
</div>
</div>
<a href="{{ section.settings.pdf_url }}" target="_blank" class="download-btn">
DOWNLOAD BROCHURE
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script>
(function(){
const url = "{{ section.settings.pdf_url }}";
if (!url) return;
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
let pdfDoc = null,
pageNum = 1,
scale = 1,
pageRendering = false,
pageNumPending = null,
canvas = document.getElementById("pdf-canvas-{{ section.id }}"),
ctx = canvas.getContext("2d");
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page){
const viewport = page.getViewport({ scale: scale });
canvas.width = viewport.width;
canvas.height = viewport.height;
const renderTask = page.render({
canvasContext: ctx,
viewport: viewport
});
renderTask.promise.then(function(){
pageRendering = false;
document.getElementById("page-num-{{ section.id }}").textContent = num;
document.getElementById("zoom-level-{{ section.id }}").textContent =
Math.round(scale * 100) + "%";
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
pdfjsLib.getDocument(url).promise.then(function(pdf){
pdfDoc = pdf;
document.getElementById("page-count-{{ section.id }}").textContent = pdf.numPages;
renderPage(pageNum);
});
document.getElementById("next-{{ section.id }}").onclick = function(){
if (pageNum >= pdfDoc.numPages) return;
pageNum++;
queueRenderPage(pageNum);
};
document.getElementById("prev-{{ section.id }}").onclick = function(){
if (pageNum <= 1) return;
pageNum--;
queueRenderPage(pageNum);
};
document.getElementById("zoom-in-{{ section.id }}").onclick = function(){
scale = Math.min(scale + 0.2, 3);
queueRenderPage(pageNum);
};
document.getElementById("zoom-out-{{ section.id }}").onclick = function(){
scale = Math.max(scale - 0.2, 0.5);
queueRenderPage(pageNum);
};
})();
</script>
{% schema %}
{
"name": "PDF Viewer (Brochure)",
"settings": [
{
"type": "url",
"id": "pdf_url",
"label": "PDF URL"
}
],
"presets": [
{
"name": "PDF Viewer"
}
]
}
{% endschema %}
@mastroke Love it. Thank you. It looks perfect 
It’s our pleasure to solve your problem @CompleteNovice 