Store Paused 404 Page Template [WIP]
<!-- /templates/404.liquid -->

<header class="section-header section-header--404 text-center">
    <!DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <head>
        <style>
            /* Google Font CDN Link */

            @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "Poppins", sans-serif;
            }

            .soft-text {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0 20px;
            }

            .soft-text .text-box {
                height: auto;
                max-width: auto;
                width: 100%;
                margin: 5px 0;
            }

            .soft-text .text-box .soft {
                font-size: 18px;
                font-weight: 600;
                color: #1ab1e8;
                margin: 4px;
            }

            .soft-text .text-box textarea {
                height: 65px;
                width: 300px;
                padding: 20px;
                font-size: 15px;
                font-weight: 400;
                outline: none;
                border: 1px solid #1ab1e8;
                border-radius: 8px;
                background: #ceccf0;
            }

            .text-box textarea::-webkit-scrollbar {
                display: none;
            }

            .soft-text .text-box button {
                height: 45px;
                width: 155px;
                color: #fff;
                background: #0f06bd;
                outline: none;
                border: none;
                border-radius: 8px;
                font-size: 17px;
                font-weight: 400;
                margin: 8px 0;
                cursor: pointer;
                transition: all 0.4s ease;
            }

            .soft-text .text-box button:hover {
                background: #0e4bf1;
            }

            @media (max-width: 400px) {
                .soft-text .text-box button {
                    width: 100%;
                }
            }

            #HTMLButton {
                left: 11.62px;
                position: relative;
                top: 100%;
                width: 200px;
            }

            .container {
                position: relative;
                text-align: center;
                color: white;
             }

            .centered {
                position: absolute;
                top: 10%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .button {
                background-color: white;
                color: black;
                border: 2px solid #4CAF50;
                border: none;
                color: white;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                transition-duration: 0.4s;
                cursor: pointer;
            }

            .button1 {
                background-color: #675546;
                color: white;
                border: 2px solid #675546;
            }

            .button1:hover {
                background-color: #4CAF50;
                color: white;
                border: 2px solid #4CAF50;

            }

            * {
                box-sizing: border-box;
            }

            .column {
                float: left;
                width: 33.33%;
                padding: 5px;
            }

            /* Clearfix (clear floats) */

            .row::after {
                content: "";
                clear: both;
                display: table;
            }
        </style>
    </head>

    <body>
        <p style="text-align: center;"><a href="https://farmfoodsmarket.com/pages/subscription-page" target="_blank" title="That page is not found, why not try FarmFoods Subscription Boxes instead? :)" rel="noopener noreferrer"><img style="width: 100%;" src="https://cdn.shopify.com/s/files/1/2255/3255/files/Farm_Foods_Branded-404_1920x1080_2.jpg?v=1659626921" alt="This page is not available, let's be friends instead :)" /></a></p>

            <h2 style="text-align: center;">Uh oh! [This brand website] is currently under construction.</h2>
        </p>
        <p style="text-align: center;">If you need to speak to a Customer Support representative about a past order, please email us at support@brandwebsite.com.
<br></br>
<p style="text-align: center;">You can still reading our blog. <a title="Impact The World - Farm Foods Market Blog" href="https://brandwebsite.com/blogs/news">See our posts here.</a>👈<br /> Have questions? <a onclick="GorgiasChat.open();">Click here to start a chat with our team</a> 💬</p>
            </div>
<br></br>                    
<p style="text-align: center;"><big>DID YOU KNOW?</big> [Brand Name] has over <strong>6,000+ Facebook Page likes</strong> and <strong>400+ verified reviews!</strong>             Like our page and show us some love!</p>
                        <p style="text-align: center;"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2FFarmFoodsMarket&width=450&layout=standard&action=recommend&size=small&share=false&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe></p>
    </body>
    </html>
</header>
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Store Paused 404 Page Template [WIP]

  • Archivos
  • Index
  • Style
  • Script
  • README
  • CDN Agregar
HTML

<!-- /templates/404.liquid -->

<header class="section-header section-header--404 text-center"> <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <style>
        /* Google Font CDN Link */

        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }

        .soft-text {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 20px;
        }

        .soft-text .text-box {
            height: auto;
            max-width: auto;
            width: 100%;
            margin: 5px 0;
        }

        .soft-text .text-box .soft {
            font-size: 18px;
            font-weight: 600;
            color: #1ab1e8;
            margin: 4px;
        }

        .soft-text .text-box textarea {
            height: 65px;
            width: 300px;
            padding: 20px;
            font-size: 15px;
            font-weight: 400;
            outline: none;
            border: 1px solid #1ab1e8;
            border-radius: 8px;
            background: #ceccf0;
        }

        .text-box textarea::-webkit-scrollbar {
            display: none;
        }

        .soft-text .text-box button {
            height: 45px;
            width: 155px;
            color: #fff;
            background: #0f06bd;
            outline: none;
            border: none;
            border-radius: 8px;
            font-size: 17px;
            font-weight: 400;
            margin: 8px 0;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .soft-text .text-box button:hover {
            background: #0e4bf1;
        }

        @media (max-width: 400px) {
            .soft-text .text-box button {
                width: 100%;
            }
        }

        #HTMLButton {
            left: 11.62px;
            position: relative;
            top: 100%;
            width: 200px;
        }

        .container {
            position: relative;
            text-align: center;
            color: white;
         }

        .centered {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .button {
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
        }

        .button1 {
            background-color: #675546;
            color: white;
            border: 2px solid #675546;
        }

        .button1:hover {
            background-color: #4CAF50;
            color: white;
            border: 2px solid #4CAF50;

        }

        * {
            box-sizing: border-box;
        }

        .column {
            float: left;
            width: 33.33%;
            padding: 5px;
        }

        /* Clearfix (clear floats) */

        .row::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>

<body>
    <p style="text-align: center;"><a href="https://farmfoodsmarket.com/pages/subscription-page" target="_blank" title="That page is not found, why not try FarmFoods Subscription Boxes instead? :)" rel="noopener noreferrer"><img style="width: 100%;" src="https://cdn.shopify.com/s/files/1/2255/3255/files/Farm_Foods_Branded-404_1920x1080_2.jpg?v=1659626921" alt="This page is not available, let's be friends instead :)" /></a></p>
    <p style="text-align: center;"><a title="Browse our best sellers here" href="https://farmfoodsmarket.com/collections/all?sort_by=best-selling" target="_blank"><button class="button button1">SHOP BEST SELLERS</button></a></p>

    <p>
        <h2 style="text-align: center;">LOOKING FOR SOMETHING ELSE?</h2>
    </p>
    <p style="text-align: center;">Enter your keywords below then press enter.
        <div id="search-bar" style="text-align: center;">
            <form action="/search" method="get">
                <p style="text-align: center;"><input id="q" name="q" type="text" placeholder="Enter your keywords here" /></p>
            </form>
            <p style="text-align: center;">Reading our blog? <a title="Impact The World - Farm Foods Market Blog" href="https://farmfoodsmarket.com/blogs/news">See our posts here.</a>👈<br /> Have questions? <a onclick="GorgiasChat.open();">Click here to start a chat with our team</a> 💬</p>
        </div>
        <p style="text-align: center;">Like our page and show us some love!</p>
        <h2 style="text-align: center;">NEW TO FARM FOODS?</h2>
        <p style="text-align: center;">Shop with confidence at Farm Foods Market. Apply a 10% discount on your cart when you use the code <em><strong>FARMFOODSFRIEND</strong></em> on your purchase today!<button onclick="AdvancedCopy()">👉 CLICK TO COPY CODE TO CLIPBOARD</button></p>
            <p style="text-align: center;">
                <script>
                    function AdvancedCopy() {
                        //the text that is to be copied to the clipboard
                        var theText = "FARMFOODSFRIEND"

                        //create our hidden div element
                        var hiddenCopy = document.createElement("div")
                        //set the innerHTML of the div
                        hiddenCopy.innerHTML = theText
                        //set the position to be absolute and off the screen
                        hiddenCopy.style.position = "absolute"
                        hiddenCopy.style.left = "-9999px"

                        //check and see if the user had a text selection range
                        var currentRange
                        if (document.getSelection().rangeCount > 0) {
                            //the user has a text selection range, store it
                            currentRange = document.getSelection().getRangeAt(0)
                            //remove the current selection
                            window.getSelection().removeRange(currentRange)
                        } else {
                            //they didn't have anything selected
                            currentRange = false
                        }

                        //append the div to the body
                        document.body.appendChild(hiddenCopy)
                        //create a selection range
                        var CopyRange = document.createRange()
                        //set the copy range to be the hidden div
                        CopyRange.selectNode(hiddenCopy)
                        //add the copy range
                        window.getSelection().addRange(CopyRange)

                        //since not all browsers support this, use a try block
                        try {
                            //copy the text
                            document.execCommand("copy")
                        } catch (err) {
                            window.alert("Your Browser Doesn't support this! Error : " + err)
                        }
                        //remove the selection range (Chrome throws a warning if we don't.)
                        window.getSelection().removeRange(CopyRange)
                        //remove the hidden div
                        document.body.removeChild(hiddenCopy)

                        //return the old selection range
                        if (currentRange) {
                            window.getSelection().addRange(currentRange)
                        }
                    }
                </script>
                <p style="text-align: center;"><big>DID YOU KNOW?</big> Farm Foods Market has over <strong>6,000+ Facebook Page likes</strong> and <strong>400+ verified reviews!</strong>
                    <a title="Buy at Farm Foods Market" href="https://farmfoodsmarket.com/collections/all"></p>
                    <p style="text-align: center;"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ffacebook.com%2FFarmFoodsMarket&width=450&layout=standard&action=recommend&size=small&share=false&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe></p>
                <div style="text-align: center;" data-oke-badge="" data-oke-layout="large" data-oke-color-scheme="custom" data-oke-background-color="#2a2a29" data-oke-border-color="#000000" data-oke-text-color="#FFFFFF" data-oke-url="https://farmfoodsmarket.com/pages/reviews" data-oke-star-foreground-color="#E88597" data-oke-star-background-color="#E5E5E5" data-oke-star-border-enabled="false"> </div>
                <p style="text-align: center;">{% render 'okendo-reviews-widget', product: product %}</p>

                <div>
                    <p>
                        <h2 style="text-align: center;">BROWSE BY TYPE -
                            <font-size:40px;>Shop your Farm Foods need in one go.</h2>
                        <div class="row">
                            <div class="column">
                                <p><a href="https://www.farmfoodsmarket.com/collections/beef?display=list&sort=best-selling" target="_blank" title="Shop Beef Products" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/2255/3255/files/Beef_Best_Sellers_-_Farm_Foods.jpg?v=1659710917" alt="Shop Beef Products" style="width:100%" /></a></p>
                                <a title="Shop Beef Products" href="https://www.farmfoodsmarket.com/collections/beef?display=list&sort=best-selling" target="_blank">Beef</a>
                            </div>
                            <div class="column">
                                <p><a href="https://www.farmfoodsmarket.com/collections/pork?display=list&sort=best-selling" target="_blank" title="Shop Pork Products" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/2255/3255/files/Pork_Best_Sellers_-_Farm_Foods.jpg?v=1659710917" alt="Shop Pork Products" style="width:100%" /></a></p>
                                <a title="Shop Pork Products" href="https://www.farmfoodsmarket.com/collections/pork?display=list&sort=best-selling" target="_blank">Pork</a>
                            </div>
                            <div class="column">
                                <p><a href="https://www.farmfoodsmarket.com/collections/poultry?display=list&sort=best-selling" target="_blank" title="Shop Chicken Products" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/2255/3255/files/Chicken_Best_Sellers_-_Farm_Foods.jpg?v=1659710917" alt="Shop Chicken Products" style="width:100%" /></a></p>
                                <a title="Shop Chicken Products" href="https://www.farmfoodsmarket.com/collections/poultry?display=list&sort=best-selling" target="_blank">Chicken</a>
                            </div>
                        </div>

                        <div class="row">
                            <div class="column">
                                <p><a href="https://www.farmfoodsmarket.com/collections/fish?display=list&sort=best-selling" target="_blank" title="Shop Fish Products" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/2255/3255/files/Fish_Best_Sellers_-_Farm_Foods.jpg?v=1659710917" alt="Shop Fish Products" style="width:100%" /></a></p>
                                <a title="Shop Fish" href="https://www.farmfoodsmarket.com/collections/fish?display=list&sort=best-selling" target="_blank">Fish</a>
                            </div>
                            <div class="column">
                                <p><a href="https://www.farmfoodsmarket.com/collections/box-plans?display=list&sort=best-selling" target="_blank" title="Shop Box Plans Products" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/2255/3255/files/Box_Plans_-_Farm_Foods_Market_v1A.jpg?v=1659795627" alt="Shop Box Plans Products" style="width:100%" /></a></p>
                                <a title="Shop Box Plans" href="https://www.farmfoodsmarket.com/collections/box-plans?display=list&sort=best-selling" target="_blank">Box Plans</a>
                            </div>
                            <div class="column">
                                <p><a href="https://www.farmfoodsmarket.com/collections/value-packs?display=list&sort=best-selling" target="_blank" title="Shop Value Packs Products" rel="noopener noreferrer"><img src="https://cdn.shopify.com/s/files/1/2255/3255/files/Value_Packs_-_Farm_Foods_Market_v2.jpg?v=1659795627" alt="Shop Value Packs" style="width:100%" /></a></p>
                                <a title="Shop Value Packs" href="https://www.farmfoodsmarket.com/collections/value-packs?display=list&sort=best-selling" target="_blank">Value Packs<br /></a>
                                <a title="Shop Value Packs" </div>
                                    <p></p>
                            </div>
</body>
{% comment %}
<h2>WE THINK YOU'LL LIKE THESE</h2>
<div data-rebuy-id="47835" data-rebuy-shopify-product-ids="{{ product.id }}"></div>
{% endcomment %}
</html>

</header>

PLEASE WAIT...