Storefront Themes “Elegance” the rules of the Carousel

Turn it on

The Carousel will not work unless you have a page called Home and that page is assigned to be Front page in Settings/reading. Then you must go to Storefront Options panel/Homepage Carousel tab and select something on the “Carousel Options” dropdown. You can select “Don’t Use the Carousel” after which of course no other settings on that tab matter.

Watch out, possible danger ahead!

Ok you have all sorts of options, first you should know a few things.

1. It will not work until it has a few actual images to pull, at least 6. You will see a mess until it has at least that many images.
2. It can break if something does not have an image.
3. For products a image must be set as to “use as product thumbnail” see step 12 of this post
4. For posts a image must be set using “Set featured image”. See this very quick video if you do not know how.
5. See the “base price is $0.00” problem later in this post.

I do want to use it, what can it show?

Ok so now avoiding any of the issues above you move on to setting options. Remember if it does not seem to be working troubleshoot for the problems listed above.

You have 3 selection drop downs on the Homepage Carousel tab. Carousel Options, Carousel Product Category and Carousel Post Category. If one or more of these is not mentioned in a item below it’s setting does not matter for that arrangement.

1. • “Carousel Options” = “Show Products”
   • “Carousel Product Category” = “Show All Products” set.
   • It will attempt to show all products. Consider problem 2 above. I have heard if you have lots of products it can break. It would be a bad idea anyway as the images are sized on the fly and it will slow your site down horribly.
2. • It will work with “Carousel Options” = “Show Categories”
   • IF you have category images set in your categories.
   • IF you have at least 6 TOP level categories.
   • It will only show top level categories, no child categories.
3. • It will show a product category, or sub category. “Carousel Options” = “Show Products”
   • “Carousel Product Category” =”you pick a category”
   • It will not work properly if ANY product in that category does not have a image set for “use as product thumbnail”.
4. • “Carousel Options” = “Show Posts”
   • “Carousel Post Category” = “Show All Posts”.
   • It will show all blog posts as long as those posts all have a image set as “use as featured image”. Again this may be slow your site once you have lots of posts.
5. • “Carousel Options” = “Show Posts”
   • “Carousel Post Category” =”you choose a post category”
   • It will show those posts as long as there are at least 6 AND they all again have a image set as “use as featured image”
6. It will work with “Carousel Options” = “Show Carousel Post Type” see later in this post for instructions for creating a Carousel Post types.

So to really control it you could make Carousel Post types, a special Product category or even Blog Category just for the carousel. As products and posts can be in more than one category you just assign them to this special carousel category as well.

So you want total control

Then you want to use Carousel Post Type. This way if someone creates a product or post that has no image appropriately set the Carousel will not break. When creating Carousel Posts just for the Carousel you know you must have an image and are unlikely to publish without one. These are the steps for making Carousel Post Types. Remember to make enough.

First

1. Go to Storefront theme options
2. Carousel tab
3. At the top set “Carousel Options” to “Show Carousel Post Type” (forget the next 2 drop downs)
4. Pick how many images will be visible at one time in the carousel “How many images?”
5. Check the size chart next to this, it gives you a width that your images will be resized to.
6. Set a height in “Carousel Image Height” that will work with the width from the chart. Consider the proportion or aspect ratio of your images. See these 2 posts on images.
7. Decide the various other settings, show image only, bounce speed etc
8. Click “Save All Changes”

Before the next steps have some images that match the proportions that you set in the theme options, they can be bigger as long as the proportions are right they will be scaled down without distortion. Don’t make them smaller though, they will scale up badly. For total control, I sense you want it,  make them exactly the right size before you upload.

Then

1. Go to Carousel on the dashboard menu
2. Add new
3. Give it a name.
4. On the right click “set featured image”
5. Upload a file via the media dialog box
6. Click “use as featured image”
7. Click “save all changes”
8. Close the media dialog box
9. Click publish

Done, repeat this a few times until you have half a dozen items.

Controlling the image size and number while avoiding distortion

As mentioned above the custom Carousel Post Type is the best for total control. You can pick a size that you like and make images specially for the Carousel.

If you want to use product images consider the size you have set for your images in products. For products you will have set sizes on the Settings/Store/Presentation tab for “Default Product Thumbnail Size:” and “Single Product Image Size:”. If you have read my 2 Image Settings posts you will understand the importance of these settings and they will have te same aspect ratio. Now you want to continue that aspect ratio here. If you have set your “Default Product Thumbnail Size:” to 160 x 120 and “Single Product Image Size:” 300 x 225 for example you are using an aspect ratio of 4 x 3. So if you have set “How many images?” on the Homepage Carousel tab to 4, the chart wil tell you that images will be resized to 200px wide. To maintain a 4 x 3 aspect ratio and avoid distortion you need to set “Carousel Image Height” to 150. Make sense?

For posts the same rules apply. Consider the size and aspect ratio you have set in Settings/Media “Thumbnail size”

Have a strange ratio and having trouble with the math? Use the Aspect Ratio Calculator

The rest of the settings on the Homepage Carousel tab are pretty self explanatory, they have brief descriptions on the tab and are also explained in your members area theme video.

As mentioned earlier the base price = $0.00 problem

If you have “Show Image Only?” unchecked on the Homepage carousel tab it is common to have the problem of prices showing $0.00. This happens when the product has variations. To avoid this when you create a product, follow these steps..

1. Make the product do NOT assign a variation.
2. Give the product a price
3. Publish or Draft the product.
4. Now add the variation and click “Update Variations”
5. Click Publish or Draft.

Now your product has the default product price. You can not access this number any more.
So what if you want to change it, or you already have products without it you say?

1. In the problem products screen
2. Uncheck the variation
3. Click “Update Variations”
4. Publish the product.
5. You can now edit the price.
6. PUBLISH again!
7. Now add the variation back on
8. Click “Update Variations”
9. Click publish or Draft.

But wait there is more!

What would a post be without a little code? A common problem occurs when people have Carousel text on and the text flows to 2 lines. For those products the price disappears as it is hidden by the containing div being set to overflow:hidden, which it must be.
Drop this in your custom css file or custom css box on te hStorefront Options/Style tab. Adjust the height to suit your carousel which will vary as Carousel image heights can vary.

.home-carousel ul li {
     height: 205px !important;
}

Now get to work!