Installing Theme
- First, download the Gogo theme zip file.
- Login to WordPress dashboard.
- Go to Appearance > Theme.
- Click on “Add new” button and then click on “Upload theme” button. Here upload theme zip file.
Activate the theme.
Note – For enabling FrontPage Section (Homepage Layout, Big Image with Typewriter, Services, About Us, Clients & Testimonial, Team, Video ribbon section, Blog post, Social icon option etc.) in our theme, download the Hunk Companion. This plugin will work with Free version, For More features go with Gogo Pro addon.
Installing Gogo Pro Addon
- Download the plugin Gogo Pro plugin from Member’s area.
- Go to Dashboard > plugin , click on “Add New” button and then “Upload Plugin”.
- Select the zip file of the plugin Gogo Pro and activate the plugin.
- After activating the plugin all unlimited customize options will be activated in customize panel.
- Note – This pro plugin will add more features in our theme and make it ore powerful.
How to Setup Homepage
- Go to Dashboard > Pages > Add new. Enter a page title,choose template (Home page layout) and publish.
- After that go to the Settings > Reading and set that newly created page as a Front page.
Site Identity
This setting will allow you to set site identities like Logo, site title, tagline, site icon. Go to Appearance > Customizer > Site Identity
- Logo – You can upload a logo image here. Click on “Select logo” option. Upload the logo image.
- Retina Logo – Retina logo size is same as the size of normal logo. For example: If the normal logo size is 100×100 pixels, then the retina logo image size would need to be 200×200. Retina logo is best suitable for high definition screens, so that your logo won’t look blurred.
- Logo Width – You can adjust the width of the logo by increasing or decreasing the scrollbar.
- Site Title & Tagline – In site title just write the text you want to show in the title with a tagline. You can enable or disable the title & tagline from “Display Site Title and Display Tagline” option.
- Site Icon – This will show icon in your browser tab. Just upload an image in site icon and show it in your browser tabs.
Section Ordering (Pro)
- For Section Ordering setting, go to Appearance > Customize > Frontpage Sections > Homepage Layout Settings > Section Ordering.
- You can Change the order of any particular section.
FrontPage Section
All the front page sections can be found in Appearance > Customize > FrontPage Sections.
Homepage Layout Settings
For Homepage Layout settings, go to Appearance > Customize > FrontPage Sections > Homepage Layout Settings .
- Padded Layout – By checking the box you can disable the padding from the outside.
- Numbered Section – By checking the box you can disable the “Numbers” from each section.
- Centered Layout – By checking the box it will align your section content in center.
- Vertical Navigation – By checking the box you can Remove the Vertical Navigation.
Big Image with Typewriter
- For Big Image with Typewriter setting, go to Appearance > Customize > FrontPage Sections > Big Image with Typewriter.
- This is the top most section of homepage. Here, you can add an image slider.
- Add Typewriter & Caption, you can add before and after text. You can also add fancy text and pick color for highlighting your fancy text. For button you can add the text and link in the text area.
- You can change the font size, line height and Letter spacing of typewriter text.
- Add Video (Pro) – You can also add a video in the background. You can mute the audio of video, by checking the Mute Audio box option.
- Choose layout (Pro) – You can choose three different layouts to show text and image in homepage.
Service Section
- For Service section, go to Appearance > Customize > FrontPage Sections > Service Section.
- Disable section – You can disable your section by checking the box.
- Big Heading & Small Heading – Add heading and subheading for section.
- Slider Setting – By checking the option you can display your slider in slide way.
About Us section
- For About us section, go to Appearance > Customize > FrontPage Sections > About us Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small Heading – Add heading and subheading for section.
- Section Description – Add your description here.
- Upload Right Side Image – Upload an image for your about us section.
WooCommerce Section
- For WooCommerce section, go to Appearance > Customize > FrontPage Sections > WooCommerce Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small Heading – Add heading and subheading for section.
- WooCommerce Shortcode – Put the shortcode here.
Call to Action Section
- For Call to Action section, go to Appearance > Customize > FrontPage Sections > Call to Action Section.
- Disable section – You can disable your section by checking the box.
- Heading – Add heading for your section.
- Button Text – Add text for call to action button.
- Button Link – Add link for call to action button.
- Background Image – Upload an image for background.
Portfolio Section (Pro)
- To add portfolio go to the Dashboard > Portfolio Gallery > Add New. Featured image that you upload in each portfolio will be displayed at the home page.
- For Portfolio Section, go to Appearance > Customize > FrontPage Sections > Portfolio Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small Heading – Add heading and subheading for section.
- Number of Portfolio Images Show – Set number of portfolio post to display at home page.
- Select Portfolio Type – Here you can select standard portfolio style.
- Show Portfolio Category – Check the desired category to display at home page.
Team Section
- For team Section, go to Appearance > Customize > FrontPage Sections > Team Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small heading – Add heading and subheading for section.
- Display in a Slide Way – By checking this option you can display your team box as a slider.
- Team Content – You can add the content of team boxes as you want. Content like Image, title, sub title, text, link and social icon can be added.
Pricing Section (Pro)
- For Pricing Section, go to Appearance > Customize > FrontPage Sections > Pricing Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small heading – Add heading and subheading for section.
- Terms & Condition – Add text of terms & condition.
- Display in a Slide Way – By checking this option you can display your team box as a slider.
- Highlight Popular Pricing Table No. – Put the table no ( Pricing Box ) you want to highlight in this section.
- Pricing Content – You can add the content of pricing boxes as you want. Content like title, sub title, price, text, link and button text can be added.
Clients & Testimonial Section
- For Clients & Testimonial Section, go to Appearance > Customize > FrontPage Sections > Clients & Testimonial Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small heading – Add heading and subheading for section.
- Testimonials Content – Here you can add the content of testimonials as you want. Content like Image, title, sub title and text.
- Clients Logo – In Clients Logo you can upload an image and link of your clients.
Video ribbon Section (Pro)
- For Video ribbon Section , go to Appearance > Customize > FrontPage Sections > Video ribbon Section .
- Disable section – You can disable this section by checking the box.
- Big Heading & Small heading – Add heading and subheading for section.
- Enter the video URL – Put the desired video URL (Iframe embed URL) in the text area.
- Background Image – Upload an image for the section background.
Blog Section
- For Blog Section , go to Appearance > Customize > FrontPage Sections > Blog Section .
- Disable section – You can disable this section by checking the box.
- Latest Post Category – You can select the category you want to show in your blog section.
Social Section (Pro)
- For Social Section, go to Appearance > Customize > FrontPage Sections > Social Section.
- Social Content – Add the social content like icon, color, text and link.
Counter Section (Pro)
- For Counter Section, go to Appearance > Customize > FrontPage Sections > Counter Section.
- Disable section – You can disable this section by checking the box.
- Counter Content – Add the counter content like title and numbers.
Skill Section (Pro)
- For Skill Section, go to Appearance > Customize > FrontPage Sections > Skill Section. This section will show
- Disable section – You can disable this section by checking the box.
- Big Heading & Small heading – Add heading and subheading for section.
- Skill Content – Add the counter content like title, color and numbers.
Single Project Section (Pro)
- First go to Dashboard > Portfolio > Add Portfolio Categories. Now add Portfolio and select the category. Now navigate to customizer.
- For Single Project Section, go to Appearance > Customize > FrontPage Sections > Single Project Section.
- Disable section – You can disable this section by checking the box.
- Small heading – Add subheading for section.
- Number of Projects Show- Set the number of single projects to show on your site
- Choose Project – From the drop down option panel choose Random, Recent or featured projects you want to show at your home page.
- Select Category – Check the desired category of single project to display at home page.
Faq Section (Pro)
- For Faq Section, go to Appearance > Customize > FrontPage Sections > Faq Section.
- Disable section – You can disable this section by checking the box.
- Big Heading & Small heading – Add heading and subheading for section.
- Rightside Image Upload – Upload an image here, this image will be display on the right side.
- Faq Content – In Faq content you can add Question title and text.
Custom Section (Pro)
- To Add Custom Section, go to Appearance > Customize > FrontPage Sections > Custom Section.
- Disable section – You can disable this section by checking the box.
- Add the Custom Section ID and Small Heading in text area.
- Now click on Go to Widget button and Navigate to Widget area. Choose desired widget from the widget Panel and show them in your Homepage.
Color & Background option in Section (Pro)
- This is a pro feature. You’ll can change the overall color & background in each section.
- For Color & background option, go to Appearance > Customize > FrontPage Sections > desired Section.
- Pick color from the color bar for each section item and you can also upload a background image. Decrease the color opacity to show color overlay background image.
Advanced Layout Setting
For Advanced Layout Setting, Go to Appearance > Customizer > Advanced Layout Setting.
Container
In container overall site content will appears. Container will exclude the header & Footer area. You can manage your container by doing the below settings in it. These settings will be applicable for Page, Blog / Archives, Blog Single and Woocommerce Pages.
- Full width- . In wide site layout the main body goes with the edge to edge of the browser whereas the content is managed by the container width.
- Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
- Max Width – In max width site layout, the main body is set to a certain width which includes the content, header & footer whereas the container max width can be managed.
- Container Width – You can manage the container width of content & sidebar by scrolling the slider. The Minimum container width is 768 px and Maximum container width is 1920 px.
- Top/Bottom Margin – You can control the Top/Bottom Margin of your site using this option.
Main Header
In main header your logo and main navigation will be displayed along with Menu.
To show navigation menu in your “header” first set the menus from the dashboard. Go with this link.
- With Main header setting, you can modify your overall header by adding different layouts with other content. Five different type of layouts shown in below image.
- Last Menu Item – You can show search icon, social media profile, text, button or widgets as the last menu item.
- Bottom Border size – This will add a separation between Main header and Below Header. You can adjust the width by increasing or decreasing the scroll bar or enter the value in text box.
- Bottom Border Color – Pick desired color for your “main header” border. It will only appear when you add a border in your header.
- Enable Full Width Header – This will show your Header in Full Width area.
- Mobile Menu Open – Choose the Mobile menu alignment left. right or center.
- Mobile Header Alignment – Display your header as a stack or inline aligned for mobile devices.
- Color scheme – Select the desired color scheme for your above header by clicking on the image. You can show your text in white and background in black or vice versa.
Blog
For Blog setting, Go to Appearance > Customizer > Advanced Layout Setting > Blog. In Blog page you can show collection of post grouped by category, author, date and tag etc.
Blog Archive
- Grid Layout – Select the number of columns (up to 4) to display your blog posts. From one column to four columns. You can make your first post large.
- Add Space Between Post – Check this option and add space between two blog posts.
- Remove Featured Image Space – Remove the padding between the featured images of two blog posts. Use this along “Add Space Between Post” option.
- Enable Date Box – You can add the date box on the featured image. Here you will get three different styles Circle, Diamond, and Square.
- Enable Drop Cap – You can enable drop cap in your paragraph.
- Blog Post Content – In blog post content you can show your full content, No content and Excerpt length. Excerpt length allows you to set content length you want to show in your blog page.
- Post Pagination – It will provide you better navigation for your blog page. You can choose an option between “Numbered”, “Load More” and “Infinite Scroll”.
- Blog Structure – You can enable or disable “Featured Image” and “Post Title & Meta”.
- Blog Meta – You can disable or enable the following elements, These options will work for each post in a page-
- Comment – Hide or show your comment from post by just enabling or disabling eye.
- Category – Using this option you can show or hide category from blog post.
- Publish date – Show or hide the publish date of your post.
- Author – In blog post you can show or hide your author name.
- Post Meta Separator – You can add separation to the meta tags. In a text field, you can put the desired separator you want to display between.
- Blog Content Width – Blog content width allows you to define the width of the container in your blog page.
- Choose “Default” value then it will automatically take width which is pre-defined. However, you can also add your custom width by just choosing the “Custom” option. As soon as you choose this option it will open a new field to enter your value. Either you can drag the bar to change the width or can enter your value.
- Note – Go to dashboard > Reading Settings. You’ll see this option their “Blog pages show at most”. Enter the number of posts you want to show on your blog page.
Single Post
For single post setting, Go to Appearance > Customizer > Layout > Single Post. A single post will show complete blog post. It will cover all content of posts such as featured image, description, post meta, and all important links.
- Single Post Content Width – Change the width of your post page by increasing/decreasing the scroll bar or just enter the value in the text box.
- Single Post Structure – Disable or enable the “Featured image” and “Post title & meta” from your post page. Drag & drop the elements and change their position according to your need.
- Single Post Meta – Enable or disable the “Comment”, “Category”, “Author” and “Publish date” of a post using this option. Drag & drop the elements and change their position according to your need.
- Meta Separator- You can add a separator between the meta tags, just write the “separator character” in the text box and show separation in them.
- Enable Drop Cap – The first large capital letter of any paragraph is known as “Drop Cap”. Enable or disable the drop cap at the beginning of the text.
- Remove Featured Image Padding – It will remove the spacing or padding from the featured image. It is only applicable for single page post.
- Display Author Info – Check the box, Show the “Author bio” in a single post.
- Display Related Post – You can show “Related post” under your post. It will automatically display related post which have same category or tag under the main post.
Color & Background
For Color & Background, Go to Appearance > Customize > Color & Background. You can pick color for every element and upload background image.
- Theme Color – You can change the default color all over the site. it will cover color of elements like Date box color, Button etc.
- Link Color – You can pick color for all the links present on your site.
- Link Hover Color – You can pick the link hover color. Whenever you hover your mouse over the link it will show that color.
- Text Color – You can pick color for the text of your site.
- Title Color – You can pick color for all the title of your site.
Typography
Typography makes your content visually stunning. You can add typography on your site with multiple Google & standard fonts. Using different fonts on your site makes it a creative website.
Font Subsets –
Go to Appearance > Customizer > Typography > Font Subsets.
Google font families support every subset. With this option you’ll get subsets like Latin, Latin-ext, Cyrillic, Cyrillic-ext, Greek, Greek-ext, Vietnamese and Arabic. Without these special characters won’t be displayed at your site. Just check the desired subset and enable it on your site.
Base Typography
Typography is the best way to show your content in a unique and attractive way. You can add multiple Google & standard fonts using typography in your site. Using different fonts on your site make it a creative website.
For Typography, Go to Appearance > Customizer > Typography > Base Typography.
- Body – Choose Font family for body text. Adjust the font size, line height and letter spacing. This will be applicable for overall sites body.
You can also adjust “Text Transform” set your body text as Capitalize, Uppercase, Lowercase, default or none.
- Title – Choose font of your title. This will set typography for overall site titles. You can also customize “Text Transform” set your title as Capitalize, Uppercase, Lowercase, default or none.
- Content – This will set the overall typography of single page from heading H1 to H6.
- Heading (H1) – Applicable for for all h1 headings like page title, product title. Choose font family and adjust the font size, line height & letter spacing.
- Heading (H2) – Applicable for h2 headings. Choose font family and adjust the font size, line height & letter spacing.
- Heading (H3) – Applicable for h3 headings. Choose font family and adjust the font size, line height & letter spacing.
- Heading 4 (H4) – Applicable for h4 headings. Choose font family and adjust the font size, line height & letter spacing.
- Heading 5 (H5) – Applicable for h5 headings. Choose font family and adjust the font size, line height & letter spacing.
- Heading 6 (H6) – Applicable for h6 headings. Choose font family and adjust the font size, line height & letter spacing.
Pre Loader
For Pre loader, Go to Appearance > Customizer > Pre Loader.
- For enabling the loader, check on the box “Enable loader”. Preloader will be shown when you load or refresh your site.
- You can upload a GIF or an image as a preloader or you can pick background color instead of image.
Social Icon Setting
For adding social profile links, Go to Appearance > Customize > Social icon.
- You can show these social icon in the header as well as at the footer. To show social icons just put the likns in the text area.
- By default it will follow the color scheme but You can also set the “original color” for each social icon.
Search icon & Search box
For Search icon, Go to Appearance > Customize > Search > Search icon.
- Icon Font size – You can adjust the size of icon using this option. Enter the value in the text box or slide the bar.
- Icon Radius – You can adjust the radius of an icon. Enter the value in the text box or slide the bar.
- Icon Color – Pick any desired color for icon from the color bar.
- Icon Border Color – Using this option you can pick any desired color for icon border.
- Icon Hover Color – Pick any desired color for icon hover. ( When you hover the mouse on the icon it will show your selected color.
- Icon Background Color – Pick any desired color for icon background.
For Search box. Go to Appearance > Customize > Search > Search box.
- Width – You can adjust the width of search box. Enter the value in the text box or slide the bar.
- Height – You can adjust the height of search box. Enter the value in the text box or slide the bar.
- Border Radius – You can adjust the border radius of box. This will change the outer border edge of the box. You can increase or decrease the border-radius or enter the desired value in the text box.
- Placeholder Font Size – This option will help you in adjusting the font size of the placeholder text. slide the scroll bar or enter the desired value.
- Icon Size- Change the size of the icon in a box by increasing or decreasing the scroll bar or enter the value.
- Placeholder Text- Write your Placeholder Text in the text box.
- Search Box Background Color- Pick desired color for your Search Box Background.
- Placeholder Text Color- Pick desired color for your Placeholder Text.
- Border Color- Pick desired color for your search box Border.
- Icon Color- Pick desired color for search box icon.
WooCommerce
For WooCommerce setting. Go to Appearance > Customize > WooCommerce
First Setup your WooCommerce. Go to your WP dashboard, Install WooCommerce plugin from WordPress.org and activate it.
For WooCommerce General setting. Go to Appearance > Customize > WooCommerce > General
On Sale Badge –
You can show a “circle”, “diamond” and “square” on the upper left side of your product. It will automatically display alongside with the product which is on sale.
Cart –
Cart shows the number of the product you have added in your cart for the final purchase. From this option, You can display Cart Icon in the Menu.
Visibility – You can disable or enable cart icon from your site. You can choose the desired option from the drop-down box.
Show as – You can display your Cart as Icon, Icon & Total (Price total of items you have added in your cart), Icon & Cart count (Total number of items added in cart) or Icon & Cart Count & Total.
Drop-down Color scheme – Choose desired color scheme for your Drop-down Cart.
Note – To create “Cart Page ” Go to Dashboard > Pages > Add New page > Put this Short-code “[woocommerce_cart]” in the editor. Publish it. This will create a cart page on your site.
Shop Page –
For Shop Page. Go to Appearance > Customize > WooCommerce > Shop Page
Set the shop page first, Create shop page, Navigate to WooCommerce tab > Setting > Products. Now click on “select a page” choose your shop page and save it.
- Products per row – You can enter the number of products which will be displayed in each row. For example, if you set the number of products as “3”, in each row “3” products will be displayed.
- Rows per page – You can enter the number of rows you want to show in each page. For example, if you set the number of rows as “4”, on each page “4” row of products will be displayed.
- Product Image Hover Style – You can choose the desired hover style and show your product in a unique way. You can display your product in “Zoom” or as “Swap” hover style.
Zoom – It is a kind of basic magnify effect on your product, it will zoom out your product while hovering the mouse over it.
Swap – In swap condition your product gallery images will be displayed while hovering or clicking the mouse over the Product. It will exchange the product image and show other images of product which have some different look. For “Product Gallery option” Go to a single product page on the rightmost side you can set your product gallery images.
- Product Structure – Here you can Disable or Enable the elements like “Category”, “Title”, “Ratings”, “Price”, “Add to cart” and “Short description”. You can also change their position by drag & drop the desired element.
- Product Content Alignment – You can Align your product content “Left”, “Right” or “Center”. Click on the tab and set the desired position.
- Product Box shadow – You can highlight your product with a Shadow in the background. Set product box background shadow by just scrolling the bar or enter the value in the text box.
- Product Box shadow on Hover – Set product box on hover shadow by just scrolling the bar or enter the value in the text box. Whenever you hover your mouse on the product it will show a shadow in the background.
Single Product –
You can set up your single product. For single product, Go to Appearance > Customize > WooCommerce > Single product setting.
- Content Width – You can adjust the content area of your single product page. Increase or decrease the width by scrolling the bar or just enter the value in text box.
- Product Content Alignment – You can align your content “left”, “right” or “center”. Click on the tab and set desired position.
- Product Structure – You can Disable or Enable the elements like “title”, “ratings”, “price”, “add to cart”, “meta” and “short description”.Change their position by drag & drop.
- Product Description Tab – You can show a short description of the product. Write product short description in the product editor.
- Product Tab Layout – You can show your product short description in horizontal or vertical view in tablet & mobile devices.
- Up Sell Product – These are the items that your customer might prefer instead of the product currently viewed. Items which is offered as an up-sell might be more popular, have better profit margin or a higher quality. Check the box “Display upsell product”. If you check this box you can now set the Number of Column and Number of up-selling Product you want to show.
- Related Product – Related product are the items which are similar to the product your customer is viewing. Check the box “Display related product”. If you check this box you can now set the Number of Column and Number of related Product you want to show.
