VP-ASP :: Shopping Cart Software

Shopping Cart Software Solutions for anywhere in the World

US/Canada(Toll Free): +1 888 587 2278
Europe/UK: +44 (020) 7193 9408
Australia/New Zealand: +61 3 9016 4497

Search Helpnote Topics


How to use custom design containers

How to use custom design containers

VPASP 7.00 offers many flexibilities with Layout Manager.

One of them is that you can custom design containers.

For example, you maybe want to show another sub horizontal menus below the existing horizontal menu, which have the sub menu names and the links as like example below :

You can put the custom code you want to display in the Body Free Text in Layout Manager for example, and then display the snippet in the shoppage_header.htm template.

Below is the example how we utilize the Body Free Text in Layout Manager and then display the snippet in header template:

1. Login to your VPASP administration and go to : Website > Layout Manager.

2. Click Edit in the Empty box at the bottom of Body (center) column section.

3. In the Main Selection, please select the Body Free Text from the dropdown.

4. Please enter the value for the fields as below :

Enable : No.
Label Name : [please leave empty]
Seq No. : Any number e.g. 050
Display with Box : No.
Display Text : [please enter the code showing below :]

#submenubg li {
display: inline;
#submenubg li:before {
content: '-';
#submenubg li:first-child:before {
content: '';
#submenubg li a {
padding: 0 0.25em;

#submenubg li a:hover {
color: orange;

.features {
color: #BFB9B7;
padding: 0.75em 0;
border-bottom: 0.1em dashed #DFDCD7;
.features ul {
margin: -0.6667em 0 0;
padding: 0 0 0 0.5em;
.features li a {
display: inline-block;
padding: 0 0.25em 0 0.5em;
font-weight: normal;
#submenubg {


<div id="submenubg">
<div class="features nav">
<ul >
<li><a href="/organic/">Organic</a></li>
<li><a href="/tag/raw">Raw</a></li>
<li><a href="/natural/">Natural</a></li>
<li><a href="/tag/sugar-free">Sugar-free</a></li>
<li><a href="/tag/salt-free">Salt-free</a></li>
<li><a href="/gluten-free/">Gluten-free</a></li>
<li><a href="/tag/dark+chocolate">Dark Chocolate</a></li>
<li><a href="/colors/">Candy by Color</a></li>
<li><a href="/wholesale/">Wholesale</a></li>
<li><a href="/tag/new+products">New Products</a></li>
<li><a href="/top_sellers">Top Sellers</a></li>

Show in SSL? : Yes.

5. Click Save Changes.

6. Open your VP-ASP template header file ( shoppage_header.htm ). This file usually located in the folder " templates/default-2cols/ " (if you are using 2 columns template) or " templates/default-3cols/ " (if you are using 3 columns template) using text editor such as notepad or wordpad.

7. Locate the code below :

<div id="vp_horomenu"><%horomenu%></div>

8. Please replace to :

<div id="vp_horomenu"><%horomenu%><%LoadContainer "xxx"%></div>

NOTE : Please replace xxx with the containerId for the Body Free Text that you have just created.

In the example below, if the containerID is 35, so you should put it into the code e.g. :
<div id="vp_horomenu"><%horomenu%><%LoadContainer "35"%></div>

9. Save the file and then go to your front store to see the changes.

Times Viewed:
Added By:
Wilson Keneshiro
Date Created:
Last Updated:
Back Search other topics Submit a Ticket