To create a custom page we need to open up our admin panel and go to:
- Content → Custom Pages → Add New Custom Page, on the top left there.
There are two ways you can go about creating a welcome page. First question we need to answer is whether we want it to show as part of the shop or to be a separate page itself. This will decide on the way we design it.
If we want the welcome page to show up as a part of the main page the design will be simple, usually the WISWIG editor will be enough to make it look exactly as you want it. It will show up as the first thing in the center section of your site. All you need to do to set your custom content as the home page is ticking the “Set as Home Page” box right under the “Title” and setting the “Status” to “Enabled”.
If we want the page to be separate to the shop itself the only change in settings will be ticking the “Set as Splash Page” box. The design of the page will be much more complicated, we will need to design the whole page fortunately without the normally mandatory tags like “head”, “body” or “html”.
First we need to create a simple layout of the page. For example, we could create a two column layout with a header section with a code like this:
<table> <!-- Main table of our page --> <tr> <!-- First row --> <td></td> <!-- First cell of this row, our header --> </tr> <!-- First row ends here --> <tr> <!-- Second row --> <td></td> <!-- First cell of row two, our left column --> <td></td> <!-- Second cell of row two, our right column --> </tr> <!-- End of row two --></table> <!-- End of main table -->Filling in the content should not be a problem. As for styling our page, again there are two ways we can do this. If your page will be simple I would advise styling the element itself, for example:
<td style=”width: 100%; color: red; background-color: black;”>If your design will be more complex it would be best to assign unique classes or ids to your elements, then styling those using the custom css file, for example:
<table id=”home_main_table”> <tr> <td id=”home_header”></td> </tr> <tr> <td id=”home_left_column”> <a href=”...” class=”home_left_link”>...</a> <a href=”...” class=”home_left_link”>...</a> <a href=”...” class=”home_left_link”>...</a> </td> <td id=”home_right_column”></td> </tr></table>You can find the custom css file in:
Design → Themes → Click on your theme → Select “Styles” tab on the top left → click on “Edit Custom Css” button on the bottom left.
