https://github.com/gravyhtx/shopify_product-tear-sheet
Code to add to your Shopify website to print specific information from the current product variant on your Product pages.
https://github.com/gravyhtx/shopify_product-tear-sheet
liquid-template-engine liquid-templating-engine print-code print-pdf shopify-api shopify-app shopify-apps shopify-collection shopify-components shopify-developers shopify-development shopify-products shopify-theme tear-sheet
Last synced: about 2 months ago
JSON representation
Code to add to your Shopify website to print specific information from the current product variant on your Product pages.
- Host: GitHub
- URL: https://github.com/gravyhtx/shopify_product-tear-sheet
- Owner: gravyhtx
- Created: 2021-01-18T02:07:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T16:32:31.000Z (8 months ago)
- Last Synced: 2025-03-27T19:13:26.558Z (2 months ago)
- Topics: liquid-template-engine, liquid-templating-engine, print-code, print-pdf, shopify-api, shopify-app, shopify-apps, shopify-collection, shopify-components, shopify-developers, shopify-development, shopify-products, shopify-theme, tear-sheet
- Language: Liquid
- Homepage: https://instagram.com/gravyhtx
- Size: 142 KB
- Stars: 10
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Shopify // Tear Sheet
Print a simple Tear Sheet on Product pages made in Shopify's Liquid templating language with localstorage.
** Some coding knowledge required. **
TABLE OF CONTENTS
- [Description](#description)
- [Product Elements](#product-elements)
- [Installation](#installation)
## Description
__DETAILS__
Tear sheets are used to provide your clients a print out or downloadable PDF of the just the essential information needed from a product to save for considering a future purchase decision. These are great additions to your site and most options aren't free.
This project uses some easy to use code using local storage to get and set product information to automatically open a new tab and print as a simple Tear Sheet and close after the document is printed, saved, or cancelled. When a user triggers an `onclick` event on an input tag button this code will open a new tab with data populated on a standard blank page without leaving your Shopify website's URL. A function uses native Shopify Liquid variables of the `current_variant` to grab all the details needed from the product page which uses the variant's unique ID plus a unique descriptor to set these variables as items in local storage.
Once data is set in local storage a new page is opened in a separate tab using a blank HTML layout from the `tear_sheet.liquid` Template. The basic HTML data is set using stripped down head tag from the theme layout to create a blank space to populate `{{ content_for_layout }}` with items set in local storage.
__TIPS__
* If you want to add "Dimensions" (or any other parameter) you can put that info in the __"Barcode"__ input on the product editor page. This code grabs `{{ current_variant.barcode }}` but you can pretty much enter whatever text you want and call it displayed as whatever information you want it to be called. It doesn't necessarily need to be the "Barcode"... same goes for __"SKU"__, but for the purposes of this demo the "SKU" is used as it was intended and the "Barcode" is used to display the dimensions.
* When you print the Tear Sheet in edit mode, you will likely have a bar at the bottom that will get printed. To close this you will need to hide that bar. Either by closing it manually or adding styles to the theme.css (or .scss) which will be:
``.shopify-payment-button__button--hidden {
display: none !important;
}``
#### Manual Process:
- Comment out the "PRINT WINDOW" code on `page.tear-sheet.liquid` from lines [230-236](https://github.com/gravyhtx/shopify_product-tear-sheet/blob/main/Templates/page.tear-sheet.liquid).
- Open the Tear Sheet and choose to close preview on the bottom bar.
- Close this tab and remove the comments previously set at [230-236](https://github.com/gravyhtx/shopify_product-tear-sheet/blob/main/Templates/page.tear-sheet.liquid) on `page.tear-sheet.liquid`
- Reopen Tear Sheet and it should now print without the bottom bar.
** If this doesn't work you may need to figure this one out yourself and let me know what you did so I can update this README. **
This same concept can be applied to any HTML code with Vanilla JavaScript. You'll grab the elements to insert into the tear sheet based on your own variables or grabbing elements from the DOM in place of the Liquid syntax.
## Product Elements
This is a list of all the elements grabbed from the product page used in this project:
- Title
- Image
- Description
- SKU
- Barcode (or "Dimensions")
- Price
Shopify Liquid Varibles
__Title:__ `{{ product.title }}`
__Image:__ `{{ product | img_url: '720x720' }}`
__Description:__ `{{ product.description }}`
__SKU:__ `{{ current_variant.sku }}`
__Barcode:__ `{{ current_variant.barcode }}`
__Price:__ `{{ current_variant.price | money }}`
The `current_variant` variable is pimarily where we are getting the data from the each page's unique elements. This may not be the name of the variable on your theme so look for an assignment to the `product.selected_or_first_available_variant` which in the Debut theme I was using assigns the variable at `{%- assign current_variant = product.selected_or_first_available_variant -%}`.
The code for product page on the themes I've worked with are either `product.liquid` in "Snippets", or `product-template.liquid` in "Sections". If necessary on your Theme, find the `product.selected_or_first_available_variant` and either use the varible your theme has set, create your own variable, or use `product.selected_or_first_available_variant` instead of the `current_variant` variable as used in `product.liquid` as found in this repository.
## Installation
The folders in this repository are named after the same folder locations found in the Shopify Liquid Code Editor. If you're unfamiliar with how to get to the editor, check the Shopify Documentation, specifically by clicking here. I included some comments in the `.liquid` files but let's go over how to install these files.
Setup
This code requires a page to be made in your store so we can create a path for our new tear sheet page to be printed without leaving your domain (instead of creating a new "about:blank" window). In order to do this we need to add and edit a couple files into your code editor folders.
First, create a new file in the Layout folder called `tear_sheet.liquid` and replace with the code found in the [Layouts](https://github.com/gravyhtx/shopify_product-tear-sheet/blob/main/Layout/tear_sheet.liquid) folder in this repository. This will serve to create a blank HTML page for our Tear Sheet so that there will be no influence from the `theme.liquid`.
Navigate to the Templates folder next and click "Add a new template". You will need to choose "page" from the dropdown and enter "tear-sheet" in the input to create a template for `page.tear-sheet.liquid` where you will enter the code found in the [Templates](https://github.com/gravyhtx/shopify_product-tear-sheet/blob/main/Templates/page.tear-sheet.liquid) folder.
You can now create your Tear Sheet page in your "SALES CHANNELS" by navigating from "Online Store" > "Pages" and add a new page called "Tear Sheet". Once created, this page will be located in the URL as `/pages/tear-sheet` so we can create a path for our new tear sheet page to be printed without leaving your domain (instead of creating a new "about:blank" window).
__THIS IS VERY IMPORTANT!__ Before saving this page, you will select the Template from the dropdown menu under "Template suffix" and choose `page.tear-sheet.liquid` which is the file you set up in Templates. If you don't see it then make sure you have this file in your Templates folder in the Code Editor.
Ok. Now you can save your "Tear Sheet" page.
You have now created a blank page ready to accept values from local storage based on the items you will set in your Product page's code. In order to set items you must add code to `product.liquid` found in the [Snippets](https://github.com/gravyhtx/shopify_product-tear-sheet/blob/main/Snippets/product.liquid) folder.
Go back to the Code Editor and you will find a file usually called something like `product-template.liquid` or `product.liquid` in your "Snippets" folder. You may have to look around but it's going to be wherever the main product content code is Here you will need to add two things to this file. You will need a clickable button and some script to save the [Product Elements](#product-elements) that will populate your Tear Sheet.
Add all of the script from [Product_Page/tear-sheet.liquid](https://github.com/gravyhtx/shopify_product-tear-sheet/tree/main/Product_Page) to your `product.liquid` (or `product-templates.liquid` or whatever the Product Template file is called) which may be in the "Section" or "Snippets" folder of your Code Editor. You want to put it wherever the button will go in the project. Be sure to edit the path to your logo (after the 'imgPrint' variable) before you're ready to test this out. You may need to separate the HTML from JS but as long as the code ends up on the same page you're gravy.
Now you should have a clickable button on every product page. When you click on that button the script will grab all the [Product Elements](#product-elements), set those values in local storage, open the "Tear Sheet" page in a new tab, and automatically open the Print dialogue which will close the tab once the user chooses to print, save, or cancel. Each time you go to a new product page or refresh the current product page `localstorage` will be cleared and ready to accept new values without unnecessarily using up the user's localstorage.
_Note: As mentioned above, different themes may have the Product page code in other folders. You may need to dig around to find where the main HTML inside the Product pages is located. Experiment with implementing the `` button found in this repository's `product.liquid` code. You can choose to use a different tag but this code should execute the same way if you make the necessary changes to your code to trigger the `tearSheet()` function._
#### _Made with love by Grävy Design Co. // @gravyhtx_