Products: Replace image thumbnails with slideshow dots or dashes

If you'd like to change the product page to display dots in the product slider instead of thumbnail images, you ca use this custom modification.

Difficulty: Intermediate. Requires you to modify the theme's Javascript files. Commenting out Javascript code in the correct position. Having a backup is required as this code change can break your theme easily with the slightest of errors. 

Result with dashes:

Or dots version:

How to:

OPTION 1

Pipeline 5.0 and higher use this CSS code:
Click to view code

  To use dots set:
     --dot-width: 8px 
     --dot-height: 8px
     --dot-border-radius: 50%
  To use dashes set: 
     --dot-width: 10px 
     --dot-height: 4px
     --dot-border-radius: 0

OPTION 2

Earlier versions of Pipeline:

1

Make a duplicate of your theme

Do not skip this step, it's required.

2

Check for media.liquid

Open the Code Editor:

(NEW STEP)

Check if you have a newer version of Pipeline with Shopify's Product Media support (new product media format types):

Verify if you have media.liquid in the Snippets folder:

2

Change your Javascript file - theme.js

From the Assets folder, open theme.js:

OPTION A: - Newer versions of Pipeline with Shopify's new product media support (see above if unsure):

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

dots: true

That will take you to this line:

Next, we'll need to comment out an entire section of code. Find this section of code:

The start is simple, it begins with the appendDots: line. 
The ending, is that single curly-bracket. Be sure you identify that bracket. 

Note: If your theme version looks different, you may need to use OPTION B. 

Example after commenting out that section of code:

How to comment - Comments start with:

/*

and end with:

*/

Be sure the comment out section starts above the appendDots line and ends after the single close curly bracket line. 

Save the file:

Important:  Proceed to Step 3 (skip Option B portion). The next step (3) is required. 

OPTION B: Older versions of Pipeline (see above if unsure):

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

dots: true

That will take you to this line:

Next, we'll need to comment out an entire section of code. Find this section of code:

The start is simple, it begins with the appendDots: line.  
The ending, is that single curly-bracket. Be sure you identify that bracket. 

Example after commenting out that section of code:

How to comment - Comments start with:

/*

and end with:

*/

Be sure the comment out section starts above the appendDots line and ends after the single close curly bracket line. 

Next, we need to remove the trailing comma from the swipt: swipeEnbable line:

Remove that comma. Example after:

Save the file:

3

Modify style code (for all versions)

The next step is to add CSS to the theme's stylesheet (see blue link for exact location). Choose one of these versions:

Dashes version, use this code:

Click to view code

Dots version, use this code:

Click to view code

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code