Creating a Product-Based Slider

To create a slider based on Magento product content, visit the slider’s list, and click the “Create New Template Slider” button:

 

The main settings for a “Template Slider” are the same for a regular slider. Click here to review these settings.

After creating a new “Template Slider”, create a new regular slider.

 

Next, in the regular slider’s main settings page, choose “Products” for the “Source Type”:

 

Once you select “Products” for the slider’s “Source Type”, all the settings in the right column will disappear. This is normal, as a product-based slider’s settings will be defined in the “Template Slider” instead. So once we select “products” for the “Source Type”, the regular slider simply becomes a slider instance that can be added to a web page. Its actual settings and content will be taken from the “Template Slider” that the normal slider corresponds to.

The following screenshot covers the available settings for a regular slider that’s connected to a “Template Slider”.

 

  1. Slider Title: The name of your slider. Can be anything, and is only used for admins to keep track of their sliders.
  2. Slider Alias: Will represent the slider’s shortcode alias. Use lower-case letters, and avoid spaces and special characters other than dashes and underscores.
  3. Slider Shortcode: This value will populate automatically based on the Slider Alias you’ve chosen. Copy and paste this into one of your CMS pages/blocks editor for the easiest way to add a slider to one of your pages.
  4. Source Type:
    • Choosing “Products” will allow you to select a specific “Source Types” and “Product Categories” (see #5 and #6 below).
    • Choosing “Specific Products” will bring up a new section where you can declare the ID’s of specific products you’d like to include (regardless of source-type, category, etc.). This option is useful for using specific Magento products as your slider’s source.

       

  5. Source Types: Applicable when “Source Type” equals “Source”. For Product source type Category Source Type available.
  6. Product Categories: Applicable when “Source Type” equals “Products”. Select the categories of products to be used for your slider’s source. For multiple selections, use Ctrl-Select.
  7. Sort Products By: Choose how the selected products should be ordered inside the slider.

     

  8. Sort Direction: Descending = top to bottom (i.e. newest to oldest), Ascending = reverse order.
  9. Max Products Per Slider: Choose a maximum number of products to be included in the slider.
  10. Limit the Description To: When a post’s description is included in the slider, this number will represent the description’s word limit.
  11. Template Slider: The “Template Slider” that should be used for the current product-based slider.

 

Once you’ve created both a “Template Slider” and a regular slider that’s connected to the “Template Slider”, you’re ready to start creating some Template Slides.

 

A “Template Slide” has an identical admin as a regular slide. The main difference is that instead of adding actual text or image layers to the slide, you’ll add “meta data layers” that represent the product content being pulled into the slider. But before continuing, review the slide’s main settings HERE and HERE.

Instead of adding content manually, we’ll add “meta data layers” that will be used to represent product content that will be pulled into the slider. To create a meta data layer, choose “Add Layer”, and then select one of the product options:

 

For this example, I’ve gone ahead and added a Product Name (%name%) and Product Short Description (%short_description%) as the template slide’s two layers:

 

Lets add Product Based Image Layer, in editing mode it will be represented by Magento logo placeholder image:

 

Here’s an example of one of the products being pulled into the slider:

 

Now let’s head back to the slider’s main admin page, and click the preview button to see what the product slide looks like once it’s pulled into the slider:

 

Quick Tip: Set the %description% “White-Space” setting to “Normal” and add a “Max Width” value for traditional word wrapping.