How to add slideshow to your Collection page

How to add slideshow to your Collection page

To add slideshow to Collection pages, you need to choose one of four methods in Integration option.

1. Automatic detect theme

We've customized Slideshow to fit the collection pages of most Shopify themes perfectly.
If you choose this option, our app will identify your theme to add the matched Slideshow style. It'll add to all identified themes (including published and unpublished themes).

If slideshow doesn't show up or show up incorrectly on your theme, it might because:
1. Our app can’t detect your theme (or your theme has been renamed) → switch to the “Select a specific theme” method.
2. Your theme is not supported yet (see supported list) → switch to "Insert code" or "Use CSS selector" method.
If you're not familiar with coding, contact us for help.


2. Select a specific theme

Select your theme’s original name. Slideshow will be inserted to all matched themes.
For example: if you choose "Debut", Slideshow will be added to all Debut theme on your store.
If your theme is not in the supported list, switch to the next method.


3. Insert shortcode

If your theme is not supported yet, or you want to add slideshow to a different position on your collection page, you need to add this shortcode to the collection description or collection liquid file:
<div id="qikify-slider"></div>
There are 2 ways to add this shortcode:


Method 1: Add to collection description
This method only adds Slideshow to the collection having this shortcode, not all collection pages.
  1. Go to your page in Shopify admin → Edit your collection.
  2. In the Description editor, click the <> button to show HTML editor


  1. Paste the shortcode into the Description editor


  1. Save and Done. Slideshow will show up on the added collection.

Method 2: Add to liquid file
* This method might require coding experience.
  1. Go to your Shopify admin → Themes → Actions → Edit code


  1. Find the template liquid that your collection page is using (usually collection-template.liquid).
    Paste the shortcode to the position you want in page (for example: under <header> of collection page)

  1. Save and Done.
Contact us if you need help.


4. Use CSS selector

* This method might require coding experience.
Find the CSS selector of the element where you want to insert slideshow. Slideshow will be prepended to that element.
Instruction:
  1. Navigate to your store > Find a position where you want to add slideshow
    For example: add slideshow to above collection name and other content (filter, sort, products list...)

  1. Find the CSS selector of the block right under the slideshow position. In our example, it'll be the collection name and others.
    Right click to the collection name > Inspect.

  1. The developer tool will appear and auto detect the HTML tags of your selected element

  1. Find the block containing collection name and others (eg. <div class = "page-width">)  → Right click → Copy → Copy selector

  1. Paste the selector you copied into the Integration page

  1. Save and Done. Slideshow will be added above that block.



Contact us if you need help.


    • Related Articles

    • Add slideshow to other pages

      To add slideshows to other pages outside collection pages, you need to create slideshows in the "Other pages" section.  In your Collection Slideshow app, go to “Other Pages” and create new slideshow For all slideshows in this section, there is only ...

    • List supported themes for Collection Slideshow

      We've customized slideshow to fit collection pages of most Shopify official themes. Press Ctrl+F and type your theme name to search.  There might still be some problems depending on theme version or in-use apps. Please contact us to resolve. If your ...

    • General Settings for Slideshow

      In this tab, you will choose collection page to display slideshow and customize slideshow to fit your store. Name your slideshow  Type slideshow name in the first box of the tab.  All your created slideshows will be on dashboard page like this: ...

    • Add Sections in Mobile Menu app

      Mobile Menu app supports 12 types of section: Menu Use this section to add your Links list. Section settings: Section title (optional): Enter a title for the section. This title will be displayed in the menu. Disable title: If you don't want to show ...

    • How to Embed Form to a page

      In Display > Open form in > select Embed Form if you want to display Contact Form in the page content, don't want to trigger form with a button. If you use the form as Embed Form, you do NOT need to configure the Trigger Button settings The Embed ...