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

Lolo24
New Member
4 0 0

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

Part 2

Screenshot (95).png

Part 3

Screenshot (96).pngScreenshot (97).png

 

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

Replies 3 (3)

tim
Shopify Expert
3471 280 1286

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Lolo24
New Member
4 0 0

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

 I appreciate this advice!

Lolo24
New Member
4 0 0

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

 

<div class="tear-btn" id="tear-btn" style="align-self: auto;" onclick="tearSheet()">
<input class="tear-sheet" id="tear-sheet" type="button" name="print" value="TEAR SHEET" aria-label="Product Tear Sheet">
</div>


<!-- TEAR SHEET CODE -->

<script>
var variantId = `{{ current_variant.id }}`;
var titleStore = 'title' + variantId;
var imgStore = 'image' + variantId;
var descStore = 'description' + variantId;
var priceStore = 'price' + variantId;
var titlePrint = `{{ product.title }}`;
var pricePrint = `{{ current_variant.price | money }}`;
var imgGet = `{{ product.featured_image }}`;
var imgPrint = `{{ product | img_url: '720x720' }}`;
var descPrint = `{{ product.description }}`;


// CLEAR OLD PRODUCT INFO IN LOCAL STORAGE ON PAGE LOAD
localStorage.clear();

// SET CURRENT PRODUCT INFO INTO LOCAL STORAGE
function currentProduct() {

// TITLE
localStorage.setItem(titleStore, `{{ product.title }}`.toString());
// console.log('TITLE: ' + localStorage.getItem(titleStore));


// DESCRIPTION
localStorage.setItem(descStore, descPrint);
// console.log('DESC: ' + localStorage.getItem(descStore));

// IMAGE
localStorage.setItem(imgStore, imgPrint);
// console.log('IMAGE: ' + localStorage.getItem(imgStore));

// PRICE
localStorage.setItem(priceStore, pricePrint);
// console.log('PRICE: ' + localStorage.getItem(priceStore));

}

// CALL FUNCTION TO SET PRODUCTS INTO LOCAL STORAGE ON PAGE LOAD
// NOTE: This is optional...
currentProduct(); // ...can be commented out and left to be called at the 'tearSheet' function below

function tearSheet() {

currentProduct();

var variantId = `{{ current_variant.id }}`;

/////// OPEN TEAR SHEET PRINT PAGE ///////
window.open("/pages/tear-sheet?"+variantId);
};

</script>