How to Use comSLIDER for Your Store in PinnacleCart

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. 

In this article, you will learn:

What is comSLIDER?

Creating a comSlider

Installing the comSlider

What is comSLIDER?

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

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

2. Now click Register to create an account.

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

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.

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.

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.

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

Installing the comSlider

1. Login to the admin area of your cart and go to Design > 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.

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.

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>
    {/if}-->
{literal}<div id="comslider_in_point_1131251"></div><script type="text/javascript">var oCOMScript1131251=document.createElement('script');oCOMScript1131251.src="https://commondatastorage.googleapis.com/comslider/target/users/1475164823x9721bd34fc129904be7b2393ac519505/comslider.js?timestamp=1475171048";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)}
                <!--<h1>{$msg.product.recommended_products}</h1>-->
                <div class="home-products">{include file='templates/pages/catalog/views/display.html'}</div>
            {/if}
        </div>
    </div>
</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.

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.

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

Links to Related Articles

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.