Solved

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

itspriyanka
Shopify Partner
42 0 6

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

Accepted Solution (1)

EasifyApps
Shopify Partner
553 16 42

This is an 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:

mmm.png

EasifyApps_0-1714302887754.png

 

  • App settings:

EasifyApps_1-1714302983108.png

EasifyApps_2-1714302994538.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

View solution in original post

Replies 3 (3)

EasifyApps
Shopify Partner
553 16 42

This is an 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:

mmm.png

EasifyApps_0-1714302887754.png

 

  • App settings:

EasifyApps_1-1714302983108.png

EasifyApps_2-1714302994538.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support
itspriyanka
Shopify Partner
42 0 6

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

 

Thanks a ton!

Priyanka

EasifyApps
Shopify Partner
553 16 42

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 😊.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support