The Most Feature Packed Themes on BigCommerce!
Welcome! This theme guide is intended as an in-depth help center for content specific to the Luna 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!
Helpful BigCommerce Links:
BigCommerce support resources:
Community forums
Documentation
University video series
Here are some basic store setup help pages:
How do I access the theme customizer?
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 Luna theme is applied, open the “Advanced” dropdown and select “Edit Theme Files”. If Luna is not applied, scroll down to the theme library and find Luna, 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?
Some fun and unique features
Google Translate
Customizable mega menu
Interactive header
Customizable banner images
Featured products for merchandising
Testimonials
Instagram
Extra product tab
Display price as range
Include sub-category menu on category page
Help center for FAQ
Custom contact page with map
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 Luna theme is applied, click the blue button labelled “Customize”. If not, scroll down to your theme library to find the Luna theme, click the 3-dot menu button and select “Customize” from the drop-down menu.
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.
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?
Banners 1, 2, 4, and 5 are 740×500 px. Banner 3, the central banner, is 740×1056 px, banners 6 and 7 are 1122×150 px.
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 display a category menu on the left side of the home page?
In the theme customizer, under the “Home Page” section scroll down to the “Products” subsection. Check the box for “Show Left Side Category Menu”. See image on right for example.
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.
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.
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.
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.
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 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”.
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 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.
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 Google Translate feature?
In the theme customizer, under the “Third Party Integrations” section, toggle the box called “Use Google translate”.
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.
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.
How do I enable or disable the header tabs?
In the theme customizer, under the “epicHeader” section, scroll down to the “Header Tabs” subsection and toggle the box labelled “Show header tabs”.
How do I change the icon, or title text or formatting?
In the theme customizer, under the “epicHeader” section, scroll down to the “Header Tabs” subsection and change the settings as you wish.
Where can I find new Font Awesome icons to use?
The icon library may be found here: https://fontawesome.com/icons?d=gallery
How can I update the text displayed in the expanded section?
In the theme files, templates > components > custom > header-tabs>tab-one.html, tab-two.html, and tab-three.html. Edit line 2 for your custom text.
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.
Where do I load the address that’s displayed in the header?
In the theme customizer, under the “epicHeader” section, scroll down to the “Main Header” subsection and use the field provided.
Where do I load the phone number that’s displayed in the header?
In the BigCommerce dashboard, go to Store Setup > Store Profile and enter the phone number in the field provided.
How can I change the text color for the address or phone number?
In the theme customizer, under the “epicHeader” section, scroll down to the “Main Header” subsection and use the color picker tool provided.
How can I change the background or text color for the slider?
In the theme customizer, under the “epicHeader” section, scroll down to the “Shop Info” subsection and use the color picker tools provided.
How can I change the “Contact Us” information in the slider?
In the BigCommerce dashboard, go to Store Setup > Store Profile and enter the address, email, and phone number in the fields provided.
How are the links in the “Information” column generated?
These are generated based on your sub-level web pages, in the BigCommerce dashboard under Storefront > Web Pages.
How can I change the “About Us” image?
In the theme customizer, under the “epicHeader” section, scroll down to the “Shop Info” subsection and input your image URL in the field provided.
Where do I load the “About Us” text?
In the theme files, templates > components > custom > about-us.html and edit line 2.
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.
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.
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, use a three-step product process to hide available options from cluttering the display, and even enable an extra product tab for showing extra information.
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.
How can I input content in the extra product tab?
To make a global change on all products:
Enable the “Extra Product Tab” in the customizer, then edit the text in the theme files at templates > components > extra-product-tab.html
To make a specific tab on a particular product:
Paste this code in the product description in the HTML editor:
<div class=”extra-tab”>
<div class=”title”>Hello</div>
<div class=”content”>My Content</div>
</div>
“title” is what the tab is called
“Content” is what the content says
(See image on right for example)
How do I enable the custom Epic contact form?
On the web page editor, under “Advanced Options” in the “Template Layout File” dropdown, select “epicContact”.
How can I update the contact form map?
In the theme files, go to templates > components > custom > contact.page.map.html and embed your own Google Maps link.
How can I use custom contact form fields?
You can embed a custom Typeform or Jotform submission with any fields you like- just drop a link in the theme customizer under “Third Party Integrations” in the “Contact Page” subsection.
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.
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”.
Luna 1.0.3 – 7/31/20
-Support for Widgets tool
Luna 1.0.2 -5/23/20
-Updated wishlist feature
Luna 1.0.1 – 3/11/20
– Included latest Font Awesome icon library
– New easier Instagram integration
– Bug fixes for mobile login modal
– Added multiple columns for menu
– Updated theme store thumbnail images
Luna 1.0 – 12/21/19
– Initial release with Cornerstone 4.3.0
