Enable mobile thumbnails for product pages on the Impulse Theme

Enable mobile thumbnails for product pages on the Impulse Theme
Reading Time
  • Paste it below below the line you found (initSliders) and click save. It should look like this:

    • The final, quick step

    1. From your Shopify admin, go to Online Store > Themes > Customize
    2. Navigate to Product Pages > Product Pages
    3. Make sure thumbnails position is below media

      
    4. Now save and you're ready to go!

    

    

    `.trim(); function codeIsInRanges(code, ranges) { return ranges.some(([start, end]) => start <= code && code <= end); } function isCJK(char) { if (typeof char !== "string") { return false; } return codeIsInRanges(char.charCodeAt(0), [ [12352, 12447], [19968, 40959], [44032, 55203], [131072, 191456] ]); } function isAnsiWordBound(char) { return " \n\r\t".includes(char); } function isPunctuation(char) { if (typeof char !== "string") { return false; } return codeIsInRanges(char.charCodeAt(0), [ [33, 47], [58, 64], [91, 96], [123, 126], [12288, 12351], [65280, 65519] ]); } function stripHTMLTags(html) { return html.replace(/<[^>]*>/g, ""); } function stripMediaTags(text) { return text.replace(/]*>|<\/?video[^>]*>/gi, ''); } function ezfyCalculateReadingTime(text, options = {}) { let cleanedText = stripHTMLTags(stripMediaTags(text)); let wordCount = 0; let start = 0; let end = cleanedText.length - 1; const wordsPerMinute = options.wordsPerMinute || 200; const wordBound = options.wordBound || isAnsiWordBound; while (wordBound(cleanedText[start])) { start++; } while (wordBound(cleanedText[end])) { end--; } const textWithNewline = `${cleanedText}\n`; for (let i = start; i <= end; i++) { if ( isCJK(textWithNewline[i]) || (!wordBound(textWithNewline[i]) && (wordBound(textWithNewline[i + 1]) || isCJK(textWithNewline[i + 1]))) ) { wordCount++; } if (isCJK(textWithNewline[i])) { while (i <= end && (isPunctuation(textWithNewline[i + 1]) || wordBound(textWithNewline[i + 1]))) { i++; } } } const minutes = wordCount / wordsPerMinute; const timeInMilliseconds = Math.round(60 * minutes * 1000); const displayText = Math.ceil(minutes.toFixed(2)) + " min read"; return { text: displayText, minutes: minutes, time: timeInMilliseconds, words: wordCount }; } return { init: function () { document.addEventListener("DOMContentLoaded", function () { const result = ezfyCalculateReadingTime(text) const words = SHOW_WORDS ? ` (${result.words} words)` : `` $text.textContent = `${result.text}${words}` const $parent = $text.closest(`.ezfyReadingTime`) $parent.classList.add(`ezfyReadingTime--visible`); }); }, }; })(); ezfyReadingTime.init();

    The impulse theme by Archetype Themes, by default, does not come with an option to show thumbnails on mobile devices. With some minor custom coding it's possible to achieve that, though.

    This code was tested on Impulse version 3.4.0.

    Safety first: making a backup copy of your theme

    Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

    Showing the thumbnails on mobile

    1. In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
    2. Find the file named product-images.liquid
    3. Press CTRL + F (or CMD + F if you are on Mac) and search for small--hide
    1. You should find only one occurrence of this. Make sure you delete the word and click on save.

    Editing the javascript file

    1. Find the file named theme.js
    2. Press CTRL + F (or CMD + F if you are on Mac) and search for this:

      initSliders:

      Don't forget to include the colon on your search (the two dots on top of each): :
    3. Again, you'll find only one occurrence, like the image below shows.
    4. Delete everything below the line you found (initSliders) until this symbol: },

      It should look like this:

    5. Open this link and copy the code.
    6. Paste it below below the line you found (initSliders) and click save. It should look like this:

    The final, quick step

    1. From your Shopify admin, go to Online Store > Themes > Customize
    2. Navigate to Product Pages > Product Pages
    3. Make sure thumbnails position is below media

      
    4. Now save and you're ready to go!

    

    

    Back to blog

    Leave a comment

    Related Articles