Add Copy URL button to the Wishlist Share dialog/popup

A useful feature that can be added to the Wishlist share dialog/modal/popup is a Copy URL button. Upon clicking it, the Wishlist URL would automatically be shared to the clipboard of users’ computer/device. This speeds up manual sharing of Wishlist.

This is how it looks like. You can always modify its appearance.


1. Create a new snippet titled wishlist-enhancements. It creates the file snippets/wishlist-enhancements.liquid. If this file already exists, skip this step.

2. Add the following code to it.

{% unless template %}
<!-- Begin Smart Wishlist Callback -->
<script type="text/javascript">
$("#wishlist_share_modal").find(".modal-footer").prepend('<button type="button" class="btn btn-info btn-info-modal" id="copyclipboard" style="background-color:blue;border-color:blue;color:#fff">Copy URL to clipboard</button>');

$("body").on("click","#copyclipboard", function(){	
	var $temp = $("<input>");
    var temp_share_button_title=$(this).html();
    $(this).html("URL Copied!"); //text to be displayed after URL copied
    setTimeout(function() {
    .catch((error) => { alert(`Copy failed! ${error}`) })
<!-- End Smart Wishlist Callback -->
{% endunless %}

3. Add the following code anywhere before closing </head> in layout/theme.liquid. If already added, you can skip this step.

{% include 'wishlist-enhancements' %} 

Leave a Reply

Your email address will not be published. Required fields are marked *