Documentation

Recommended Image Sizes

We've put together general recommendations for creating and uploading imagery to your theme. The numbers below indicate width by height in pixels (px). If only the width is specified the height can be any number.

Store Logo

250x150

Carousel Banners

The hero carousel image sizes change depending on the Maximum body width and Slider Width / Position settings selected in the theme editor. Double check your settings and use the notes below to determine the recommended image sizes for your carousel banners. 

How to check your site Maximum Body width settings

How to check your Slider Width / Position settings 

Maximum Body Width = 960px

  • Slider Right of Side Nav = 720px
  • Slider full body width = 960px
  • Slider full screen width  = 1500px

Maximum Body Width = 1170px

  • Slider Right of Side Nav = 880px
  • Slider full body width = 1170px
  • Slider full screen width  = 1500px

Maximum Body Width = 1280px

  • Slider Right of Side Nav = 960px
  • Slider full body width = 1280px
  • Slider full screen width  = 1500px

Maximum Body Width = 1366px

  • Slider Right of Side Nav = 1025px
  • Slider full body width = 1366px
  • Slider full screen width  =1500px

Maximum Body Width = 1440px

  • Slider Right of Side Nav = 1080px
  • Slider full body width = 1440px
  • Slider full screen width = 1500px 

Marketing Banners

  • Row of 3 banners under hero carousel = 600 x 435 per banner
  • Left Navigation = 270px width 

Brand Logos 

500x500px. 

Blog Images 

Create blog images equal to the Maximum Body Width setting. Create each blog image the same height to keep the blog pages aligned.

Product Images

BigCommerce recommends product images at least 1028x1028px.

 

Change Logo

 

1. In your Bigcommerce control panel, click Storefront.

logo1a.jpg

2. Click Logo.

logo2.jpg

3. Upload your logo or choose "Show text where my logo will be displayed."

 

Change Phone Number

 

1. In your BigCommerce control panel, click Store Setup.

phone-number1.jpg

 2. Click Store Profile.

store-profile.jpg

3. Edit the store phone number and click Save.

contact-information4.jpg

 

Change Contact Info

 

1. In your Bigcommerce control panel, click Store Setup.

phone-number1.jpg

 2. Click Store Profile.

store-profile.jpg

3. Edit the store contact information and click Save.

contact-information4.jpg

 

Adding Categories To Top Navigation

 

1. In your BigCommerce control panel, click Storefront.

logo1a.jpg

2. click Web Pages.

web-pages.jpg

3. Click Create a webpage.

4. Under Website Link, select "Link to another website or document."

create-a-webpage.jpg

5. Enter name of the category you wish to display under Page Name.

6. Enter the URL of the category page you wish to display under Link. In this example I am creating a page for the Air Conditioning category.

web-page-details.jpg

 7. Check Yes, show this web page on the navigation menu.

navigation-menu-options.jpg

8. Click Save & Exit.

 *HELPFUL TIP

To add your subcategories to the top navigation. Repeat the steps above to create a page for each subcategory you wish to display. Nest each page accordingly in the BigCommerce control panel.

view-web-pages.jpg

 

Change Store Width

 

1. In your BigCommerce control panel, click Storefront.

click-storefront-1.jpg

 

2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.

click-customize.jpg

 

3. In the theme editor, Open the Global tab to view the Maximum Body Width settings. 

change-storewidth.jpg

 

4. Click Publish to apply your changes.

 

Carousel Position

 

1. In your BigCommerce control panel, click Storefront.

click-storefront-1.jpg

 

2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.

click-customize.jpg

 

3. In the theme editor, Open the Hero Carousel tab to view the Slider Width / Position settings. 

slider-settings.jpg

 

4. Click Publish to apply your changes.

  

Brand Slider Visibility

 

1. In your BigCommerce control panel, click Storefront.

click-storefront-1.jpg

 

2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.

click-customize.jpg

 

3. In the theme editor, Open the Home Page tab to view the Brand Slider Visibility settings. 

show-brands-slider.jpg

 

4. Click Publish to apply your changes.

*HELPFUL TIP

The brand logos are pulled from the brands section of the control panel. See the following link for more information on managing your brands. https://support.bigcommerce.com/articles/Public/Managing-Brands

 

News Feed Visibility

 

1. In your BigCommerce control panel, click Storefront.

click-storefront-1.jpg

 

2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.

click-customize.jpg

 

3. In the theme editor, Open the Home Page tab to view the Latest News Slider Visibility settings. 

blog-feed-visibility.jpg

 

4. Click Publish to apply your changes.

*HELPFUL TIP

The Latest News images are pulled from the blog posts section of the control panel. See the following link for more information on managing your blog. https://support.bigcommerce.com/articles/Public/Using-the-Built-In-Blog