Add Size Chart Popup on Product Page of Shopify Store
$5.00
999999 in stock
Description
- Create a product metafield and name it sizechart select type file.
- 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”>×</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 %}
<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 %}
Add Size Chart Popup on Product Page of Shopify Store
Help your customers choose the right size with a Size Chart Popup on your Shopify product pages. This feature allows shoppers to view size information instantly in a popup without leaving the product page, making the buying process smoother and more confident.
A clear and accessible size chart reduces guesswork, improves user experience, and helps lower return rates caused by incorrect sizing—especially important for fashion, apparel, and custom-fit products.
Why Add a Size Chart Popup?
Many customers hesitate to buy when sizing information is hard to find. A size chart popup keeps all essential details just one click away, improving trust and purchase confidence.
Key Benefits
- Display size charts in a clean popup on product pages
- Improves customer confidence in size selection
- Reduces returns due to incorrect sizing
- Keeps shoppers on the product page (no redirects)
- Enhances mobile and desktop user experience
- Works seamlessly with Shopify product pages
- No impact on store performance
What This Solution Helps You Achieve
- Better conversion rates by reducing sizing doubts
- A more professional and user-friendly product layout
- Faster decision-making for customers
- Improved overall shopping experience
Perfect For
- Clothing and fashion stores
- Shoes, activewear, and accessories
- Custom or made-to-order products
- Any Shopify store offering multiple size options
Add a Size Chart Popup to your Shopify product pages and give customers the clarity they need to buy with confidence. A simple improvement that leads to better satisfaction and fewer returns.
