Home > BigCommerce > Docs > What is the Best Carousel Size for BigCommerce?

What is the Best Carousel Size for BigCommerce?

Last updated: March 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

A Product Carousel is a brilliant way to show off the users with appealing and exclusive product or business photography. Still, it can also be used to advertise programs or specials. Best of all, it’s a feature that’s not too complex to use.

You can make a simple carousel even though you don’t have a BigCommerce web designer. In this article, we’re going to show you what a Carousel is and what it can do for your BigCommerce store.

A carousel is a series of revolving banners or a gallery that appears on the store’s homepage. You are allowed to display up to five slides of images and text, each of which can be connected to particular items or websites. Every few seconds, the picture will shift.

Your BigCommerce carousel will do many things, including:

  • Send traffic to sites that are designed to convert.

  • Streamline the user’s website navigation experience.

  • Stimulate conversions in the best-selling categories.

  • Highlight cross-selling options and opportunities

You will make use of your carousel in a variety of ways. Use it to help develop the brand, respond to often asked questions from customers, share what you do, and make announcements… the list goes on and on.

A carousel, or slideshow, is used with each of our themes to highlight items and calls to action prominently.

Note: Image Dimensions is a pixel measurement of an image’s width and height (px).

A preview of Carousel Design for your BigCommerce store

Since the same image can load on desktop computers and mobile devices, it’s also important to avoid uploading an image that’s too big, as this can cause loading time to be longer. As a result, we suggest that the photographs be no larger than 1920px wide, preferably 1200px wide and 800px tall, since the number of people viewing your shop on a screen larger than that decreases(also because the image is extended to fill the screen.)

Let’s get started with the BigCommerce carousel by going to the control panel. The image’s measurements appear in the Carousel Builder on our Legacy Blueprint themes. Click on an empty slide to see the necessary image dimensions. In the big image preview region, the appropriate dimensions will appear.

Check your Carousel Dimension with Blueprint theme

BigCommerce’s Stencil themes are developed to serve enterprises in various sectors by combining existing best practices in technology, design principles, conversion, and SEO. You can configure different elements of your style, such as colors, text sizes, the number of featured items, and more, without leaving the control panel, enabling you to tailor your storefront to more accurately match your brand.

Since the theme will stretch or squish an image to match it, images outside of the recommended measurements become blurred. For information on resizing photographs to match the carousel, see Fixing Distorted Images.

Picture in stencil themes are automatically resized according to the theme’s code. To change the preset scale, go to Store Design and make the necessary changes.

Note: Some themes do not have the ability to control the carousel size.

How to download Stencil Themes

Step 1: Tap the Advanced drop-down of the new theme or the Action Icon of a new theme under My Themes.

Check the Advanced drop down menu Source: Pixel Union support

Step 2: Choose the option that suits your requirements.

  • Download new theme — saves any Page Builder edits you’ve created that are actually visible on your store.

  • Saved Theme — saves the most recent edits you’ve made in Page Builder, but it isn’t yet live on your shop.

  • Download Original Theme — installs the default theme without any Page Builder edits * If you’re installing a theme that’s already live on your storefront, this feature will only appear in the drop-down selection.

Step 3: The .zip file should be saved to your server. To unzip the file, you’ll need Stencil CLI.

Although there is no one-size-fits-all scenario, you do want to make sure you have a goal for your carousel. Firstly, you’ll want to think about three things: making great pictures, writing enticing copy, and providing good calls to action.

The first step is to remove the sample carousel images from your computer. To delete a slide, press the small X on the thumbnail. You can either drag and drop your photographs onto a slide or use this connection to pick them from your screen. You will reorder the photos after they’ve been posted by moving the thumbnails around.

You can freely add and remove pictures for your carousel by clicking the X

You may also change the speed at which the slides transition right here. To operate on your carousel copy, use the Heading, Text, and Button Text fields.

Settings for the carousel's speed is also adjustable

Make sure the call to action button has a connection. You can either use the browse link to locate a page from your shop or manually type it in. To begin, you’ll want to think about three things: making great pictures, writing enticing copy, and providing good calls to action. A call to action, or “CTA,” might be anything like “buy now” for the most famous product, if you’re not already aware of it.

You can also put items like “shop now,” “read more,” and “order now” to the test. As long as the CTAs are clear and understandable, you’re on the right track.

Insert external links on your carousel to attract more conversions

We suggest adding text to these fields so that it is SEO-friendly and search engine crawlable. When you’re satisfied with the updates, click Save and return to your storefront to see your changes.

If you have unique design concerns, you may seek assistance from other merchants and workers in our Community. If you want to collaborate with a professional or don’t feel like adapting your design, check out the BigCommerce Partner Directory, or post design and customization work requests on the Community Jobs Board to communicate with third-party developers. Technical Support is unable to modify code or make interface modifications due to BigCommerce’s new Design Policy.

Step 4: Design Options: Social Media

Let’s take a look at some of the other techniques in Design Options. You will have access to your various social media pages on your storefront below the Carousel maker. Click and drag an icon from the Available Networks list at the bottom of the page to the Live on the Storefront list above it to allow it. Here’s where you’ll put the connection to your store’s social network pages. Only six icons may be enabled at one time.

Attach your social media contacts so customers can follow you and stay updated about your store

Next to the carousel and social media tabs is Logo, where you can choose to screen text or upload an illustration. If you want to use a logo graphic: Make sure it is appropriate for your style. If your theme isn’t included, use this suggested logo scale.

Recommended Logo size for custom Themes

You can manually adjust the image size to look better on your storefront using your favorite image editing tools. Or you can use an online editor such as Pixlr or other image editing software you have built on your computer.

Step 6: Design Options: Favicon

When you visit a website, a favicon is a tiny graphic that appears to the left of the page title at the top of the browser window. The BigCommerce icon will be your store’s favicon by default.

However, we suggest that you replace it with a brand-related pic. It gives the site a professional appearance and is a detail that customers may find. This favicon is used to refer to the store’s webpages as visitors bookmark them. Just make sure it is 16x16 or 32x32 pixels in size and stored in the ICO, JPG, GIF, or PNG file format.

A Favicon is what will appear on the browser's address bar

How to upload your own Favicon

Step 1: Scroll down to the Favicon section of the Storefront Logo.

Step 2: Pick the favicon image from your machine by clicking the Replace Image attachment. In the browser, a preview of the favicon should appear.

Select Replace Image to upload your Favicon

Step 3: Click Save to finish uploading your custom Favicon

Note: For assistance creating a favicon from a larger image, do a web search for favicon generator.

Conclusion

As you can see, setting up a BigCommerce shop is pretty simple. The dashboard and the online Page Builder are easy to navigate and use. There are over 100 themes to choose from, so no matter what you plan to sell, you’ll find one that suits your needs. The BigCommerce platform includes everything you’ll need to create and launch a beautiful website quickly.

Although the BigCommerce carousel functionality isn’t needed, it does provide a lot of built-in usability to eCommerce websites. It can dramatically increase the user experience of your eCommerce web design.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.