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
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.
2. Click Logo.
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.
2. Click Store Profile.
3. Edit the store phone number and click Save.
Change Contact Info
1. In your Bigcommerce control panel, click Store Setup.
2. Click Store Profile.
3. Edit the store contact information and click Save.
Adding Categories To Top Navigation
1. In your BigCommerce control panel, click Storefront.
2. click Web Pages.
3. Click Create a webpage.
4. Under Website Link, select "Link to another website or document."
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.
7. Check Yes, show this web page on the navigation menu.
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.
Change Store Width
1. In your BigCommerce control panel, click Storefront.
2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.
3. In the theme editor, Open the Global tab to view the Maximum Body Width settings.
4. Click Publish to apply your changes.
Carousel Position
1. In your BigCommerce control panel, click Storefront.
2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.
3. In the theme editor, Open the Hero Carousel tab to view the Slider Width / Position settings.
4. Click Publish to apply your changes.
Brand Slider Visibility
1. In your BigCommerce control panel, click Storefront.
2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.
3. In the theme editor, Open the Home Page tab to view the Brand Slider Visibility settings.
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.
2. Under My Themes you see your current theme and version number. Click the Customize button. This will open up the theme editor.
3. In the theme editor, Open the Home Page tab to view the Latest News Slider Visibility settings.
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