Example layout of the page:
go to admin > design > site pages, and make a page a new page, name it, and check the box for "page contains liquid markup"
save the page immediately (do not edit the page content yet)
now from the page list, go back to edit the page you just created
paste in the code for the page content (see below)
edit the CSS as desired to change the colors and other styles
in the CSS, anywhere that says “body.kiosk.pages” change the word “kiosk” to whatever your page name is. If you used multiple words in the page name, add underscores between them, like: body.example_page_name.pages
NOTE: you do not need to change the word "kiosk" in the other CSS. Only change it for lines where it comes immediately after 'body.'
edit the HTML: replace [URL OF LOGO] with the URL of your logo. If you’ve uploaded your logo to your CrystalCommerce site, you can get the image URL by right-clicking on it, and selecting “copy image address” or a similar option in your browser. Replace [COMPANY NAME] with your company name. Change the text of the two buttons as desired, and change the “#” of each button to the URLs you want them to link to when someone clicks them.
Save the page
Go to the page on the site and test it.
PAGE CONTENT:
<style>
.custom-kiosk-button {
background: #d83a2d;
border: 2px solid #ff1e00;
border-radius: 10px;
box-shadow: 2px 2px 15px #00000063;
color: #FFFFFF;
display: inline-block;
float: left;
font-size: 2rem;
font-weight: bold;
line-height: 340px;
min-height: 340px;
padding: 0;
width: 44%;
margin: 2rem 3% 0 3%;
}
.custom-kiosk-button:hover {
background: #a31a0f;
color: #FFFFFF;
}
.custom-kiosk-button:visited {
color: #FFFFFF;
}
.kiosk-buttons,
.kiosk-logo {
text-align: center;
}
body.kiosk.pages .content-container {
min-height: 0;
}
body.kiosk.pages header.site,
body.kiosk.pages .promote-banner,
body.kiosk.pages .onecolumn-bottom-section,
body.kiosk.pages footer.site,
body.kiosk.pages .social-links-widget.fixed-right,
body.kiosk.pages h1.page-title {
display:none;
}
body.kiosk.pages {
background: linear-gradient(180deg, #383838, #747474);
}
</style>
<div class="kiosk-logo">
<img src="[URL OF LOGO]" alt="[COMPANY NAME]">
</div>
<div class="kiosk-buttons">
<a href="#" class="custom-kiosk-button">Button 1 Text</a>
<a href="#" class="custom-kiosk-button">Button 2 Text</a>
</div>