Glossary Item Box

Squirrelcart v6.1.0

Homepage Slideshow

Overview 

With this feature you can add a responsive (mobile-friendly) image slideshow to your store's homepage. Optionally, You can add titles, text, and links to your slides.

homepage slideshow

 

Enabling / Disabling the Slideshow

  1. Enter your control panel
  2. Click the Homepage Slideshow Settings link:
    Homepage slideshow settings menu link
  3. Use the Enabled field to turn the feature on or off, then click Save Changes.

Working with Slides

Viewing slide records

  1. Enter your control panel
  2. Click the Homepage Slideshow Settings link:
    Homepage slideshow settings menu link
  3. Click the Manage Slides button

 

Creating or changing slides

  1. Follow the above instructions to view your slide records.
  2. If you'd like to create a new slide, click the Add New button. If you would like to edit an existing slide, click anywhere on the slide's row to open it in edit mode.
  3. Enter a Name. This field is for your reference only and is not visible in the store.
  4. Enter an optional Title. When specified, the title will appear on top of the slide image.
  5. If you would like the slide to link to a page, set the Link and Link Text fields accordingly. The values shown for the Link field correspond to links created under the Settings > Themes, Links page. See the Customizing > Themes > Links section of this documentation for more information.
  6. The Align Text field controls the alignment of both the Title and Description
  7. Unchecking the Enabled field can be used to temporarily disable the slide without deleting it.
  8. Assign an image to the slide using the Background Image fieldset. Recommended dimensions are 1246px X 464px. We recommend not putting text inside the image itself as it will not be easily readable on small screens.
  9. Enter an optional description in the Description field. This should be relatively short and no more than a couple of lines.

 

Controlling which slides appear in the slideshow

  1. Enter your control panel
  2. Click the Homepage Slideshow Settings link:
    Homepage slideshow settings menu link
  3. You can control which slides appear in the slideshow using the Slides in This Slideshow fieldset, by moving desired slides from the Available Slides field to the Selected Slides field. To control the order of your slides, select a slide in the Selected Slides field and move its position with the arrows to the right of the field.
  4. Click Save Changes

Responsive Design Changes

The recommended proportions for slideshow images work great on large screens. On small screens such as phones and small tablets, the slide images if left at the same proportions would look wide and short (especially if the device is in portrait orientation):

 

 

 

To improve the appearance of the slideshow on small screens Squirrelcart by default will crop the left and right sides of the image off to make the proportions of the image more appealing:

 

 

To disable this functionality in versions 5.6.0 and newer:

Uncheck the Crop on Small Screens field on your Homepage Slideshow settings page.

 

To disable this functionality in versions 5.5.x and earlier:

Add this CSS to your style_custom.css.php stylesheet file:

/* prevent cropping of slide show images */
@media screen and (max-width: 560px) {
    .slides_nocrop .slide {
        width: 100%;
    }
    
    .slides_nocrop .slide > img:first-child {
        margin-left: 0%;
    }
    
    .slides_nocrop .slide_info {
        margin-left: 5%;
    }
    
    #sc .slides_nocrop .slide h4 {
        margin-bottom: 0;
    }    
        
    #sc .slides_nocrop .slide .btn, 
    #sc .slides_nocrop .slide .btn:active {
        font-size: .8em;
        line-height: 1;
        padding: 8px;   
    }
} 

 

 

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.