Hey! I totally get what you’re trying to do and why the current solution isn’t working for you. You want the same popup functionality but using metafields for product info images just like you have for the size chart. Here’s how to modify the code to make it work:
Step 1: Create the metafields
First, you’ll need two metafields in your Shopify admin:
- One for size chart (sounds like you already have this)
- One for product info
Go to Settings > Metafields > Products and create:
- Namespace: custom, Key: size_chart, Type: File
- Namespace: custom, Key: product_info, Type: File
Step 2: Create a new snippet
Create a file called product-info-popup.liquid in your snippets folder and add this code:
{% if product.metafields.custom.product_info %}
<style>
.productinfo-button {
margin-left: auto;
font-size: 1em;
color: #000;
cursor: pointer;
transition: all 0.3s ease-out;
text-decoration: underline;
display: block;
margin-bottom: 10px;
}
.productinfo-button:hover {
color: #666;
}
#productinfo.overlay {
position: fixed;
z-index: 9999;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#productinfo.overlay:target {
visibility: visible;
opacity: 1;
}
#productinfo .popup {
margin: 70px auto;
background: #fff;
border-radius: 5px;
width: 80%;
max-width: 600px;
position: relative;
transition: all 0.3s ease-in-out;
}
#productinfo .popup img {
width: 100%;
height: auto;
border-radius: 2px;
}
#productinfo .popup .close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: #000;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-size: 20px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
#productinfo .popup .close:hover {
background: #666;
}
@media screen and (max-width: 700px) {
#productinfo .popup {
width: 95%;
margin: 20px auto;
}
}
</style>
<a class="productinfo-button" href="#productinfo">Product Information</a>
<div id="productinfo" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<img src="{{ product.metafields.custom.product_info | img_url: 'master' }}" alt="Product Information">
</div>
</div>
{% endif %}
Step 3: Update your existing size chart code
Make sure your size chart button and popup have unique IDs. Your size chart popup should use #sizechart and the product info should use #productinfo (different IDs so they don’t conflict).
Step 4: Add both snippets to your product template
In your product template file (usually product.liquid or product-form.liquid), add both snippets where you want the buttons to appear:
{% render 'size-chart-popup' %}
{% render 'product-info-popup' %}
Step 5: Upload your images
Go to each product in your admin, scroll down to metafields, and upload:
- Your size chart image to the size_chart metafield
- Your product info image to the product_info metafield
The key differences from what you tried before:
- Each popup has completely unique IDs (
#sizechart vs #productinfo)
- Both use the same metafield structure you’re already familiar with
- The CSS is scoped to each specific popup so they don’t interfere with each other
- Each only shows if the metafield has content
This way you can assign different images to different products through metafields without having to mess with code for each product. Just upload the images in the admin and they’ll automatically show up with the popup functionality.
Let me know if you run into any issues with this setup!
Cheers!
Shubham | Untechnickle
