DEV Community

Zubair Mohsin
Zubair Mohsin

Posted on


Building a Shopify App - Day3

Alrighty, let's kick off Day 3 of the side project.

Few thoughts

  • I want to focus on the major use case of this app which is where end-user ( customer ) interacts with app functionality. Which is a "popup".
  • I have decided to load that functionality inside an iframe so that styles don't conflict and we have full control of the web page being rendered inside iframe.
  • Looked at some inspirations for popup designs and I think, I will go with Intercom messenger popup concept in the beginning. Will refine it later.

Jumping into code...👨🏽‍💻


  • Loaded app functionality inside a iframe. Provided some hardcoded styles for positioning and stuff.
var iframeNode = document.createElement('iframe');
iframeNode.setAttribute('id', 'secret-id'); = 'fixed'; = '100px'; = '20px'; = '376px'; = 2147483000; = '0'; = '360px'; = '704px'; = 'calc(100% - 120px);'

iframeNode.setAttribute('src', '{{route('storefront.popup')}}');
Enter fullscreen mode Exit fullscreen mode
  • Added TailwindCSS to make the popup design. Behold... My popup design 😂 Not even close to Intercom's but the gist 🤷🏻‍♂️ Will improve it later of course. Popup design popup.blade.php
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Discount Popup</title>
    <div class="container bg-purple-600 py-10 px-5">
        <div class="text-white py-5 px-10">
            <h1>Hi 👋</h1>
            <p>Up for a Discount?</p>
        <div class="bg-white py-10 px-5 rounded">
            <div class="mb-3">
                <input type="text" class="border-2 w-full p-1" placeholder="Then enter a secret sauce"/>
            <div class="flex">
                <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">Submit</button>
Enter fullscreen mode Exit fullscreen mode
  • Need to improve upon my CSS skills too 😣
  • Decided to go with Purple as base color for now

Time Spent

1 and half hour ( Damn you popup 😅 )

Signing off 😴


If anybody ( other than me 😂 ) reading it, you might be interested in following me on Twitter. I tweet about Laravel, Shopify and React stuff.

Top comments (4)

mohinpatwary profile image
Mohin patwary

Thank you so much to present it.
Where did you write JavaScript? Then you passed a view file via controller name method storefront.popup creating a route. Could you please share the source code? That will be very helpful. Please sir

zubairmohsin33 profile image
Zubair Mohsin

Will reply you on Twitter DM.

Thanks 👍

wajahatanwar profile image
Wajahat Anwar

Did you embed that popup in the Shopify theme?

zubairmohsin33 profile image
Zubair Mohsin • Edited

Nope. Using ScriptTag API for this. In this app, it is okay for a bit of delay.