Please Wait...
infoDecision Modal Title
add_circle_outlineDo It
add_circle_outlineDont Do It
searchPreviewphotoSome Module Titledesktop_windowslaptoptablet_macphone_android
close
extensionAddonsclose
refreshCheck for Updates
Slider Revolution Addons
Please select an Addon to start with.
saveSave Configuration
Your Plan Informationclose
You have reached your slider limit. In the current plan you can have only 10 Sliders
Upgrade Plan
Your Plan Informationclose
In this plan you cannot export slider
Upgrade Plan
Your Plan Informationclose
In this plan you cannot import slider
Upgrade Plan
Video Guideclose
Video Guideclose
STEP 1 - Create a new Sliderclose

Lets create the slider in a new tab and we will use this tab to follow the instructions. Click Here to open in a new tab. There are three ways to create a new slider in Slider Revolution.

1. New Slider from Template:

At first, we need to select a ‘New Module from Template’

Step Image

Choose a single template and click the add icon which template you choose and then click the ‘Install Template’

Step Image

2. New Blank Slider:

How to Create a Blank Module: In the main Slider Revolution interface click the button labeled New Blank Module

Step Image

After clicking the New Blank Module button you'll be taken into the Slider Revolution module editor. Once there, the Module Creation Guide will automatically launch to help you with basic configuration of your new module.

Step Image

If you don't need any assistance with initial settings you can click the Quit Guide button. Otherwise click the Start Guide button to proceed.

Here's a quick summary of what each of these module types are:

  • 1. A slider has multiple slides with only one visible at a time
  • 2. A scene has just a single slide
  • 3. A carousel also has multiple slides but more than one can be seen at a time
Step Image

To learn more you can visit our Documentation

3. New Product Slider:

Display Shopify Products in style with Slider Revolution!

Slider Revolution is also capable of displaying your Shopify Products in an attractive slider. All you need to do is setup one slide with the product information you want to show and select product categories.

Getting Started

At first, we need to click ‘New Module from Template’ Option

Faq Image

Search Or Select Shopify Product

Search by entering Shopify product in the search field or select Shopify Product from Module Templates category. Now you can see the product template in Shopify

Faq Image

Choose a Shopify Product template and click the add icon which template you choose and then click the ‘Install Template’

Configuring the Source

Selecting Products as Slider Source Configuring Products Slider Source

Faq Image
Faq Image

Creating “Add to Cart” and “Product Link” buttons

The “Add to Cart” and “Product link” buttons are created using Button Layers and it’s hyperlinked using Layer Actions. Click on the Meta button shown below to open the list of Meta Data

Faq Image
STEP - 2
STEP 2 - Editing a Sliderclose

When you are editing a slider we have plenty of options. but here we are showing how to create a basic slider.

1. Changing Background:

Image Backgrounds: Select/upload an image from the Uploader Library, the App’s Object Library or load an Image from an External URL. Next, choose an image from the “Media” or “Object” Library, or type in the URL you wish to use as an External Image.

Step Image
Step Image
Step Image
Step Image
Step Image

2. Adding Text, Images, Video, and Buttons layer in Slide:

Adding New Text Layers: To add a new, default text layer go to the Add Layer button in the top toolbar, then click the Text button.

Step Image

Edit Layer Content: To edit or set a Layer’s content, select the Layer on the editing stage and then view its “Content” section . Also to resize the layer you can click the layer then select the style option

Step Image

Add a New Image Layer: To add a new image layer go to the Add Layer button in the top toolbar, then click the Image button:

Step Image

Adding a New Video Layer: To add a new video layer go to the Add Layer button in the top toolbar, then click the Video button:

Step Image

Enter the YouTube ID or Vimeo ID for YouTube and Vimeo videos.

Step Image

3. Adding a new slide:

Choose “Blank Slide” to add a new Slide without any predefined content

Step Image

Choose “Bulk Slide” to add more than one Slide at a time with predefined background images.

Step Image

Choose “Slide from Template” to add a Slide from the Template Library

Step Image

4. Adding slider Navigation Arrows and Bullets:

Navigation Arrows: Change between slides with the help from navigation arrows.

Step Image

Navigation Bullets: Change between slides with the help from navigation bullets.

Step Image

5. Adding Layer Animations:

Create rich visual experiences with the Layer's animation tools. First select your image or text layer. Then from the right select animation.

Step Image

All Layers have an “In” and “Out” animation. The “In” animation is the very first animation that takes place before the Layer first becomes visible, and the “Out” is the very last animation that happens when the Layer officially animates out of view.

Step Image
Step Image
Step Image

To learn more about slider editing you can visit our Documentation

STEP - 3
STEP - 1
STEP 3 - Publishing a Sliderclose

Our Slider can be published in different places and using different mechanism.

1. Publish Slider in Shopify Online Store 2.0

If you are using Shopify online store 2.0 you need to follow the process

After completion of your slider, Click on “Publish to store”

Step Image

Select the “Theme version 2.0” tab and click on “Publish” button.

Step Image

Go to theme customizer

Step Image

From the left sidebar, add go to “Add section”

Step Image

here, you will see the silder you have created

Step Image

Now click on the slider to add it on the page and click on “Save” on the top right corner.

Step Image

If you want to publish the slider on other page, you need to use drop down menu and select the page. Then follow the steps from 4 to 6.

2. Publish Slider in Home Page:

After installing the module or Create New Blank Module then we can see the right corner ‘Show slide in Store ‘. Then we click this section.

Step Image

Click on the right corner, we see the option and where to show this slider we can select it simultaneously.

Step Image

After selecting the Homepage Section and then click on the ‘Next’ button

Step Image

In the end, Slider is being published successfully

Step Image

3. Publish slider in Pages:

Click on the right corner, we see the option and where to show this slider we have select pages option

Step Image

After selecting the Pages Option click on the ‘Next’ button,

Step Image

Select the page on which page you want to publish your slider.

Step Image

Then you have to click on next button to publish your slider in this page

Step Image

4. Publish slider in Blog Articles:

You can also publish your slider in your Blog Articles. Click on the right corner, we see the option and where to show this slider we have select Blog Articles option

Step Image

After selecting the Pages Option click on the ‘Next’ button then select the blog Article on which Article you want to publish your slider.

Step Image

Then you have to click on next button to publish your slider in this Article

Step Image

5. Publish slider in Embeded Global:

If you publish for Embeded then you can show the slider anywhere using shortcode. So other options are automatically hidden from the list for the current slider. Or if you use any of the other options then embeded is hidden. This is to avoid double slider conflict.

Step Image

Then you have to click on next button to publish your slider in this page

Step Image

After publishing the slider, you will see the Copy Embeded Code button click this button to coppy embeded code. then put this code in your html editor where you want to see your slider

Step Image

To learn more you can visit our Documentation

STEP - 2
Welcome to Slider Revolution 6.5.6.13close
What's new?
Check out our Change Log to learn about new Features and Bug Fixes in Version 6.5.6.13.
More Info
Docs & FAQs
Checkout our all new Help Center
with updated 6.5.6.13 Support Material.
Help Center
Lets get Started with Slider Revolution 6.5.6.13
font_downloadGlobal Custom Fontsclose
addAdd Custom Font
settingsGlobal Settingsclose
Default Layout Grid Breakpoints

Default desktop content width Default notebook content width Default tablet content width Default mobile content width
Fonts

Enable custom font selection in editor
font_downloadEdit Custom Fonts
Disable RS Font Awesome Library
Enable Google Fonts download Optional Google Fonts loading URL
buildUpdate Preload Fonts
Miscellaneous

Editor High Contrast mode Force Enable jQuery
saveSave Global Settings
view_moduleModules
contact_supportSupport
Pricing
chrome_reader_modeDocumentation
extensionRecommended
notifications_active
0
    settingsGlobals
    Start free trial Try it free for 7 days
    Create New Slider
    Step-1
    Edit Slider
    Step-2
    Publish Slider In Store
    Step-3
    Finished

    Still Need help?

    movie_filter New Blank Slider
    styleNew Slider from Template
    + 13
    file_uploadManually Import Slider Zip
    extensionAddOns
    2
    replay replay
    Add Folderadd

    Frequently Asked Questions

    add

    Slider Is not showing in the site

    If the slider does not show up in the slider section after publishing, follow the steps below

    Force Enable jQuery

    Enable the Force Enable jQuery option from the Global Settings model

    Faq Image

    Then click the Save Global Settings button and refresh the slider tab to the font end.

    Faq Image

    Try Testing now

    OR

    If the slide does not show after following the instructions above, then please follow the instructions below

    Publish slider again

    Go to publish slider area again then publish it in sections.

    Add Section

    Go to theme customizer then click add section button then select slider

    Faq Image

    Try Testing now

    OR

    Alias Rename

    Go to Slider editor Rename slider Alias then republish slider

    Faq Image

    Now publish your slider again.

    Try Testing now

    OR

    Embeded System

    Use embeded system if your theme not added custom field

    Faq Image

    Try Testing now

    OR

    Remove Revsliderapp Assets

    Remove the Revsliderapp Assets theme from the Themes section and republish your slider

    Faq Image

    Now publish your slider again.

    Try Testing now

    add

    How To Create Shopify Product Slider

    Display Shopify Products in style with Slider Revolution!

    Slider Revolution is also capable of displaying your Shopify Products in an attractive slider. All you need to do is setup one slide with the product information you want to show and select product categories.

    Getting Started

    At first, we need to click ‘New Module from Template’ Option

    Faq Image

    Search Or Select Shopify Product

    Search by entering Shopify product in the search field or select Shopify Product from Module Templates category. Now you can see the product template in Shopify

    Faq Image

    Choose a Shopify Product template and click the add icon which template you choose and then click the ‘Install Template’

    Configuring the Source

    Selecting Products as Slider Source Configuring Products Slider Source

    Faq Image
    Faq Image

    Creating “Add to Cart” and “Product Link” buttons

    The “Add to Cart” and “Product link” buttons are created using Button Layers and it’s hyperlinked using Layer Actions. Click on the Meta button shown below to open the list of Meta Data

    Faq Image
    add

    How to add jquery to my site

    Force Enable jQuery

    Before enabling this option make sure you have published the slider. if slider is showing successfully then this section is not for you. If after publishing the slider is not visible in the site then you need to Enable jQuery forcefully from the Global Settings. This will add jquery to your published theme. Most of the time it solves the slider not showing issue.

    Faq Image
    Faq Image

    Then click the Save Global Settings button and refresh the slider tab to the font end.

    Faq Image

    Try Testing now

    add

    How to Create A Youtube Video Slider

    Set the Slide's main background to a YouTube Video

    Faq Image

    Type

    To use an YouTube Video as the Slide’s main background, select "YouTube Video" as the Source.

    YouTube ID

    Enter the ID of the YouTube video you wish to display.

    Shop URL

    Enter your shop URL for Playing YouTube Background Video.

    add

    How to Create A Vimeo Video Slider

    Set the Slide's main background to a Vimeo Video

    Faq Image

    Type

    To use an Vimeo Video as the Slide’s main background, select "Vimeo Video" as the Source.

    Vimeo ID

    Enter the ID of the Vimeo video you wish to display.

    Poster Image

    All videos must have a “poster image” set. The “poster” is what will first animate into view when the Slide is shown, and then the video will begin to play afterward.

    add

    How To Add Links to Slides and Layers

    Add a link to a button or text, or link the entire Slide.

    Layer Links

    Add a Button Layer to the editing stage

    Links can be added to any individual Layer. In the following example, we’ll add a link to a simple Button.

    Faq Image

    Next, select the Layer on the stage and click the “Actions” menu item.

    Faq Image

    And then enter the link’s URL and decide if it should open in a new window or the same window.

    Faq Image

    Link URL

    Enter the url of the web page you wish to link to.

    Slide Links

    To link a Slide, visit the Slide’s “Tags & Link” section.

    Faq Image

    And then enable the “Slide Link” option in the “Link & SEO” section, and enter the URL you wish to link to.

    Faq Image

    And then enable the “Slide Link” option in the “Link & SEO” section, and enter the URL you wish to link to.

    Slide Link

    Enable this option to apply a link to the entire Slide itself.

    Type

    Set this to “Regular” to link to a custom URL such as another web page.

    URL

    The url of the website you’d like to link to.

    Target

    Use “same” to open the link in the same window/tab, or “new” to open the link in a new window/tab.

    Sensibility

    Choose if the link should be placed above (front) or behind (back) all other content.

    add

    How to Create A Responsive Slider

    Choose how your Layers should resize and reposition, and set their visibility for different screen sizes.

    Faq Image
    Intelligent Inheriting

    If Intelligent Inheriting is set to OFF, the Layer’s size and position will need to be set manually for each responsive viewport.

    If Intelligent Inheriting is set to ON, the Layer’s size and position will automatically be resized/repositioned as the Module resizes.

    Clicking the Reset All Values from Desktop button will reset the Layer’s size and position for all viewports to the Layer’s size/position for its Desktop view.

    Clicking the Inherit All Values from Desktop button will reset the Layer’s size and position for all viewports automatically.

    Responsive Behavior

    Resize Between Devices

    Enable this option if you want the Layer to resize for the different screen sizes.

    Responsive Offsets

    Enable this option if you want the Layer to reposition itself for the different screen sizes.

    Responsive Children

    If a Layer has nested HTML markup, the nested HTML will also be resized.

    Device Visibility

    Desktop View Visibility

    Show/hide the Layer when the screen size is in the Desktop Viewport.

    Laptop View Visibility

    Show/hide the Layer when the screen size is in the Laptop Viewport.

    Phone View Visibility

    Show/hide the Layer when the screen size is in the Phone Viewport.

    Hide Under Width

    Show/hide the Layer when the screen size is below the “Marked Layers” number set in the Module’s General Settings.

    Show if mouse over Slider

    Choose to only show the Layer when the user has hovered their mouse over the Module.

    add

    How to Add Navigation Arrows and Bullets

    Navigation Arrows

    Change between slides with the help from navigation arrows.

    Faq Image

    Arrows Type/Style

    Choose a predefined style for the Arrow buttons.

    Aligned By

    Choose “Module Dimension” to align the Arrows to the entire module, or “Content” to align the Arrows by the Content Layers Grid.

    Alignment

    Set the position of where the Arrow should be placed.

    Offset X

    A horizontal margin from the Arrow’s alignment position.

    Offset Y

    A vertical margin from the Arrow’s alignment position.

    Navigation Bullets

    Change between slides with the help from navigation bullets.

    Faq Image

    Bullets Type/Style

    Choose a predefined style for the Bullets.

    Orientation

    Choose “horizontal” to place the bullets beside each other, and “vertical” to stack the bullets on top of one another.

    Aligned By

    Choose “Module Dimension” to align the Bullets to the entire module, or “Content” to align the Bullets by the Content Layers Grid.

    Alignment

    A horizontal margin from the Bullets alignment position.

    Offset Y

    A vertical margin from the Bullets alignment position.

    add

    How to add multiple slides in a slider

    To add a new slide hover over the Slides menu and click the Add Slide(s) button:

    Faq Image

    Blank Slide

    Choose “Blank Slide” to add a new Slide without any predefined content

    Bulk Slide

    Choose “Bulk Slide” to add more than one Slide at a time with predefined background images.

    Slide from Template

    Choose “Slide from Template” to add a Slide from the Template Library

    Import from Modules

    Choose “Import from Modules” to import Slides from your other Modules.

    add

    How to Hide a Layer for Mobile Screen

    Choose when the layer should be visible such as per device, above a certain screen width, or on mouse hover.

    Faq Image

    Desktop View Visibility

    Show/hide the Layer when the screen size is in the Desktop Viewport.

    Laptop View Visibility

    Show/hide the Layer when the screen size is in the Laptop Viewport.

    Tablet View Visibility

    Show/hide the Layer when the screen size is in the Tablet Viewport.

    Phone View Visibility

    Show/hide the Layer when the screen size is in the Phone Viewport.

    Hide Under Width

    Show/hide the Layer when the screen size is below the “Marked Layers” number set in the Module’s General Settings.

    Show if mouse over Slider

    Choose to only show the Layer when the user has hovered their mouse over the Module.

    add

    How to Modify Text and Image Size

    Modifying Text

    Changing Text Content

    To change text content, start by selecting the layer you want to modify. This will automatically open the Layer Options tab in the sidebar. Click the Content sub-section where you will see a field containing the layer’s text content.

    Faq Image

    Editing Font Size

    With the text layer you want to modify selected, make sure you are in the Style sub-section of the Layer Options tab in the sidebar. In the panel labeled Font & Icon look for the field with a label that looks like two letters T’s next to each other.

    Faq Image

    Editing Font Weight

    Look for the field with the label that looks like two letter A’s next to each other. When you click on this field you’ll see a drop-down with several numbers, each a multiple of 100. The higher the number the thicker your text will become.

    Editing Font Family

    Locate the field labeled Font Family, click it, and you will see a scrollable drop-down list of all the fonts that are available for you to choose from.

    Editing Font Color

    Find the field labeled Text Color and click on the small colored square next to it.

    Resize Images

    Resize Images

    To resize an image, start by selecting its layer. You will see a bounding box appear around it with small circular white handles on each side:

    Faq Image
    add

    How to Publish slider in Shogun, Pagefly modified page

    Publish slider in Shogun page builder create page

    Click on the Publish to Store button. From the Where To Show option, select Embeded Global (Page builders, Shogun, PageFly ....), then click on the Next button.

    Faq Image
    Faq Image
    Faq Image
    Faq Image
    Faq Image

    Copy the embedded code and insert the embedded code in the html field wherever you want to see the slider.