Default Slider

To create your own slides for the default slider all you need to do is create a new post where the Featured Image field (located in the right sidebar of the post) is the slide image. Any text you enter into the WYSIWYG editor will appear over the slide. If you leave this empty you will just see an image.

Formatting the Slide Text

Wrapping your slide text in <h1> or <h2> tags will give it a heading style and wrapping it in <p> tags will give it a body style. For example the following HTML will produce the same result as the first slide on the Shopstar! demo site:

<h2>Minimalist Shopping Theme</h2>
<p>
Super stylish functionality!
</p>

Adding a Button

To add a button to a slide just add a normal HTML link to the URL you would like the button to direct to and give it a class of “button” like this:

<a href="http://www.outtheboxthemes.com/" class="button">Button Text</a>

Creating a Slider Post Category

Once you’ve added an image and possibly some text or a button assign it to a new post category such as “Slider”. This category will be used to filter out the slide-specific posts from the blog posts and should be dedicated to the slider. If you share this category with posts that you wish to display on your site they too will become “slide posts” and disappear from your blog.

Assigning the Post Category to the Slider

Once you’ve created a slider post category and assigned your slide posts to it navigate to Appearance > Customize > Slider. If you wish to include posts from multiple categories you can do this by holding down the Ctrl (Windows) / Command (Mac) button when you select the categories.

Transition Effect

The default transition effect of the slides is “Uncover Fade”. The Premium version has a variety of transition effects to choose from:

  • Uncover Fade
  • Uncover
  • Cover Fade
  • Cover
  • Fade
  • Crossfade
  • Scroll
  • Direct Scroll

Slideshow Mode

The Premium version of Shopstar! has a slideshow mode for the Default Slider which sets it to autoscroll. You are also able to set the speed with which the slideshow runs.