How to Upload Pdf File in Shopify Product Page

[Solved] How to embed a PDF file into my Shopify product page ?

(@alfonso)

Reputable Member Registered

Joined: 2 years agone

Posts: 39

Topic starter 06/06/2020 1:16 pm

Hi,

Since few days I have been for a solution to embed  PDF file directly into my product page, I love the sizechart button in Plak theme, but i would to give my customers a detailed itemize (3 pages).

I am not looking for a kind of button to download the pdf or redirect them to google drive or other hosting, i need my clients to click the push and the pdf file will exist shown into the product page with the possibility to brand 2 buttons (previous/adjacent).

I merely need the script considering i know a fiddling bit how to mode in CSS.

Thanks in accelerate

(@plaktheme)

Customer support Admin

Joined: 2 years ago

Posts: 603

Hi @alfonso

Katrine hither from Plak Theme Back up.

In club to make a PDF Viewer straight into your Plak Theme product page, please follow these steps :

• From your Shopify dashboard, click Online Store > Actions > Edit lawmaking
• Click on Snippets > Create a new snippet
• Name it for example (pdf)
• Paste this code in it and

<way>
#show-pdf-push {
width: 150px;
brandish: block;
margin: 20px auto;
}
#file-to-upload {
display: none;
}
#pdf-main-container {
width: 100%;
margin: 20px auto;
}
#pdf-loader {
display: none;
text-marshal: center;
color: #999999;
font-size: 13px;
line-pinnacle: 100px;
tiptop: 100px;
}
#pdf-contents {
display: none;
}
#pdf-meta {
overflow: hidden;
margin: 0 0 20px 0;
}
#pdf-buttons {
float: left;
}
#page-count-container {
bladder: right;
}
#pdf-current-page {
display: inline;
}
#pdf-full-pages {
brandish: inline;
}
#pdf-canvas {
border: 1px solid rgba(0,0,0,0.2);
box-sizing: border-box;
}
#folio-loader {
tiptop: 100px;
line-meridian: 100px;
text-align: center;
display: none;
color: #999999;
font-size: 13px;
}
</style>
<button id="evidence-pdf-push button">View PDF</push button>                        
<div id="pdf-master-container">
<div id="pdf-loader">Loading document ...</div>
<div id="pdf-contents">
<div id="pdf-meta">
<div id="pdf-buttons">
<button id="pdf-prev">Previous</push button>
<push button id="pdf-adjacent">Next</button>
</div>
<div id="page-count-container">
Page                        
<div id="pdf-current-page"></div>
of                        
<div id="pdf-full-pages"></div>
</div>
</div>
<canvas id="pdf-canvas" width="400"></canvas>
<div id="page-loader">Loading page ...</div>
</div>
</div>
<script>
var _PDF_DOC,
_CURRENT_PAGE,
_TOTAL_PAGES,
_PAGE_RENDERING_IN_PROGRESS = 0,
_CANVAS = document.querySelector('#pdf-canvass');                        
async function showPDF(pdf_url) {
document.querySelector("#pdf-loader").style.brandish = 'block';                        
effort {
_PDF_DOC = await pdfjsLib.getDocument({ url: pdf_url });
}
take hold of(error) {
alarm(mistake.message);
}                        
_TOTAL_PAGES = _PDF_DOC.numPages;
certificate.querySelector("#pdf-loader").style.display = 'none';
document.querySelector("#pdf-contents").way.display = 'block';
document.querySelector("#pdf-full-pages").innerHTML = _TOTAL_PAGES;
                        
showPage(1);
}                          
async function showPage(page_no) {
_PAGE_RENDERING_IN_PROGRESS = 1;
_CURRENT_PAGE = page_no;                          
certificate.querySelector("#pdf-side by side").disabled = truthful;
certificate.querySelector("#pdf-prev").disabled = true;                          
document.querySelector("#pdf-canvas").way.display = 'none';
document.querySelector("#page-loader").style.display = 'block';                          
document.querySelector("#pdf-current-folio").innerHTML = page_no;                          
endeavour {
var folio = expect _PDF_DOC.getPage(page_no);
}
catch(error) {
warning(error.bulletin);
}                          
var pdf_original_width = page.getViewport(1).width;                          
var scale_required = _CANVAS.width / pdf_original_width;                          
var viewport = page.getViewport(scale_required);                          
_CANVAS.acme = viewport.height;                          
certificate.querySelector("#folio-loader").style.pinnacle = _CANVAS.height + 'px';
document.querySelector("#page-loader").style.lineHeight = _CANVAS.height + 'px';                          
var render_context = {
canvasContext: _CANVAS.getContext('2d'),
viewport: viewport
};                          
try {
await page.return(render_context);
}
grab(error) {
alarm(error.bulletin);
}                          
_PAGE_RENDERING_IN_PROGRESS = 0;                          
document.querySelector("#pdf-next").disabled = fake;
document.querySelector("#pdf-prev").disabled = false;                          
document.querySelector("#pdf-canvas").style.display = 'block';
document.querySelector("#folio-loader").fashion.brandish = 'none';
}                          
certificate.querySelector("#evidence-pdf-button").addEventListener('click', part() {
this.mode.display = 'none';
showPDF('Y'all-PDF-FILE-LINK-HERE.PDF');
});                          
document.querySelector("#pdf-prev").addEventListener('click', part() {
if(_CURRENT_PAGE != 1)
showPage(--_CURRENT_PAGE);
});                          
certificate.querySelector("#pdf-next").addEventListener('click', function() {
if(_CURRENT_PAGE != _TOTAL_PAGES)
showPage(++_CURRENT_PAGE);
});                          
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/ii.two.228/pdf.min.js"></script>
                      

• Change the (You-PDF-FILE-LINK-Hither.PDF) with your PDF file link and click Salvage

Now open the files prod-template1.liquid and prod-template2.liquid and paste this code below where you lot would like the push (View PDF) to appear and click Salve

                      {% include 'pdf' %}

Since you know how to style this feature via CSS it is not bad, in instance you need help from united states, you can respond to this thread or apply our Customization service

Kind regards,

Katrine| Plak theme back up

 - Was my reply helpful? ClickLike to let me know!
 - Was your question answered? Marking it every bit aSolved Solution

Katrine | Technical support at Plak, Scrowp & Vantout
- Was my reply helpful? Click Similar to let me know!
- Was your question answered? Mark it as a Solved Solution

(@alfonso)

Reputable Member Registered

Joined: ii years ago

Posts: 39

Topic starter 06/06/2020 3:36 pm

That is exactly what I was looking for, thank you lot so much Katrine 🙂

---

Welcome to the Shopify Forum Customs provided past Plak ThemeLLC, a place where you lot tin discuss about eCommerce and Shopify, solve technical issues, get assist with Shopify Design, Apps integration, Marketing, Facebooks ad, Google ads and more.

Before posting, nosotros invite y'all to read and follow the forum rules | We also support whatever questions related to Gratis Shopify themes :Dawn, Express, Minimal, Brooklyn, Narrative, Supply, Debut, Venture, Dizzying and Elementary

robertsonsligized.blogspot.com

Source: https://plaktheme.com/community/product-page-questions-for-plak-theme-shopify/how-to-embed-a-pdf-file-into-my-shopify-product-page/

Share this post