How To Styling HTML With CSS in V9 Layout Manager

How To Styling HTML With CSS in V9 Layout Manager

As you may already know, our existing Layout Manager can be used to configure your site layout to your own liking.

To give you some additional ideas and inspiration, we have created an impressive homepage design and would like to share with you on how we created such the design by just using the Layout Manager and with a few of additional files.

Please look at the below theme design:

In this helpnote, we will guide on how we setup the following section:

We want to show you how we setup the homepage with the 3 active buttons (FREE SHIPPING, FREE RETURNS, FREE 24) and also the 2 banners below it (40% OFF and Be Like a BOSS).

This is just example so you can of course replace any text and any images to your own liking.

Please follow the steps below:

1) Download the zip below:

2) Unzip it to your local computer.

3) Inside the unzipped files, locate the file sect.html and edit using notepad or text editor.

4) Copy all code inside the file sect.html

5) Login to your VPCart 9.0 administration and go to top menu:: Website > Layout Manager

6) Scroll down to Body Center near the bottom and click the + Add Box button.

7) In the new Empty box, click Edit icon.

8) It will expand the right panel, and in the " " dropdowns, choose "Body Free Text".

9) And the rest of the fields to be entered as below:

Enable: Yes
Share with Mobile: Yes
Label Name: leave empty
Seq No.: Enter the sequence eg 01
Display With Box: leave empty
Display Text: Click Source button as shown below:

Please paste your previous copied html code from step 4) into the big text box.

The big text box will now having the HTML code as shown below:

Click the Source button again.

And please click Save button now. You will see message "Container modified successfully!"

10) Now, go to the previous folder in your local computer "extract-page-section", locate the file style.css and open it using Notepad or Text Editor.

12) Copy all code inside the file style.css

13) Go to your V9 admin menu: Website > Template / CSS Manager.

14) Locate the right panel "Template CSS (default)" dropdowns, please select main-responsive.css and click Edit button.

15) In the big text box, scroll down and locate to the very bottom of the file and paste the copied code.

16) After pasting it, it should look like below. Please click Save button

17) Now, go back to the previous folder in your local computer "extract-page-section", locate the folder "img" and please upload to your site under "templates\default\css".

18) Go to your front store now and have a refresh.

Times Viewed:
Added By:
Wilson Keneshiro / Richard
Date Created:
Last Updated: