Currently, the only way to see the styling of a gift which is being printed is to create a test gift, copy the redemption URL, and visit this URL.
When the print page opens, the print preview screen will appear. Cancel this dialog box and you will be presented with a blank page with the Print button.
Now, open your browser's developer tools, open the page's <body>, <div id="app", the #shadow-root, then look for the second <div. Clicking on this div will allow you to view its Styles properties. Find the property called display: none; and uncheck this box.
Now, you'll be able to see what is being printed for this gift.
To modify the CSS for this page, you'll want to find classes which begin with g-. Do not modify any classes that begin with unstable as these can change and your changes will be lost.
In your browser, you may be able to use the Select tool, which lets you click on elements of the page. If you hover over elements, you'll see their class names.
In the example below, the class name is g-gift-card-image.
To change the styling of these classes, open Givy > Storefront Assets > Custom CSS, and scroll down to the Print Page section.
For this example, we will start a CSS class style with a period . and the name of the class we want to modify. This example adds a yellow border to the image, and makes it 70% of its normal width.
Save this style, then refresh the print page, uncheck the display: none option again, and you will see your styling changes reflected.
