Creating tear sheet or printable product page by adding custom code.

Technical Q&A

Topic summary

A user is attempting to add a printable tear sheet feature to product pages on the Showcase theme using custom code from a GitHub repository. They successfully completed the first two implementation steps but struggled with the third step—inserting code into ‘main-product.liquid’.

Progress made:

  • Another user suggested using a “Custom Liquid” block instead of directly editing theme files
  • This approach appears to be working, with a tear sheet button now displaying
  • The implementation uses JavaScript to store product information (title, price, image, description) in localStorage and opens a separate tear sheet page when clicked

Current status:

  • The user shared their working code and requested feedback for improvements
  • The code captures current variant details and passes them to a ‘/pages/tear-sheet’ page via URL parameter
  • A third party suggested using a dedicated app (Print Product Page) as an alternative solution that includes email functionality

The discussion remains open regarding potential code optimizations, though the basic functionality seems operational.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I am looking to add a tear sheet to my product pages using custom code. From this forum: https://github.com/gravyhtx/shopify_product-tear-sheet

I have completed the first two steps but am struggling to complete the last part.

Part 1

Screenshot (94).png
Screenshot (94).png2496×1664 603 KB

Part 2

Screenshot (95).png
Screenshot (95).png2496×1664 484 KB

Part 3

Screenshot (96).png
Screenshot (96).png2496×1664 547 KB

Screenshot (97).png
Screenshot (97).png2496×1664 585 KB

Please help me make my product page printable or create a tear sheet for my products on showcase theme.

2

So what’s the problem – you do not know where exactly you should put this code?

It would be difficult to tell without looking at the theme code and since Showtime is not a free theme …

However, you may try using a “Custom liquid” block if product section offers one.

Simply paste code from the file in Custom liquid setting and position the block as you like.

3

Thanks for your reply Tim,

Yes, I am unsure of where to place the code in ‘main-product.liquid’ shown in the third photo above.

I tried a few places in the code but do not have a lot of experience in this area. At one point I had the button show up but it was not clickable.

The Custom Liquid block seems to be working so far,

Screenshot (110).png
Screenshot (110).png200×117 7.82 KB

I appreciate this advice!

4

This is the code i am implementing, Is there any advice you can give me to make it work or improve it?

5

Hi there, did you get it working? You might want to try our app: https://apps.shopify.com/printproductpage
It prints tearsheets and also emails it to the customer as a file attachment.