r

As the impact of COVID-19 continues to evolve, our Customer Success teams will be standing by ready and eager to support our customers with the same level of service and quality we have always strived for.

To better assist those with urgent issues impacting their businesses due to the Coronavirus, please consider contacting support. We thank you for your continued trust, understanding, and patience as we work through this situation together.

The Most Feature Packed Themes on BigCommerce!

LUNA Theme Manual

New to BigCommerce?

If you’re setting up a BigCommerce store for the first time, we highly recommend heading over to their site and taking a look at their support resources:
Community forums 
Documentation
 
University video series

Here are some basic store setup help pages:

General Luna FAQ

Helpful tips and tricks to get started with Luna
How do I access the theme customizer?
In the BigCommerce dashboard, from the menu on the left, select “Storefront”, then “My Themes”. 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 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?
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 support@epicshops.com

Awesome Features

Check out the unique features we have in Luna!
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. 

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.

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.

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 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.

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 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/

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 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.

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.

Header Tabs

Customize the three content tabs above the search bar
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.

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.

Address

Customize the address as it’s displayed in the header
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.

Shop Info Slider

Customize the slide-out informational page that appears from the “shop info” button
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.

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, 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)

Extra features in Luna

Contact Page

Allow your customers to reach out and say hello
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.

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 Luna

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

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