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

Solved

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

itspriyanka
Shopify Partner
52 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
635 19 52

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 Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support

View solution in original post

Replies 3 (3)

EasifyApps
Shopify Partner
635 19 52

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 Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support
itspriyanka
Shopify Partner
52 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
635 19 52

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 Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support