Support

Frequently Asked Questions

  • Theme Setup
  • How do I put my phone number in the footer?
  • How can I switch to a static / fixed header?
  • How can I change the base color?
  • How can I stream in my own tweets?
  • What are the recommended Hero Slider settings?

Theme Setup

After installing Goodvibes there are a few steps you will want to take to ensure a high quality experience.

Configuration File

You can find the configuration file in the template files. Here are the steps

  1. Go to your Bigcommerce backoffice and click “Design” in the top right
  2. Click the “More” tab at the top and select “Template Files”
  3. Scroll down to find the “Panels” folder and click the “+” link
  4. Next you will see a file called “_GoodVibesConfig.html”. Click the settings wheel on the right and select “edit”

var gvConfig = {
    "showTweets": true,
    "tweetsType": "search",
    "tweetsQuery": "%%GLOBAL_StoreName%%",
    "address": "13706 Research Blvd Austin, TX 78750",
    "email": "goodvibes@cartdesigners.com",
    "fixedHeader": true,
    "saleFlags": true,
    "saleFlagColor": "#D22",
    "compareFlags": true,
    "compareFlagColor": "#2E93CC"
}‚Äč

This file is a javascript snippet that is used in various places on the website to enhance the user experience. This is a common JSON Object that includes several “key” and “value” pairs. DO NOT edit any of the “keys” which are the values on the left of the colon (:). However you will want to update a few of these to match your business.

  • showTweets: true or false to enable or disable the Twitter Widget
  • tweetsType: timeline or search to pull tweets from a user feed or from Twitter’s search feed
  • tweetsQuery: username or search string depending on the tweetsType
  • address: This is used to update the address field in the footer
  • email: This is used to update the email field in the footer
  • fixedHeader: true to set a “fixed” header or false to set a relative header
  • saleFlags: true to enable flags on sale items or false disable
  • saleFlagColor: Update the sale flags to your own color. Must be hex value color
  • compareFlags: true to enable compare flags or false disable
  • compareFlagColor: Update the compare flags to your own color. Must be hex value color

Social Icons

By default Bigcommerce has the default social icons enabled. You should enable the theme icons so that they match properly. Here are the steps:

  1. Go to your Bigcommerce backoffice and click “Design” in the top right
  2. Click the “Carousel & Social Media” tab at the top
  3. Scroll down to find the “Social Media” section
  4. Next click on “Use Theme Icons” then click “Save” at the bottom right

Call to Action Banner

Under the Hero Slider there is a spot for CTAs. This area gets filled with the “Banner” system (top) that is in place by default. You can edit this area by following these instructions:

  1. Login to Bigcommerce backoffice
  2. Click on the main “Marketing” tab
  3. Click on Banners
  4. Click the “Create a Banner” button
  5. The Banner name can be anything you like. The banner content is also up to you (although we have pasted an example below)
  6. Show on page should be set to “Home Page”
  7. Location should be set to “Top of Page”

The below code snippet is what is used on the demo store. However any unordered list with images will work just fine.

You may also download the Goodvibes Call To Action Photoshop Files.


<ul>
	<li><a href="/new-products/"><img title="New Products" src="/product_images/uploaded_images/cta-2.jpg" alt="New Products" width="360" height="180" /></a></li>
	<li><a href="/mens/"><img title="Shop Mens" src="/product_images/uploaded_images/cta-3.jpg" alt="Shop Mens" width="360" height="180" /></a></li>
	<li><a href="/spring-collection/"><img title="Spring Collection" src="/product_images/uploaded_images/cta-1.jpg" alt="Spring Collection" width="360" height="180" /></a></li>
</ul>

“About Us” or other landing page content section

As seen our the demo site the landing page has an ‘about us’ section near the bottom right of the page.

This can easily be updated by creating a new banner from the Bigcommerce backoffice and setting it to show on the ‘Home’ page and setting the location to ‘Bottom’.

The banner system includes a WYSIWYG editor and in the demo store we used simple <h2> and <p> tags to give that section the current look. The image is also left aligned.

What are the recommended Hero Slider settings?

The recommended size for slider images for this theme is 1920px – 1160px x 450px. Notice the recommended width can be a range of widths.

We also recommend that all slider images are the exact same size for continuity.

Hero Slider PSDs

You can download the Goodvibes Hero Slider Photoshop Files and use them as a guideline to generating properly sized hero images.

No Clipping Slider CSS Update

Creating a theme responsive slider at 2100px wide is no small challenge. With this theme we decided to go with a mixed downsizing / clipping alternative that would provide maximum visual for the slides that were created. However often times clipping is undesirable.

The below CSS snippet can be pasted at the top of the default.html page to remove the clipping feature.


<style>

#Container .slide-show {
	display: block!important;
	width: auto!important;
	left: 0!important;
	margin-left: 0px!important;
}

#Container .slide-show-render-full .slide-image:empty {
	top: 0 !important;
	left: 0 !important;

	-webkit-transform: translate(0%,0%)!important;
	-moz-transform: translate(0%,0%)!important;
	-o-transform: translate(0%,0%)!important;
	-ms-transform: translate(0%,0%)!important;
	transform: translate(0%,0%)!important;
}

.slide-show-render-full .slide-image-wrapper {
	height: auto !important;
}

@media only screen and (max-width: 1180px){
	#Container .slide-show-render-full .slide-overlay {
		left: 0 !important;
		margin-left: 0 !important;
	}
}

</style>

Removing the slide overlay text

A lot of times hero sliders may include their own text on the image itself. If this is the case 100% of the time then you may want to disable the text boxes that are displayed.

You can do this by appending the following CSS snippet to one of your custom linked css files


.slide-overlay{
	display:none!important
}