Restaurant Online Order popup

Alex

MD developer
Messages
4,959
Reaction score
1,176
Thought I'd share something I made today using MD Optins and some helper classes. Check out what happens when you click "Order Online" at the top right hand side of the WhollyCowBurgers.com restaurant site.

Screen Shot 2020-03-26 at 8.35.04 PM.png

I hope this concept can be useful to some of you, so I pasted the HTML code I used here to create this popup design on the fly. Took about 30minutes total, most of that time spent formatting the DoorDash, Favor, and Uber Eats logos in Photoshop!

Step 1 - create a new popup in MD > Optins > Popups and save it. Now open it and click the "Edit in Customizer" button.

Step 2 - once the popups builder loads, go to Advanced > Enable Custom Template. This totally wipes the canvas clean for you to add your own markup.

Step 3 - here is the HTML I came up with to structure this design (please re-upload your any images you use!)

Popup HTML:
<div class="block-single text-center">
    <div class="popup-box block-double-tb shadow">
        <p class="block-single-lr caps text-sec">Get the cow delivered to your doorstep</p>
        <p class="block-single-lr large-title caps text-center">Order Online</p>
        <p class="mb-mid text-sep micro-text block-full-lr">Wholly Cow has partnered with major food platforms to give you the best delivery experience possible.</p>
        <div class="block-double-lr">
            <div class="columns-2 columns-half columns-flex">
                <div class="col mb-half">
                    <a href="https://www.doordash.com/store/wholly-cow-austin-66677/" class="button button-order doordash" target="_blank"> <span class="button-text">Order online with</span> <img src="https://whollycowburgers.com/wp-content/uploads/2020/03/doordash.png" alt="Order Wholly Cow on DoorDash" /> </a>
                </div>
                <div class="col mb-half">
                    <a href="https://www.ubereats.com/austin/food-delivery/wholly-cow-burgers/0hVSKr5KSsWcTDYhyJQu8w" class="button button-order ubereats" target="_blank"> <span class="button-text">Order online with</span> <img src="https://whollycowburgers.com/wp-content/uploads/2020/03/uber-eats.png" alt="Order Wholly Cow on UberEats" /> </a>
                </div>
                <div class="col mb-half">
                    <a href="https://favordelivery.com/order-delivery/wholly-cow-25/" class="button button-order favor" target="_blank"> <span class="button-text">Order online with</span> <img src="https://whollycowburgers.com/wp-content/uploads/2020/03/favor-logo.png" alt="Order Wholly Cow on Favor" /> </a>
                </div>
            </div>
        </div>
    </div>
</div>


Image 2020-03-26 at 8.36.22 PM.png

Step 3 - I wrote some custom CSS to style this design a little further. You can paste this into the "Template CSS" box below, or wherever you prefer to paste custom CSS:

Popup customized CSS:
/* POPUP */
.popup-box {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
}

.popup-box .button-order {
    font-family: inherit;
    width: 100%;
}

.popup-box .button-text {
    font-size: 19px;
    margin-bottom: 5px;
}

.popup-box .button.doordash { background-color: #FF3008; }
.popup-box .button.doordash img { width: 300px; }

.popup-box .button.ubereats { background-color: #06C167; }
.popup-box .button.ubereats img { width: 300px; }

.popup-box .button.favor { background-color: #00A1DF; }
.popup-box .button.favor img { width: 300px; }

Step 4 - I also used the "Design" tab to upload the background image and change other colors in the popup.

-----

If you thought this was cool, designing beautiful popups without writing any code is possible with the 5 default popup templates and other simple text controls in the Popups builder. This was just a fun exercise of what happens when I needed a dope new popup design quickly, and I am very happy with the results!

Image 2020-03-26 at 8.36.22 PM.png
 
Last edited:
  • Thank you
Reactions: etd

Alex

MD developer
Messages
4,959
Reaction score
1,176
This is beautiful!
...and functional! We haven't been able to track the exact number of orders that have come from this menu but the amount of people who come into the store and mention the website has definitely upticked since implementation. It's so satisfying when the virtual world enhances the real world!
 
  • Like
Reactions: Ray

Flappyfins

MD customer
Messages
16
Reaction score
7
...and functional! We haven't been able to track the exact number of orders that have come from this menu but the amount of people who come into the store and mention the website has definitely upticked since implementation. It's so satisfying when the virtual world enhances the real world!
That's so cool.
I am actually also in the restaurant biz, so in the near future (once I've got the site I'm working on up and running) I will definitely follow suit.
 
Top