How to add a full width slideshow to a Page

The Shopify Page editor doesn't have a featured image option to attach an image with Pages. Until Shopify adds this feature, we have the following method which you can use to add a homepage Image with text overlay section on a standard Shopify Page. 

This method requires to your create a custom template with a custom slideshow section. It's important to know that when you create this template and section combination, the slideshow images and settings are bound to that template. This works well for one Page. If you'd like to use a different image on a second page, another page template need to be created. 

How to:

1

Create a slideshow section file

Open your Code Editor:

Quick link if the theme is live/published:
Open Code Editor

Note: This tutorial works best for live published themes. When you create a new template, it won't appear as an option if created on a draft theme. 

Under the Sections folder, choose Add a new section:

Call the new section:

page-slideshow-1

Example:

Use the Create section button to complete.

Erase all the default code that generated:

Replace the default code with one of these options - Choose your version of Pipeline:

If you're unsure of your version:
What version of Pipeline am I using?

Pipeline 4.2, use this code:
Click to view code

Or

Pipeline 4.0 and Pipeline 4.1, use this code:
Click to view code

Or

Pipeline 2-3, use this code:
Click to view code

Save the file.

2

Create a new template

In the templates folder, choose Create Add a new template:

(1) Change the first drop-down to page:

(2) Call the template:

slideshow-1

Use the Create template button to complete.

At the top of the default code that's generated, added a reference to call the new section file you created:

Code to add above all other code:

{% section 'page-slideshow-1' %}

Save the file.

Wide page format

If you're using a wide page format (less padding in the content area), then change line number 5

    <div class="grid__item large--two-thirds push--large--one-sixth">

Change to:

    <div class="grid__item one-whole">

Save the file.

3

Assign the template to your Shopify Page

You're now ready to use the template on a page. Find the page you'd like to have the slideshow on in the Page editor:

https://shopify.com/admin/pages

Change the page template type to page.slideshow-1

On the left side, use the template drop-down and change from page to page.slideshow-1:

Save the page settings.

4

Use the Theme Editor to customize the slideshow

Use the Custom Theme option in the top right corner of the Code Editor:

Browse to your page and now you'll be able to customize the slideshow image and settings.

The easiest method to find your page in the Theme Editor is use the top menu and scroll down to the PAGES section:

The Theme Editor needs to view that page in order for the settings to appear.

Begin adding images now to your slideshow. The message on the right will disappear once you add at least one image/slide. 

Save your changes. 

Using this method on a second page

Once you've successfully created your first page.slideshow-1 template and section file, you can create a second or more for another page. 

Remember page.slideshow-1 will now have an image and settings assigned to it for your first page. If you use that template on another page, it will use the exact same slides and settings. Changing any of the slides will also change for any page using that template. 

For that reason, you'll want to create a new template and section file to have a unique slides on another page. Follow the same steps again and just change the filenames and references. 

In Step 1, for the new section filename use:

page-slideshow-2

Use the same section code from the gist file, that does not need to change.

In Step 2, change the code to call the second section file instead:

{% section 'page-slideshow-2' %}

In Step 3, you'll be selecting the page.slideshow-2 template.