On This Page
TABLE OF CONTENTS
Getting Started
Your Slideshow is a scrolling banner that will be the main eye-catcher at the top of your webpage. This is where you want to promote important items or events. Some possible examples may include:
- Sales
- Events
- Upcoming product releases
This slideshow works by creating several independent slides that scrolling automatically on your store's homepage. Setting up and editing this slideshow is simple and straight forward.
Finding Your Slideshow
In order to begin customizing your slideshow, follow these steps:
- From your myShopify homepage, go to Online Store > Themes
- Find and click Customize
- You will see the customization menu on the left of your screen. Find and select Slideshow
Customizing Your Slideshow
Once you have opened the customization tab for the Slideshow, you will find several sections for customization. These include:
- Full-width
- Image Size
- Transition Effect
- Auto Rotate Between Slides
- Change Slide Intervals
Full-Width
This section includes a tick box that allows for adjustments to be made to the width of the Slideshow banner. When selected, the banner will stretch the length of the entire webpage. When deselected, it will take on a more narrow appearance.
Image Size
Here you will be able to adjust the size and ratio of the images added to the banner. These options include: Original Image Ratio, Small, Medium and Large. We recommended playing with these features to find settings that best fit the desired effects of your store's webpage.
Transition Effect
This section holds a dropdown menu allowing for the customization of the effect used to signify transitions between banner images. These transitions include the following: Fade and Slide.
Auto-Rotate Effect
This section includes a tick box that allows for automatic rotations to be enabled or disabled. If selected, the banner images will automatically rotate and transition. If selected, you can adjust the timing of the transitions by adjusting the following section: Change Slide Intervals.
Change Slide Intervals
This section includes a scrolling cline, but is only available if the previous section, Auto-Rotate Effect, is enabled. This cline is adjustable in intervals of one second; ranging from two to eight seconds.
Adding Image Slides
In order to add image slides to your store's Slideshow, follow these steps:
- From your myShopify homepage, go to Online Store > Themes
- Find and click Customize
- You will see the customization menu on the left of your screen. Find and select the dropdown arrow beside Slideshow
- Select Add Image Slide
Customizing Image Slides
Once you have added an Image Slide, you can begin your customization of the individual slides. In this section, you will find:
- Image
- Mobile Image
- Show Overlay
- Overlay Opacity
- Text
- Heading
- Content
- Content Position
- Button
Image
In order to add a new image to your slide, click Select Image. From here you can upload or select the image your store wishes to display in the slide. This image is specific to websites being run on desktop. Please note that the recommended image size is beneath this section. It will look something like this:
If your image doesn't fit these specifications, it will not properly fit within the slide.
The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, tablet, etc.)After you have chosen your image, you will notice another customization option become available: Add alt text.
Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text featureMobile Image
In order to add a new image to your slide, click Select Image. From here you can upload or select the image your store wishes to display in the slide. This image is specific to websites being run on mobile; if no image is given here, the desktop image will be displayed. Please note that the recommended image size is beneath this section. It will look something like this:
If your image doesn't fit these specifications, it will not properly fit within the slide.
The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, tablet, etc.)After you have chosen your image, you will notice another customization option become available: Add alt text.
Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text featureShow Overlay
This section include a tick box that allows for the readability of text to be more clearly seen on images that are busier. Selecting or deselecting allows for the overlay to become visible or invisible.
Overlay Opacity
This section includes a sliding cline that allows for the opacity of the overlay to be adjusted. These adjustments happen in one percent increments ranging from 0 to 100. This adjusts the opacity of the overlay when it is shown by selecting Show Overlay as explained above.
Text
Here you will find the option to customize the text color for your slideshow banner.
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your storeHeading
This section includes a text box allowing for the customization of a content heading. This heading will be positioned above both the Content and Button that describe and link to the product being displayed on the slideshow. For the Heading, we recommend something attention grabbing and catchy to capture the eye of customers.
Content
This section includes a text box allowing for the customization of a content description. This will be positioned between the Heading and Button and serves to describe the product being advertised in the slideshow image. We recommend using a short and succinct message here, if any at all.
Content Position
This section allows for the orientation of the content section; a dropdown menu gives the choice for one of nine placement options. These options are: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right.
Please note: when on mobile, all content will be centered on the slideshowButton
Background Color
Here you will find the option to customize the background color for your content Button.
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your storeText Color
Here you will find the option to customize the text color for your content Button.
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your storeText
This section includes a text box allowing for the customization of the message that will appear on your slideshow's content Button.
Link
This section includes a text box that allows for your store to connect a link to the above Button. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this:
Please note: if nothing is entered in the above Text section, resulting in a blank Button, the entire slideshow will redirect to the above Link when clicked