How to add Collection Slideshow to your theme

            1. Automatic detect theme

            We've customized Slideshow to fit 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.
            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.

            Updated: 13 Nov 2019 12:03 AM
            Help us to make this article better
            0 0