CSS can be used to remove certain design elements from your print page such as the header or footer in your Bigcommerce store. This can be done in two ways: the first is through a media query in a CSS file and the second by using a separate CSS file for printing. The first method is recommended and works for the latest browsers, while the second option is used for backwards compatibility.
1. Media Query (recommended)
To use the first method add the following code to your styles.css file (Control panel > Design > Edit HTML & CSS > styles.css) :
@media print { #Header, #Footer { display: none !important; } }
The code above will hide the entire header and footer elements in your Bigcommerce store.
2. Separate CSS File (older browsers)
The second method works for older browsers and requires a separate CSS file for the print page. Create a new file named print.css with the following code:
#Header, #Footer { display: none !important; }
<link href="/print.css" rel="stylesheet" media="print" type="text/css" />
Any CSS code placed in the print.css file, or placed inside of the print media query as in the first method will run when the page is printed and will not affect the design of the page when a visitor is browsing your store.
Need help implementing this modification in your own Bigcommerce store? Then contact our professional Bigcommerce developers right now.