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.

Standard product page
  1. 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
color: $color-primary;
{% section ‘product-template’ %}
{% section ‘product-alternate-template’ %}
<div class=”product__content-main”>
Customized product page

Data Analyst

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store