Want your hosted document library on your Shopify store? You have two routes, and either one takes only a few minutes: drop it onto a dedicated Shopify page, or place it inside a single product’s description.
The key thing to get right: your embed code must go into the HTML view (the </> button) rather than the standard visual editor. Saving from the visual editor will strip the embed out, whereas the HTML view leaves it untouched.
Before you start: copy your embed code
Head into your hosted dashboard, go to the Libraries screen, and hit Copy code beside the library you want to show. The snippet you copy will resemble the one below, though you should always paste the actual code from your own dashboard rather than this sample:
<iframe src="https://your-library.documentlibrary.app/?dlp_embed=1" title="Document library" style="width:100%;border:0;height:600px;" loading="lazy"></iframe> <script src="https://your-library.documentlibrary.app/?dlp_embed_resize=1" async></script>
Add your library to a page
If you want a self-contained document library, for instance a downloads or resources page, this is the route to choose.
- From your Shopify admin, head to Online Store → Pages and select Add page.
- Give the page a title, for example Document Library.
- Inside the Content toolbar, select the </> button (you will see Show HTML in its tooltip) so the editor switches to HTML view.
- Drop your embed code into the box.
- Switch Visibility to Visible and then choose Save.
- So shoppers can find it, add the page to your menu via Online Store → Navigation.
Choose View page to see the live result on your store. From there, shoppers can run searches, narrow results by category, and preview or download any document.
Add your library to a product description
A library can also sit right on an individual product page, which works well when the documents belong to that specific product, think spec sheets, manuals, sizing guides, and warranty certificates.
- Open Products and select the product you have in mind.
- Within the Description toolbar, click the </> button to move into HTML view.
- Paste the embed code at the point where you want the library to show. Placing it before your existing text puts the library above the description (as pictured below), while placing it after the text sends the library to the bottom.
- Choose Save.
The library now sits on the product page next to all the product details:
Coming soon: a one-click Shopify app
A dedicated Shopify app is on the way that will let you place a document library with a simple drag-and-drop block. Until that ships, the two methods covered above are the supported ways to do it.