On This Page

TABLE OF CONTENTS

What is the Hero Slideshow?


Your Hero 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.


Setting Up Your Hero Slideshow


Finding and Editing the Hero Slideshow

In order to find the customization screen for your store's webpage, please follow these steps:

  1. From your myShopify homepage, go to Online Store > Themes
  2. Find and click Customize
  3. You will see the customization menu on the left of your screen. Click the drop-down arrow to the left of Hero Slideshow


Adding Slides

From this drop-down menu, you will notice a prompt to Add Slide. Click here.


Once you have opened the Add Slide function, you have several steps for editing. The recommended order for creating your slides are in the same order that the page presents it:

  1. Add image
  2. Input customized text
  3. Add linked button


Adding an Image

The foundation for each slide in your Hero Slideshow is the image that you choose. This image serves to grab the attention of your customers as well as advertise.


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. 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.)


Customizing Text

Another useful feature included in each slide is the ability to overlay a customized text on the image you chose. This next section focuses on the content, position, alignment, and color or your text. It is recommended that, once you have added your intended content, you play around with the positioning of the Title, Subtitle, and Description texts until you have found a style and positioning that your store prefers


Following the content, alignment, and position of your text you will find sections that allow you to edit the colors of each text section. Choosing your color using the built-in Color Chooser is straightforward. There is also an option to enter the HEX code for specific colors, if your store already knows which colors you would prefer to use. 


Adding a Button Label

The final option for customizing your slide is the Button Label. This is a linked button that you can place alongside your text. You can link any page on your site or any outside web address to this button. You can also edit what the button says. To edit the text on the button, input your text box beneath Button Label. To choose where to link this button label, enter your web address in the text box beneath Link or choose another page from your website within the same text box.


If you do not specify a link for the button label, it will redirect to your website's homepage.


Once you have finished creating your first slide, you can move on and add up to 5 slides to your Hero Slideshow.


After Adding Slides

After you have finished adding all of your slides, you can adjust the order that the slides are shown in by dragging and reordering them using the 6 dot symbol to the right of the slides. You can see this symbol here: