How can I customize the carousel on my homepage?

  • 1
  • 2
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

The carousel is the set of rotating banners that shows up on the homepage of your store. It's a huge contributor to the look and feel of your store, and is a great way to showcase your products and promotions. You can change out the text and images whenever you want, making the carousel one of the most addictive aspects of store design.

Carousels can come in a variety of sizes, which are determined by the theme that you are using. They have five slides consisting of images and text, and you can link them to particular products or pages. They will rotate every few seconds. Although you cannot change the number of slides that appear, you can use CSS to change the dimensions.

The carousel is controlled under the Design section of your store in the Carousel & Social Media tab. The carousel is enabled by default on all of our newest themes. If you're on an older theme that doesn't have the carousel, you can enable and resize it.

Finding your carousel's dimensions
The dimensions (width and height) of your store's carousel are determined by the theme you are using. Check your carousel's dimensions before you add the slide images. Otherwise, the images will be skewed when the theme resizes them.

1. In DesignCarousel & Social Media, click on one of the small blank slide thumbnails under the carousel preview.

Blank slide thumbnail under the preview

2. The preview will show you the required dimensions for the theme that you are currently using.

The dimensions portion of a blank slide

Use these dimensions for any images that you create for the carousel.

Deleting slides
Deleting a slide will delete both the image and the text. Once deleted, it cannot be recovered, so make sure you have the image backed up on your computer.

1. Locate the small thumbnail of the slide you want to delete.

One of the thumbnail slides is highlighted

2. Click the X in the top-right corner of the thumbnail.

The X in the corner of the slide

3. Save your changes before you leave the page.

Adding images to slides
You can have up to five slides on your carousel. Unused slides won't appear on your storefront.

1. Click on an empty slide thumbnail. The preview will change to a message telling you to add the image.

A blank slide preview

2. On your computer, open the folder that contains your image or images.

A folder on a computer containing an image

3. Drag and drop the image from your computer to the Carousel preview box.

The preview area now contains the image from the previous step

4. Save your changes before you leave the page.

Editing slides
Once you have added the image to your slide, you can edit your carousel's look and feel. Please note that the way the carousel looks in the preview will not match the way the carousel appears on the storefront, so it is best to click View Store and refresh when you save changes.

A fully edited carousel, with arrows pointing from parts of the carousel to the area where they are edited

Editing the Text
Carousel text consists of the following:


  • Heading - the large, attention-grabbing text

  • Text - the regular-sized words used to provide a little more detail

  • Button - boxed text that can link to a particular page


To edit any of these, click on the thumbnail of the slide you want to edit. From here, you can:

1. Type your message into the field next to the type of text you want.

Close up of heading text area

2. Click the color button beside it to choose a different text color.

Close up of the color button

3. If you want a button, enter the button text.

A sample image with Heading, Text, and a button.

At this time it is not possible to choose the specific location of the text on your carousel slide.

Making a link
If you have added button text, customers will have to click on the button to get to the link. If there is no button, the entire slide will be linked.

1. If you want to link somewhere outside of your store, you can enter the URL in the field that says Enter destination link.

The 'Enter destination link' field

2. If you want to link to a page in your store, click Browse.

The 'Browse' button

3. Select which type of page you are linking to: product, category, brand, webpage, or news [i.e. blog entries].

4. Select your page from the list. For products, you will have to select the product's category, then the product.

 

The browse box with the products tab, a category selected, and the list of products beneath

Setting how often the slides change
To change how often the slides change, simply change the number (in seconds) in Swap every (number) seconds.

The Swap every (number) seconds area in the Carousel.

Save your changes before you leave the page.

Reordering slides
Click and drag a slide to move it into your preferred order. All of the information (the text and links) will be moved along with it.

A slide being dragged to a new position

Save your changes before you leave the page.

Photo of Mike F.

Mike F., Alum

  • 184,438 Points 100k badge 2x thumb

Posted 5 years ago

  • 1
  • 2
Photo of Jennifer9933

Jennifer9933

  • 192 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How Do I Move the Button and Headlines on my Carousel?.


I have a custom built site, so that might be why I can't move anything, but it is necessary. Can you help me? Thank you! http://goodfortunesoap.mybigcommerce....
Photo of Jennifer9933

Jennifer9933

  • 192 Points 100 badge 2x thumb
Did you look at my link? The button is static, and I can't move it around so that it works with my image. This tutorial doesn't help me. Can you help me move the button's location within the carousel?
Photo of Mike F.

Mike F., Alum

  • 184,438 Points 100k badge 2x thumb
Jennifer9933
,

I'm sorry this post seems to have been overlooked somehow.  Did you already find a resolution to this or are still needing help?

Mike

This conversation is no longer open for comments or replies.