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.
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