Brooklyn Theme: enable slideshow & thumbnails for product page images
Even though the Brooklyn theme was crafted with apparel stores in mind, it has become a popular choice between the most varied types of businesses: travel accessories, jewelry, pets, electronics and so on and so forth.
Without a doubt Brooklyn serves its purpose well, but, unlike many themes, it lacks an option to easily navigate the many products' images. If a product has more than 10 images, for example, the user will inevitably have to scroll through a wall of content which for some can turn out to be a frustrating experience, especially for impulsive buyers.
In this tutorial I'll show you how you can quick and easily add thumbnails, arrows and a smooth slideshow to your Brooklyn theme product page images. All it takes is copying and pasting one single code file. You can click here to see how the end result will look like.
Password: 123
→ Live Demo ←
Making a backup of your current theme
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Downloading the files
Download the files clicking here. (live preview - password: 123)
The complete details about the slideshow can be found clicking here.
Installing the slideshow code
-
In your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code.
-
Find a file named product-template.liquid
-
Delete everything inside of this file. Make sure it is blank:
-
Now, inside of the .zip you downloaded, there will be a file called product-template.txt. Copy all the code inside of this file.
-
Paste this code you copied into product-template.liquid and save.
-
That is it! Your slideshow is now working and ready to use.
Customizing your new slideshow to your liking
-
In your Shopify admin, navigate to Online Store > Themes >Customize.
-
On the top, from the dropdown options, select product pages.
Once this page loads, click on product pages on the left.
-
Inside the Product pages menu you'll find all available options for the Brooklyn Slider.
Something went wrong, there is a bug or I can't install it
No worries at all! We'll be more than happy to help you out.
Just please send us an email at ezfycode@gmail.com with your website URL and we'll get back to you on the same day to assist you and get it installed.