If you want VPCart to display your
custom header and trailer page for the storefront, you can set the following
configurations below:
|
xUniqueFrontpageHeader |
Enter
your custom file name (HTML) to be displayed as the header for
the storefront (e.g. myownheader.htm). |
|
xUniqueFrontpageFooter |
Enter your custom file name (HTML) to be displayed as the footer for the storefront (e.g. myownfooter.htm). Make sure you upload the template file into the “templates/default” folder. |
Furthermore, if you do not wish to
display the default component that is usually in the default.asp page,
such as the Welcome screen, News / Blog / Product Highlights, Latest Products,
you can completely turn all of these off using the configuration
below:
|
xloadhomepagebodycontent |
Default
value is “Yes.” |
We will try to
give you an example regarding this matter.
Let’s say we set up the
configurations below:
xUniqueFrontpageHeader value set to:
“myownheader.htm”
xUniqueFrontpageFooter value set to:
“myownfooter.htm”
xloadhomepagebodycontent value set to: “No”
And then we create the custom front page
header and footer template files as shown below:
myownheader.htm contains the HTML code
below:
<!DOCTYPE html>
<html>
<head>
<title>Our Example Store</title>
<meta charset="utf-8">
<style>
body {
margin: 40px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
margin: 20px 0 20px 0;
font-size: 150%;
}
.wrapper {
width: 100%;
display: grid;
background-color: #fff;
color: #444;
text-align:center;
}
.section2 {
grid-row: 3 / 4;
}
.section3 {
grid-row: 5 / 6;
}
.ad1 {
grid-row: 2 / 3;
}
.ad2 {
grid-row: 4 / 5;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="section2">
<p><img src="https://www.vpcart.com/images/computer.png" border="1"></p>
</div>
<div class="section3">
<p><a href="shopdisplaycategories.asp">[ENTER]</a></p>
</div>
<div class="box ad1">WELCOME TO OUR STORE</div>
<div class="box ad2">FREE SHIPPING FOR ORDER $200 AND ABOVE!</div>
<span></span>
<span></span>
myownfooter.htm contains the HTML code below:
<span>Copyright 2018 - mystore.com</span>
</div>
</body>
</html>
Upload both the myownheader.htm and myownfooter.htm files into the
“templates\default”
folder.
Note: The HTML code above
is just an example of how you can design your own homepage header and
footer.
And here is a preview of the Home Page after you have set up your
own unique custom header and footer template:
If you
do not want to create your own custom header and footer, but still want a
landing page, you can use existing shopfrontpage_header.htm to use as
unique header and modify the shopfrontpage_header.htm file later to suit
your own design. And use existing shopfrontpage_trailer.htm to use as
unique footer and edit the file to suit own liking.
In this case, you
will need to set :
xUniqueFrontpageHeader : shopfrontpage_header.htm
xUniqueFrontpageFooter : shopfrontpage_trailer.htm
xloadhomepagebodycontent : “Yes”