Video Tutorial - How to use Design Manager to change the look of your site in VPCart 9

Video Tutorial - How to use Design Manager to change the look of your site in VPCart 9

This tutorial will show you how to modify the look of your website using Design manager.

Step 1. For this, go to VPCart administration: Website > Layout Manager

Step 2. Then click the Design manager icon in the left panel

Step 3. The Design manager has 3 tabs- Theme, Custom and containers. You will be under Theme tab initially.

If you click on a theme color, you will see the change instantly on the Layout Manager page.

You can use HSV Panel, Sliders or swatches to pick a suitable color.

Step 4. Click Save button to confirm your color.

Step 5. Click OK

Step 6. Now go back to your shop and refresh the page to view the new theme color. The colours will be changed for Top header background, Top navigation menu background, Buttons, Footer social media icons etc.

From Design manager you can reset any selected color to VPCart default color.

Step 1. For this click 'Reset' button

Step 2. Click Ok to confirm

Go back to the shop and refresh the page. You can see the default colour is restored.

Go back to your VPCart admin and click on 'Custom' tab. With Custom theme, you can define your custom colors that suit your liking for certain sections. We can see some examples.

Step 1. First select Global section from dropdown. Here you can specify global font family, font size, font color, link color, hover color etc.

Under Global Font select the global font color

Enter Font Size: You can specify your own font size for the global font by just entering the number in the “Font Size” text box.

Select a Global font family. By default only 3 fonts will be shown and you can add more Google fonts into the Font Family dropdown list.

Here we have selected 'Hi Melody' which is the new Google font added manually. Click Save

Go back to your shop and refresh the page to view the new font and style

Step 2. Now go back to VPCart admin:Design manager and select “Page” from the “Section” dropdown under 'Custom' tab

The Page consider to be the section outside of website contents, after the website header and before the footer.

Here we can see how to set your own image as Background image for your shop

For this under Page Background Image upload an image

You can preview the change instantly in Layout manager page

Click Save and then OK

Go to your shop and refresh the page to view the new background image

Step 3. Go back to VPcart Design manager and select “Header” from the “Section” dropdown under Custom tab

Header section allows you to add your own styles for the background color, font color, font size, and font family for related site header sections.

For example we can select 'Top Navbar' from 'Sub Section' dropdown.

Select a color under 'Top Navbar Desktop' and see the change in Layout manager

Click Save. Click Ok

Go to your shop and refresh the page to view the change

Step 4. Go back to Design Manager and select “Content” from the “Section” dropdown under 'Custom' tab

Select 'Forms' from 'Sub section' dropdown to set your own style for Content Forms.

Content Forms allows you setup Input / Dropdown Fields background color, font color and font size.

We can select BG color and see the changes in your shop.

Click Save. Click ok

Go back to your shop and access a page with form to view the changes. For example see the change in 'Contact us' page after refresh.

Step 5. Go back to Design Manager and click on "Containers" tab. It is having only Header section.

For example we can select 'Logo | menu' option from the dropdown and click Save

Go to your shop and refresh the page.

We have selected 'Logo | menu' option and it will show Logo and Menu. Other containers won't be shown in header.

Thank you for watching and we hope you have found this tutorial useful.

User Manual Reference

For more information about how to use Design Manager to change the look of your site, you can also refer to our VPCart 9 User Guide at

https://helpnotes.vpcart.com/userguide900/#!Documents/designmanager.htm


Times Viewed:
434
Added By:
Brian
Date Created:
11/13/2018
Last Updated:
1/1/2020