Jump to content

Custom button in product page not appearing on mobile view (custom code included)

Recommended Posts


I have some custom code added to my website, through code injection on main Store page to affect products where I want to add a button that opens a lightbox with product dimensions. I have that part working almost fully but when I switch to mobile view that trigger disappears. When I look at the HTML I see that a whole new section for the products turns on and replaces it and that doesn't include my custom trigger. I hope someone could help me on this one. 

  document.addEventListener('DOMContentLoaded', function () {
    const productPriceElement = document.querySelector('.variant-option-title');

    if (productPriceElement && isProductPage()) {
      const productDimensionsLink = document.createElement('a');
      productDimensionsLink.href = '/print-dimensions'; // Replace with the URL of your lightbox-specific page
      productDimensionsLink.textContent = 'Product Dimensions';

      productPriceElement.parentNode.insertBefore(productDimensionsLink, productPriceElement);

      productDimensionsLink.addEventListener('click', function (e) {

  function isProductPage() {
    // Get the current page URL
    const currentPageURL = window.location.href;

    // Check if the URL contains the '/store/p/' pattern
    return currentPageURL.includes('/store/p/');

  function loadLightboxContent(url) {
    const lightbox = document.createElement('div');

    const closeButton = document.createElement('span');
    closeButton.innerHTML = '&times;'; // Add 'x' symbol to the close button
    closeButton.addEventListener('click', closeLightbox);


    // Load the content into the lightbox using an iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', 'true');


  function closeLightbox() {
    const lightbox = document.querySelector('.custom-lightbox');
    if (lightbox) {

  /* Style for the lightbox trigger (link) */
  .lightbox-trigger {
    text-decoration: underline;
        font-size: 16px;
 /* Style for the lightbox content (iframe) */
  .custom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

  iframe {
    /* Modify the max-width and max-height properties as needed */
    vertical-align: middle;
    max-width: 95%;
    max-height: 100%;
    width: 600px;
    height: 300px;

  /* Style for the close button */
  .close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 30px;
    color: #fff;






Screenshot 2023-07-26 at 15.13.42.png

Screenshot 2023-07-26 at 15.12.51.png

Photographer and 3D Animation Artist - https://boyangeorgiev.com/

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

It's not that it's gone, it's that your code doesn't run on mobile

Here is code structure on desktop


here is code structure on mobile, no lightbox-trigger tag


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.