1 1

Add Size Chart Popup on Product Page of Shopify Store

Add Size Chart Popup on Product Page of Shopify Store

$5.00
$5.00
Sale Sold out
Rated 4.9/5 by 43 Happy Customers

Boost your Shopify store with premium code snippets—easy to install, instantly upgrade functionality, and enhance customer experience. Trusted by merchants worldwide. Download now!

54 Downloads

Immediate download.

Only copy & paste code

No monthly fees.

Safe checkout 

View full details

Description

  1. Create a product metafield and name it sizechart select type file.
  2. Create new snippet ‘sizechart’ and paste attached code.
<style>
  .sizeguide-button {
    margin-left: auto;
    font-size: 1em;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease-out;
    text-decoration: underline;
  }
  .sizeguide-button:hover {
    /* text-decoration: none; */
  }
  #sizepopup.overlay {

    position: fixed;
    z-index: 9;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
  }
  #sizepopup.overlay:target {
    visibility: visible;
    opacity: 1;
  }

  #sizepopup .popup {
    margin: 70px auto;
    background: none;
    border-radius: 5px;
    width: 35%;
    position: relative;
    transition: all 5s ease-in-out;
  }
  #sizepopup img {
    border-radius: 2px;
  }

  #sizepopup .popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
  }
  #sizepopup .popup .close {
    position: absolute;
    display: inline;
    top: 4px;
    right: 19px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
  }
  #sizepopup .popup .close:hover {
    color: #d9d2c9;
  }
  #sizepopup .popup .content {
    max-height: 30%;
    overflow: auto;
  }
  #sizepopup table {
    width: -webkit-fill-available;
  }
  #sizepopup table,
  #sizepopup tr,
  #sizepopup th,
  #sizepopup td {
    border: 1px solid;
    border-collapse: collapse;
  }
  #sizepopup tr,
  #sizepopup th,
  #sizepopup td {
    padding: 10px 20px;
  }

  #btn-7893103378606,
  #btn-7893106294958 {
    display: none;
  }
  @media screen and (max-width: 700px) {
    #sizepopup .popup .close {
      top: -8px;
      right: 12px;
    }
    #sizepopup .popup {
      width: 93%;
    }
  }
</style>


<div id="sizepopup" class="overlay">
  <div class="popup">
    <a class="close" href="#">×</a>
    <img src="{{ sizechartImg | image_url }}" width="100%" height="100%">
  </div>
</div>

<!-- Size Guide Button -->
{% if product.metafields.custom.sizechart.value != blank %}
    <a id="btn-{{ product.id }}" class="sizeguide-button">Size Guide</a>
{% endif %}

<!-- Modal Structure -->
<div id="sizepopup" class="overlay">
  <div class="popup">
    <a class="close">&times;</a>
    <img src="{{ sizechartImg | image_url }}" width="100%" height="100%">
  </div>
</div>

<!-- Styles -->
<style>
  .sizeguide-button {
    margin-left: auto;
    font-size: 1em;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease-out;
    text-decoration: underline;
  }
  #sizepopup.overlay {
    position: fixed;
    z-index: 99999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  }
  #sizepopup.show {
    visibility: visible;
    opacity: 1;
  }
  #sizepopup .popup {
    margin: 70px auto;
    background: none;
    border-radius: 5px;
    width: 45%; /* desktop size */
    position: relative;
    transition: all 0.3s ease-in-out;
  }
  #sizepopup .popup .close {
    position: absolute;
    top: 4px;
    right: 19px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
  }
  @media screen and (max-width: 700px) {
    #sizepopup .popup {
      width: 95%;  /* mobile size */
          margin-top: 150px;
    }
  }
</style>

<!-- JavaScript for Modal -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    var modal = document.getElementById("sizepopup");
    var openBtn = document.querySelector(".sizeguide-button");
    var closeBtn = document.querySelector("#sizepopup .close");

    if (openBtn) {
        openBtn.addEventListener("click", function(event) {
            event.preventDefault();
            modal.classList.add("show");
        });
    }

    if (closeBtn) {
        closeBtn.addEventListener("click", function() {
            modal.classList.remove("show");
        });
    }

    // Close modal when clicking outside of it
    window.addEventListener("click", function(event) {
        if (event.target === modal) {
            modal.classList.remove("show");
        }
    });
});
</script>


2. Add below lines of code in main-product.liquid where you want to show size chart clickable link

{% if product.metafields.custom.sizechart.value != blank %}
    <a id="btn-{{ product.id }}" class="sizeguide-button" href="#sizepopup">Size Guide</a>
{% endif %}


3.include below line at the end of main-product.liquid just above schema.

{% render 'sizechart', sizechartImg: product.metafields.custom.sizechart.value %}

Pre-built Sections

VIEW ALL