Opening a PDF / image file metafield as a pop-up in product page

[itspriyanka]

Hi,

I have a store that sells curtains. I would like to show the installation instructions on every product page. This information would be different for different types of curtains so I have created a metafield which accepts a file. I can have the file as a PDF (preferable) or an image. I do not want a page here because I would like it visually appealing with images etc. I am on Prestige theme which allows a modal block in the product page or liquid block as well. However, modal block takes only text metafields. This is the code I am using in liquid block:

{% if product.metafields.custom.curtain_size_installation_guide != blank %}
<a href="{{ product.metafields.custom.curtain_size_installation_guide | file_url }}" style="color: #f44343;" target="_blank">
Download Installation Guide
</a>
{% endif %} 

This opens the PDF / image in a new tab, as expected. 

Is there a way I can have the PDF / image open in a pop-up / modal?

Looking forward to any guidance.

Thanks in advance,

Priyanka

[EasifyApps · Accepted solution]

Hi @itspriyanka,

For your needs, check out the Modal option type in the free Easify Product Options app. It lets you create clickable links that open pop-ups on your product page. You can include text or images in the pop-up content.

Below is an example 🤗:

• Storefront:

• App settings:

[itspriyanka]

This works perfectly @EasifyApps . Infact it works for both my size chart and custom add-on options. 

Thanks a ton!

Priyanka

[EasifyApps]

Thank you for trying out our app! If you come across any issues while setting up your options, feel free to reach out to the Easify team via the in-app live chat 😊.