FlexSlider and the product page of the Shopify Narrative theme
There is the very useful and nicely written Medium post Customise the product page of the Narrative theme in Shopify by pherakan where he also addresses how to integrate FlexSlider into a Shopify product page. I tried to follow his advice but ran into some problems which are the result of updates on the Narrative theme in the course of the last years. So here I would like to share what I found to work.
Following the route laid out by pherakan there are now nine steps required to reach the goal:
- Download Flexslider and unzip the folder. From the folder you require the files jquery.flexslider.js and flexslider.css
- Rename flexslider.css to flexslider.scss.liquid. The .liquid extension will trigger that the Liquid-Engine from Shopify will evaluate all Liquid code in the file which we will add. The .scss extension tells Shopify to apply the Sass pre-processor which e.g. allows to define variables within the file. To provide customized values consistent to the Narrative theme settings add to the beginning of the file the two line
These values are coming from the setting_data.json file which collects the theme settings for the theme and which are set when you customize your theme your Shopify admin.
In the flexslider.scss.liquid replace all settings for color with $color-primary, such that the lines read like
color: $color-primary;Then in the same spirit set all background settings to $color-body-text. I also adjusted other values in the file, like the font-size and the width and height of the navigation buttons to make it more in sync with the theme.
Also do not forget to adjust the paths for the fonts
3. Upload the files jquery.flexslider.js and flexslider.scss.liquid to your assets folder in Shopify. You do this by going to your Shopify dashboard > Online stores > Actions > Edit code > Scroll down to assets and upload it.
4. In file theme.liquid in the layout folder in Shopify add the following lines right above the </head> tag:
The file flexslider.scss.css will be created by the Liquid-engine from the file flexslider.scss.liquid as described above.
Do not add the link to jquery as pherkan advises because in between jquery is provided via the link to vendor.min.js. Having two times the jquery integrated is the opposite of being helpful.
5. Now in the file custom.js add the code:
Putting the code in the template for the product page does not work any longer, because the page loads before jquery is available. My test indicated that custom.js is only loaded when vendor.min.js is available, but some suggest to remove the defer=”defer”from the link to vendor.min.js in the file theme.liquid to make sure that it is loaded without delay.
There are a lot of options available for the package flexslider. So it is worth to have a look at the example page http://flexslider.woothemes.com. Here the parameters steer how animation behaves (slide) and that navigation button for the direction are shown.
The code just says that jQuery should attach the routine flexslider defined in jquery.flexslider.js to any class flexslider it finds on a page. For sure other class names or id can be used to tie the routine to them. Then the animation will be done on the nodes which have the slider class.
6. Create a new product template in the folder templates and name it product.alternate.liquid. You could edit the current product template file but that is not recommended. You may just copy the content of the file product.liquid into your newly created file. Replace the line
{% section ‘product-template’ %}with
{% section ‘product-alternate-template’ %}7. In the folder sections in Shopify create a new file product-alternate-template and copy the content of product-template into it. Underneath the line
<div class=”product__content-main”>copy the lines
Here the class flexslider turns up that were mentioned in the javascript routine defined in custom.js.
Also not that we reused the class product__description which steers how the new slider is integrated in the page. To place the slider before the description text the setting style=”order:1" overrides the value given in the style sheet for the theme. With that we do not have to touch the style sheet. In the style sheet the order:1 is given to the product__form-container just below of the product description.
prodcut-preview-image is an already available liquid snippet which can be used without any modifications.
To avoid conflicts just move that form outside of the <div class=”product__content-main”></div> tags, so that the whole regions reads as
8. Some final touches are still required. For that it is very helpful that the template as provided by Shopify is nicely structured and the regions are marked with comments. To switch of the images which originally appeared at the beginning of the page either delete or comment out the `Product Featured Media` region and do the same to the `Product Media Gallery`.
9. Finally make sure to select the product.alternate on the product page in admin region of your shop. Now everything should work as expected.
I hope my description is accurate enough and it works for you. As you might have noticed from the screenshots that we did some further adjustments, so that the code in our modified section file looks different already but you can download the files product.alternate.liquid (for the section folder) and flexslider.scss.liquid from my gist.