Print APIAPIs
APIs
The Print API enables document printing functionality in your point of sale extension. Use this API to trigger the native print dialog for your documents.
The print() method accepts either:
- A relative path that will be appended to your app's application_url
- A full URL to your app's backend that will be used to return the document to print
Supported document types:
- HTML documents (recommended for best printing experience)
- Text files
- Image files (PNG, JPEG, etc.)
- PDF files (Note: On Android devices, PDFs will be downloaded and must be printed using an external application)
Anchor to printapiPrintApi
Interface for handling print operations
- Anchor to printprint(src: string) => Promise<void>required
Trigger a print dialog.
The src must be either:
- A relative path that will be appended to your app's application_url
- A full URL to your app's backend that will be used to return the document to print
Supported document types:
- HTML documents (recommended for best printing experience)
- Text files
- Image files (PNG, JPEG, etc.)
- PDF files (Note: On Android devices, PDFs will be downloaded and must be printed using an external application)
Was this section helpful?
Anchor to examplesExamples
Examples of using the Print API
Anchor to example-print-directly-from-the-tilePrint directly from the tile
Anchor to example-print-with-relative-pathPrint with relative path
Anchor to example-print-with-full-urlPrint with full URL
Was this section helpful?
Print directly from the tile
jsx
import {render} from 'preact';
export default async () => {
render(<Extension />, document.body);
};
const Extension = () => {
return (
<s-tile
heading="My app"
subheading="Hello world!"
onClick={() => {
shopify.print.print('documents/test-print');
}}
/>
);
};
Examples
Print directly from the tile
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); }; const Extension = () => { return ( <s-tile heading="My app" subheading="Hello world!" onClick={() => { shopify.print.print('documents/test-print'); }} /> ); };Print with relative path
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); }; const Extension = () => { return ( <s-tile heading="My App" subheading="Print with relative path" onClick={async () => { // If your application_url is "https://my-app.com" // This will resolve to "https://my-app.com/api/print/document" await shopify.print.print('/api/print/document'); }} /> ); };Print with full URL
jsx
import {render} from 'preact'; export default async () => { render(<Extension />, document.body); }; const Extension = () => { return ( <s-tile heading="My App" subheading="Print with full URL" onClick={async () => { // Using a full URL directly await shopify.print.print('https://my-print-service.com/api/print/document'); }} /> ); };
