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
  • Views 688
  • Created
  • Last Reply

Top Posters In This Topic

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.