How to create a Modal Popup Sizing Chart (or popup iframe/youtube video)

MilesbdMilesbd Posts: 2Lightspeed Staff Lightspeed
edited February 6 in Customizations

Adding in a sizing chart when selling an item is a great way to allow customers to know what they can expect to receive, and ensure that they're satisfied with what they're purchasing. It also shows that you're going the extra step to provide them with excellent customer service, and an excellent shopping experience.

A video of your products is a great way to get potential customers to visualize the item, and also get an idea of all the features it has. It goes beyond a static picture to allow a customer to really engage with what you're selling.

This article is intended to be used by anyone seeking to go the extra step to provide a unique and engaging shopping experience. It details how to embed a sizing chart image or iframe video into a popup using a combination of Javascript, CSS, and HTML. It was designed to work with the conform Plus theme, and may require some adjustments to work with other themes.

An example of the button on a page:

button


An example of the popup:

Popup

Resources:

 

  1. This code is simultaneously the popup and the button, however the popup is hidden by default in by the CSS we'll be adding in the next step. Find the place you want to add it on the product's content section, and then add the following to that section of the page, replacing the URL of the image or the iframe code that you want to include (don't forget to save changes!):
    <!-- The size chart button -->
    <div id="SizeChart" title="Size Chart">Size Chart</div>
     
     
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <i class="material-icons closeModal" id="closeModal"> cancel </i>
     
     
        <!-- Insert an image (sample size chart used) -->
        <img id="img01" class="modal-content" src="https://cdn.webshopapp.com/shops/270631/files/253689506/size-chart-apparel-m-f13.jpg" />
         
        <!-- Insert an iframe (sample Youtube video used) If adding video, remove the comments "<!--   -->" and add the 'class="modal-content"' to the code -->
        <!--<iframe class="modal-content" width="560" height="315" src="https://www.youtube.com/embed/UQn2aeEAixY?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe>-->
     
     
        <!-- The caption to the chart (optional, if you want to not use it, simply omit this line -->
        <div id="caption">INSERT CAPTION HERE</div>
    </div>

    When Finished, it should look like this: 
  2. This CSS would be added to Design > Theme Editor > Theme Settings > Custom CSS. This CSS controls the styling and layout of the Button, along with the popup. Modify as you like, as it is annotated in some sections (don't forget to save changes!).
    /* MODAL  ,Begin*/
    /* Styling the Button */
    #SizeChart {
      cursor: pointer;
      transition: 0.3s;
      color: #333;
      background-color: #fff;
      max-width: 150px;
      text-align: center;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 5px !important;
    }
    #SizeChart:hover {
      opacity: 0.7;
      /*filter: invert(100%);*/ /*Invert Button Colors on Hover*/
    }
     
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 999999; /* Sit on top */
      padding-top: 2%; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    }
     
    /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
    }
     
    /* Caption of Modal Image */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
    }
     
    /* Add Animation */
    .modal-content, #caption { 
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
    }
     
    @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)}
      to {-webkit-transform:scale(1)}
    }
     
    @keyframes zoom {
      from {transform:scale(0)}
      to {transform:scale(1)}
    }
     
    /* The Close Button */
    .closeModal {
      position: absolute;
      top: 1%;
      right: 1%;
      color: #f1f1f1;
      transition: 0.3s;
    }
     
    .closeModal:hover,.closeModal:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
     /* Modal End*/
  3. Lastly, we'll need to add a bit of javascript to control the display/hiding of the popup. This will be added in Settings > Web Extras > Custom JS (don't forget to save changes!):
    <script>
    // Add the google material icons stylesheet
     
    $(document).ready(function() {
    $('head').append('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">');
    });
     
    // Show the modal when the user clicks on the size chart button
    $('#SizeChart').click(function(){
      $('#myModal').show();
    });
     
    // Get the <i> element that closes the modal
    var icon = $('#closeModal')[0];
     
    // When the user clicks on <i>, close the modal
    icon.onclick = function(){
      $('#myModal').hide();
    }
    </script>
    It should look like: 
  4. That's it! Visit your product page to see the results!
Post edited by Milesbd on
Sign In or Register to comment.