PinnacleCart does offer its own professional-grade slider through our Professional Services. But for our customers who would like to spice up their site but aren't looking to spend a lot of money, this ComSlider is an excellent alternative. 

Applies to Version(s): 3.7.X - 3.8.X series

In this article, you will learn:

What is comSLIDER?

Creating a comSlider

Installing the comSlider

What is comSLIDER?

Note: is not a PinnacleCart product, and isn't supported by our staff. For any questions about comSLIDER you will want to reach out to their support

comSLIDER is a free Slider alternative to the one offered by our Pro Services team.

This is a very neat solution that works amazing with our most recent version of PinnacleCart. Most free sliders won't work with the responsive theme but this one will!

Creating a comSlider

Note: If you don't like the template you started with, you can always change on, also not all templates are Responsive so pay close attention to which one you're choosing (applies only to Cart Version 3.8.x)

1. When you arrive at, start by selecting the template you'd like to start with. Click Use this Template to select it.

use comSlider template

2. Now click Register to create an account.

register comSlider

3. Fill out your email address and create a password. Click Apply.

registration form

4. Upload the images you'd like to use in the slider. You can remove or add additional images whenever you'd like. Click Upload images.

upload images

5. After all the images are uploaded, you can add URLs to which the images would link to if clicked, as well as decide how the link would open up.

add URLs

6. In the left column are a number of settings you will want to take a look at:

  • Layout - You can set the width, height, and background color (if your image doesn't stretch far enough). You will definitely want to check the box next to Responsive. Click Apply to save changes.
  • Transition - Set whether it's Static or Cycles, and if the latter, how often. You may want to go in and remove all of the Transition List options you see, and only add the ones you want to use. You can also set images to stretch to the size of the slider, among other options. Click Apply to save changes.
  • Navigation - This allows you to control the buttons used to manually move the slider. You can change position, style, colors, fills, strokes and opacity. Click Apply to save changes.
  • Navigator Control - This allows you to control how the buttons behave, functionally speaking. Click Apply to save changes.
  • Advanced - Click Advanced to expand it out. You can choose a loading image if you'd like. But more importantly, here you would select My website is HTTPS secure. This will allow the slider to load if someone accesses your site through a secure URL, as well as through Cart Designer. Click Apply to save changes.


7. Now you need to copy the code which will be used for the slider. Highlight all of the code and copy it.

copy code

Remember that you can change your slider anytime by logging into your comSlider account and making the changes on this page.

Installing the comSlider

Note: You can do this through Cart Designer or the File Manager

1. Login to the admin area of your cart and go to Design > Cart Designer.

cart designer

2. Assuming you want to add the slider to your home page, right-click on your home page image and select Edit Source Code.

edit source code

3. You will need to know how to read HTML a tad to know where you'd like to add the slider. You will also want to decide whether or not you want your home page image to still appear. In the example, we've commented out the code for the home page image and added the slider script underneath it. We've also surrounded the script with literal tags. See Adding Literal Tags to Your Site.

HTML editor

An example of the code we used is below. You do not want to copy this verbatim since your comSlider script will be different:

<div class="page-home wrap {class file=$smarty.template editable=true}">
    {assign var="imageId" value="image-home"}
    <!--{if $designImages.$imageId}
        <div class="custom-home"><img class="image-home {class file=$smarty.template editable=true}" src="{$designImages.$imageId.content}" alt="{$msg.images.imageHome|htmlspecialchars}"/></div>
        <div class="clearfix"></div>
{literal}<div id="comslider_in_point_1131251"></div><script type="text/javascript">var oCOMScript1131251=document.createElement('script');oCOMScript1131251.src="";oCOMScript1131251.type='text/javascript';document.getElementsByTagName("head").item(0).appendChild(oCOMScript1131251);</script>{/literal}
    <div class="custom-home clearfix">
        <div class="home-container clearfix">
            {if !empty($products)}
                <div class="home-products">{include file='templates/pages/catalog/views/display.html'}</div>

4. You may want to add some CSS to center the slider into the middle of your content. This will very depending on your design. In our theme, for example, we stretch the site to fit 100% of the screen, so we need to push the slider to the right quite a bit. In addition, we don't want it to move at all when being viewed on mobile devices, so we add a CSS media@ query for that. Go to Advanced Tools > Edit custom CSS.

edit custom CSS

The CSS we used is below:

#comslider_in_point_1131251 {
    margin-left: 23%;

@media screen and (max-width: 480px) {
    #comslider_in_point_1131251 {
        margin-left: 0;

Here above you can see the path of where the file is saved as well along with the code for the image that is being pulled up from the cart files. Click Save. After the page refreshes, You will see what the slider now looks like. Click Exit at the bottom of Cart Designer.

In the admin area, click the eyeball icon at the top right to view your site.

view site

You can also shrink your browser down to see what it would look like on mobile.

mobile view

None at this time.

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.