A merchant emailed me just now asking about the way we designed our header. It looks different than the default design. I thought I'd share it with everyone on how we did it.
Here's an image of it:
Here's how we did it:
First, go read the guide on our website on using customized snippets: https://getchamp.net/guides/customizations/#using-customized-snippets
These are just specifically named snippets (that you create in your Shopify theme, NOT Champ, with specific names eg. champ-below-header). The application will pick up these files automatically and render it in the forum.
Because they're Liquid files, all of the usual Liquid syntax works.
By default, your forum after you've installed the app, will not have that picture that we have.
We created a Liquid snippet file called champ-below-header
in our Shopify theme editor:
Next, we used the following code in this snippet:
<div class="container">
<div class="row">
<div class="col">
<div class="below-header">
<div class="below-header-wrapper">
<h2>Welcome to Champ's live demo</h2>
<p>Did you know that this isn't just a demo?<br>This is our live pre-sales Q&A and support forum. Take a look around and say "Hello".</p>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.below-header {
background: url(https://cdn.shopify.com/s/files/1/2786/3878/t/1/assets/pic3-p2.png?4509396534301255899);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-size: cover;
background-position: 50% 73%;
color: white;
position: relative;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
h2 {
font-size: 30px;
font-weight: 100;
}
p {
font-size: 20px;
}
h2, p {
font-weight: 100;
color: white !important;
text-align: center;
}
.below-header-wrapper {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background-color: darken(#4256AC, 20%);
position: relative;
top: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
@media (min-width: 768px) {
.below-header {
height: 300px;
.below-header-wrapper {
position: absolute;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
}
</style>
Hope that helps
