How to add an image gallery to Shopify Page/Blog

This is an image gallery that can be embedded into a Shopify Blog or Page without any apps.

• Open your page/blog
• Click the code view (screenshot below)
• Copy and paste the code at the bottom of this page
• Replace the image links in the code with your images
• Increase/decrease the images as you need
• Save

Features

• Mobile responsive
• Click the image to open it
• Use left & right arrow buttons or keyboard buttons to select the previous image or the next image
• Use the escape key or close button to close an open image
• Hides next/previous button when there are no more images further left or right

Things to note

• Make sure your images are of same dimension. If not, the grid will look messy.
• If your default blog/page is not full width, the gallery won't look nice.

Code

    <style>
        .lp-img-gallery {
            width: 80%;
            margin: 100px auto 50px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 30px;
        }

        .lp-img-gallery img {
            width: 100%;
            cursor: pointer;
            transition: 1s ease;
        }

        .lp-img-gallery img:hover {
            transform: scale(0.8);
            box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2);
        }

        /* Wrapper */
        .lp-image-wrapper {
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .lp-image-wrapper img {
            width: 80%;
            max-width: 500px;
        }

        .lp-image-wrapper span {
            position: absolute;
            font-family: sans-serif;
            color: #fff;
            cursor: pointer;
            padding: 5px 8px;
        }

        #lpImgModalClose {
            top: 5%;
            right: 5%;
            border: 0.5px #fff solid;
            border-radius: 20%;
        }

        #lpNextImage {
            top: 45%;
            right: 5%;
            border: 0.5px #fff solid;
            border-radius: 20%;
        }

        #lpPrevImage {
            top: 45%;
            left: 5%;
            border: 0.5px #fff solid;
            border-radius: 20%;
        }

        @media (min-width: 640px) {

            #lpImgModalClose,
            #lpNextImage,
            #lpPrevImage {
                background-color: unset;
                border: unset;
            }
        }
    </style>

    <div class="lp-image-wrapper" id="lpModalWrapper">
        <img src="" id="fullImg" />
        <span id="lpImgModalClose">&#10005; </span>
        <span id="lpNextImage">&#8594;</span>
        <span id="lpPrevImage">&#8592;</span>
    </div>

    <div class="lp-img-gallery" id="lpImgGallery">
        <img src="https://picsum.photos/id/237/800/600" />
        <img src="https://picsum.photos/id/238/800/600" />
        <img src="https://picsum.photos/id/239/800/600" />
        <img src="https://picsum.photos/id/240/800/600" />
        <img src="https://picsum.photos/id/241/400/800" />
        <img src="https://picsum.photos/id/242/800/600" />
        <img src="https://picsum.photos/id/243/800/600" />
        <img src="https://picsum.photos/id/244/800/600" />
    </div>

    <script>
        let images = document.querySelectorAll('#lpImgGallery img');
        let wrapper = document.getElementById("lpModalWrapper");
        let imgWrapper = document.getElementById("fullImg");
        let close = document.getElementById("lpImgModalClose");
        let next = document.getElementById("lpNextImage");
        let prev = document.getElementById("lpPrevImage");
        let indexOfCurrent = null;

        images.forEach((img, index) => {
            img.addEventListener("click", () => {
                indexOfCurrent = index;
                openModal(indexOfCurrent);
            });
        });

        function openModal(index) {
            wrapper.style.display = "flex";
            imgWrapper.src = images[index].getAttribute('src');
            hideArrows();
            document.body.style.overflow = "hidden";
        }

        close.addEventListener("click", () => closeModal());

        function closeModal() {
            wrapper.style.display = "none";
            document.body.style.overflow = "unset";
        }

        next.addEventListener("click", () => {
            if (indexOfCurrent + 1 <= images.length - 1) {
                indexOfCurrent = indexOfCurrent + 1;
                openModal(indexOfCurrent);
            }
        });

        prev.addEventListener("click", () => {
            if (indexOfCurrent - 1 >= 0) {
                indexOfCurrent = indexOfCurrent - 1;
                openModal(indexOfCurrent);
            }
        });

        function hideArrows() {
            prev.style.display = "unset";
            next.style.display = "unset";
            if (indexOfCurrent == images.length - 1) {
                next.style.display = "none";
            }
            if (indexOfCurrent == 0) {
                prev.style.display = "none";
            }
        }

        document.addEventListener("keydown", ({ key }) => {
            if (key === "Escape") {
                closeModal();
            }
            if (key === "ArrowRight") {
                next.click();
            }
            if (key === "ArrowLeft") {
                prev.click();
            }
        });

    </script>

Support

If you have any questions or face any problems while setting this up. Contact me for Shopify support.