Customer Success Portal
            Knowledge Base Truvi Commerce Website Content Website Template

            Customizing a Website Template

            With a truvi template, you can adjust the colors of text, menu items, links, add your own logo, social networks and more. 

            1. Login to the truvi admin panel
            2. Once logged in, go to the front end of your website by clicking the icon at the top right of the screen

            1. The Design Setting will display on the left side of your browser window. This is a tool that will allow you to customize your template.
            2. Click on the menu icon to open up the design customization options






            Adding Your Logo
            1. From the Design Setting panel click on the Logo section
            2. In the expanded section, select whether you want to upload an image or if you want to use text for your logo
              1. If uploading an image, click on the Upload button to browse for your logo and upload. Make sure your logo is sized appropriately before uploading
              2. If using text, click on Text and customize the color, type, size and weight of your text
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Styling Your Headers
            Headers are HTML tags that structure the content of your site. We suggest that you do not update the font size as it is important to maintain an appropriate varied size per header and we have already built that into the template.
            1. From the Design Setting panel click on the Headers section
            2. In the expanded section, select the appropriate color, type, size and weight of your text for H1 - H6
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Styling Your Site Text
            Site text refers to the text that is used within the pages of your site. 
            1. From the Design Setting panel click on the Text section
            2. In the expanded section, select the appropriate color, type, size and weight of your text 
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Styling Your Links 
            1. From the Design Setting panel click on the Link section
            2. In the expanded section, select the appropriate color, color for hovering, type, size and weight of your links
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Styling Your Buttons
            Buttons are used throughout your site on products, shopping carts, joining clubs, newsletters and more. 
            1. From the Design Setting panel click on the Button section
            2. In the expanded section, select the appropriate color, color for hovering, type, size and weight of your buttons
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Styling Your Menu Items
            Update the format and style of your main menu/navigation.  
            1. From the Design Setting panel click on the Menu section 
            2. In theexpanded section, select the appropriate color, color for hovering, background color, type, size and weight of your main menu
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Updating Backgrounds
            Update the backgrounds of the header, main content area and footer of your site. 
            1. From the Design Setting panel click on the General Style section 
            2. In the expanded section, enter the appropriate colors that you want to apply to your body background, header background and footer background
            3. Click the green Save button at the bottom of the Design Setting panel to save your changes
            Adding Social Networks
            Easily add links to your Social Networks to your website.  
            1. From the Design Setting panel click on the Social Networks section 
            2. In the expanded section, enter the url for the social networks that you want to link to (Facebook, Twitter, Google+)
            3. Click Add More to show additional available networks to add (Instagram, Flickr, LinkedIn, Pinterest, Vimeo, YouTube, Yelp)
            4. Click the green Save button at the bottom of the Design Setting panel to save your changes

            Updated: 26 Feb 2019 08:24 AM
            Helpful?  
            Help us to make this article better
            0 0