The Most Feature Packed Themes on BigCommerce!

TERRA Theme Manual

Welcome! This theme guide is intended as an in-depth help center for content specific to the Terra theme. We highly recommend working with BigCommerce support for all questions about store setup. If you have a question about something in the theme itself, you’re in the right place! 

General Terra FAQ

Helpful tips and tricks to get started with Terra
How do I access the theme customizer?
In the BigCommerce dashboard, from the menu on the left, select “Storefront”, then “My Themes”. If the Terra theme is applied, click the blue button labelled “Customize”. If not, scroll down to your theme library to find the Terra theme, click the 3-dot menu button and select “Customize” from the drop-down menu. 

How do I access the BigCommerce dashboard?

Go to your store URL /manage. For example, mystore.com/manage. Log in using the credentials you set when you created the store.

How do I edit the theme files?

In the BigCommerce dashboard, from the menu on the left, select “Storefront”, then “My Themes”. If the Terra theme is applied, open the “Advanced” dropdown and select “Edit Theme Files”. If Terra is not applied, scroll down to the theme library and find Terra, open the 3-dot menu and select “Edit Theme Files” from the dropdown.

Be careful, these should only be touched if you’re confident you know what you’re doing, this section is easy to break code that will damage your site.

 

Who can I contact for support?
For general questions about BigCommerce, including products, orders, payments and shipping, and anything else about your site, please contact BigCommerce for support directly. If you believe you’ve found a bug or problem in the theme code, email [email protected]

Awesome Features

Check out the unique features we have in Terra!
Some fun and unique features

Customizable mega menu
Interactive header
Customizable banner images
Featured products for merchandising
Testimonials
Instagram
Display price as range
Include sub-category menu on category page
Help center for FAQ

REMEMBER – To get to most of our awesome features, you need to access the BC customizer, here’s how:

1.  In the BigCommerce dashboard, from the menu on the left, select “Storefront”, then “My Themes”.
2.  If the Terra theme is applied, click the blue button labelled “Customize”. If not, scroll down to your theme library to find the Terra theme, click the 3-dot menu button and select “Customize” from the drop-down menu. 

Banner Images

Banner images are the 7 main large images on the home page of your site.
How do I turn on / off the Mega Banner?

In the theme customizer , under the section titled “epicMega Banner”, check or uncheck the box to toggle the mega banner visibility. Learn more about the customizer here.

How do I change my banner images, links, or alt text?

In the theme customizer, under the section titled “epicMega Banner”, scroll down to the correct banner slot number (see image below) and change the image URL, link, or alt tag. Banner images are loaded in the BigCommerce image manager. Be sure to include the partial filepath /product_images/uploaded_images/image_name.jpg. If you don’t want to display a specific banner, leave the Image URL blank.

Please note that there is a 64-character limit for this field, due to BigCommerce restrictions. Your image name must be 28 characters or fewer, for the entire filepath to fit in this field or an error will be displayed. 

In what order are my banners displayed?

Banners are numbered left to right, top to bottom. See image to the right.

What size should my banner images be?

Banner 1 is 1184×383 px. Banners 2 and 3, on the right, are 800×245 px. Banners 4, 5, 6 and 7 are 500×500 px square, and banner 8 on the bottom is 1811×200 px.

Featured Products

Section of products displayed on the front page
How do I feature a product?

In the BigCommerce dashboard, select “Products” from the menu on the left, then find the product you’d like to feature. Alternately, use the search bar in the top left corner. Next to the product name, click the blue star to toggle featured status.

How do I change the number of featured products displayed?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Select how many featured products you’d like to feature from the dropdown menu.

How do I make the featured products into a slider?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. From the option “home featured products display style”, select slider from the dropdown menu.

Navigation Menu

Styling and extra content for the main dropdown menu
How do I change the colors or fonts for the main dropdown menu?

In the theme customizer, under the “epicNavigation” section, select the colors, fonts, and hover colors to use for the text.

How do I set up or change the images in the main menu dropdown?

In the theme customizer, under the “epicNavigation” section, select the top-level product category for which you’d like to edit the menu. Match the product category name exactly (including caps, spaces, etc), and input the image URL as well as the link where you’d like the image to lead. This is available for both the right side, as well as the bottom of the menu.

Popular Products

Section of popular products displayed on the home page
How are popular products selected?

These are automatically generated based on your sales data, they cannot be manually edited.

How do I change the number of popular products?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Select how many popular products you’d like to feature from the dropdown menu.

How can I hide the new products section?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Select “disable” from the popular products dropdown menu.

New Products

Section of newly added products displayed on the home page
How are new products selected?

These are automatically generated based on your most recently added products, they cannot be manually edited.

How do I change the number of new products?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Select how many new products you’d like to feature from the dropdown menu

How can I hide the new products section?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Select “disable” from the new products dropdown menu.

Testimonials

Customer feedback and reviews on the home page
Where are testimonials loaded?

Testimonials are loaded in the BigCommerce dashboard under the Marketing section as banners. The banner content should be the testimonial itself, the banner should be shown on the home page, always displayed, visible, at the bottom of the page.

How are testimonials added to marketing banners? Is there a specific format?

Create a new banner, titled “Testimonial #1”. Add your review text, an image if you want, and format it per the screenshot. Set the banner to display on the home page at the bottom. You can create as many testimonial banners as you’d like.

How can I change the background image?

In the theme customizer, under the “Home Page” section scroll down to the “Testimonial” subsection. Insert the URL for the image in the text box provided.

How can I hide the testimonials section?

In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Uncheck the box for “display testimonial section”.

Home Content Snippets

Interactive image and text boxes above the footer
How can I turn the content snippets on or off?

In the theme customizer, under the “epicContent snippets” uncheck the box for “display content snippets”.

How do I change the content of these snippets?

In the theme customizer, under the “epicContent snippets” scroll to the snippet you’d like to edit (numbered 1-4, left to right). In the appropriate box, edit title text, body text, text and background color, background image, the image flip direction if desired, your font icon, position, and size, and the attributes of your button if desired.

Where do I find different icons to display?

The icon library may be found here: https://fontawesome.com/icons/

How do I change the icons?

Find the Font Awesome icon you’d like to use from their library. Copy the class name into the theme customizer. See screenshot for details.

Home Blog Section

Your latest blog posts, displayed on the home page
How can I change the number of blog posts displayed on the home page?

In the theme customizer, under the “Home Page” section scroll down to the “blog” subsection. Select your number of desired posts from the dropdown menu.

How can I change the blog post link?

In the theme customizer, under the “Home Page” section scroll down to the “blog” subsection. Input the correct link for your blog page in the text box provided.

Instagram

Integrate your Instagram feed and display your latest posts
How does this work?

Just drop the name of your Instagram account into the customizer in the Instagram section. It will display as soon as you publish your changes.

Top Bar Design and content

Top narrow bar above the main header
How can I change the overall header background color?

IIn the theme customizer, under the “epicHeader” section, scroll down to the “Main header” subsection. You can pick any color from the menu provided.

How can I show payment icons in the header?

In the theme customizer, under the “Payment Icons” section, check the box that says “Show payment icons in header”.

How can I change the colors, font, and styling of the top bar?

In the theme customizer, under the “epicHeader” section, the first section labeled “Top Bar” controls this area.

How can I enable or disable the help center link?

In the theme files, templates > components > custom > top-bar-additional-content.html remove line 2 from the code, then save.

How do I enable different currencies?

From the BigCommerce dashboard, go to Store Setup > Currencies, then manage what currencies you’d like to display.

Logo

Change your logo settings for the header
How do I change my store logo image?

From the BigCommerce dashboard, go to Storefront > Logo and upload your logo.

How can I change the position and size of the logo?

In the theme customizer, under the “epicHeader” section, scroll down to the “Logo” subsection to adjust your logo display settings.

How do I change the favicon in the browser tab?

From the BigCommerce dashboard, go to Storefront > Logo and upload your favicon.

How can I set a custom mobile logo?

In the theme customizer, under the “Global” section, scroll down to the “Mobile Logo” subsection.

Search Bar

All about the search bar
Can I disable the search bar?

In the theme customizer, under the “epicHeader” section, scroll down to the “Search option” subsection and toggle the checkbox labelled “Search”.

How can I change the text that appears within the search bar?

In the theme customizer, under the “epicHeader” section, scroll down to the “Search option” subsection and input your custom search bar text in the field provided.

Can I change the dropdown menu in the search bar?

No, this is generated automatically based on your top-level product categories.

What colors can I change?

The border color can be changed in the theme customizer, under the “epicHeader” section, scroll down to the “Search option” subsection and change the color here. The text color is your default text, and the search button itself is your Call to Action color.

Banner Above Footer

Change the image and text displayed immediately above the footer
How can I turn the banner above the footer off?

In the theme customizer, under the “epicFooter” section, in the first “Banner above footer” subsection toggle the checkbox labelled “Display banner above footer”.

How can I switch between a parallax image, still image, or solid color?

In the theme customizer, under the “epicFooter” section, in the first “Banner above footer” subsection toggle the checkbox labelled “Parallax background”.

How can I change the text and text formatting in this banner?

In the theme customizer, under the “epicFooter” section, in the first “Banner above footer” subsection use the color pickers and style options provided.

Footer

Footer content that displays at the bottom of every page on your site
How can I change the background color for the footer?

In the theme customizer, under the “epicFooter” section, in the “Main footer” subsection use the color picker tool provided for the main background color.

How can I change the formatting for the text in the footer?

In the theme customizer, under the “epicFooter” section, in the “Main footer” subsection use the formatting tools provided.

How can I turn on or off the copyright notice or theme credits?

In the theme customizer, under the “epicFooter” section, in the “Copyright” subsection toggle the checkboxes for these features.

How can I include my social media links in the footer?

In the BigCommerce backend, go to Storefront > Social Media Links and input your appropriate information in the fields provided.

How can I customize the social media hashtag?

In the theme customizer, under the “epicFooter” section, in the “Main footer” subsection enter your custom hashtag in the field provided.

How can I add or remove payment icons?

In the theme customizer, under the “Payment Icons” section, toggle the checkboxes to enable the payment icons you’d like to display.

Where can I change the content in the “Store Information” section?

In the BigCommerce dashboard, go to Store Setup > Store Profile and enter the address, email, and phone number in the fields provided.

Product Page Options

Product page display options

Control the settings for your product pages
What customizations are available on the product page?

In the theme customizer, under the “epicProducts” section, several options are available to customize the function and display of the product page. You can customize the link where the “continue shopping” button leads after a product is added to the cart, and use a three-step product process to hide available options from cluttering the display.

What customizations are available on the category pages?

In the theme customizer, under the “epicProducts” section, you can elect to display the product price as a range to include more expensive options. You can also restrict the width of the product card display, show sub-categories as a side bar or a dropdown menu, display larger product cards, or toggle between grid or list view.

Extra features in Terra

Help Center

Provide a helpful database of FAQs
What is the Help Center?

The Help Center is an interactive, customizable FAQ tool to display a wide variety of information in a compact format.

How can I enable the help center?

In the BigCommerce dashboard, on the web page editor, under “Advanced Options” in the “Template Layout File” dropdown, select “epic Help Center”.

How can I change the content in the help center?

In the theme files, go to templates > components > custom > help-center.html and modify the text provided. If you’re not familiar with editing HTML you may want to work with a developer to ensure proper functionality.

Integrations

Integrate thid party services into your site
How can I integrate my Yotpo reviews?

In the theme customizer, under the “Third Party Integrations” section, check the box labelled “Use Yotpo Integration” and input your Yotpo integration key.

How can I enable or disable the Google Translate feature?

In the theme customizer, under the “Third Party Integrations” section, toggle the box called “Use Google translate”.

Latest Release Notes and Updates for Terra

Check this page for details of updates, fixes and new feature releases for the theme.

Terra 1.0.1 – 7/31/20

– Support for Widgets tool
– Bug and stability fixes

Terra 1.0 – 5/13/20

 – Initial release

Transform Clicks Into Clients

Sell more online.

Effectively reach and convert more customers with our expert tips and strategies.

Thank you! Be sure to check your email in a few minutes so you can download your eBook.