Positioning Shopify Buy Button for Products

Hello,

I'm currently building out an e-commerce website for our fashion boutique and we're finalizing some technicalities. We currently use Shopify as our inventory database (because Stripe sucks) and we display our product via Squarespace. I've linked each product with an individual Shopify buy button, adding the code to the product's "Additional Information" section. Everything is smooth and the checkout process has no problems, but the biggest problem is the spacing between the description of the product & the positioning of the buy button. You can clearly see it in the screenshots. 

Is there a way I can pad the code to move it up or add the code in a way to have the Shopify buy button directly under the product description?
Adding spacers and other blocks do not help.

Thank you!

I have the same problem at the moment. Would be nice if somebody could offer help here. 🙂

Can you share link to product in screenshot? I can take a look

I have exactly the same question. Is it still possible to get the answer? @tuanphan Thank you in advance!

9 minutes ago, Ntb said:

I have exactly the same question. Is it still possible to get the answer? @tuanphan Thank you in advance!

 

Difficult to help without checking product page url

9 minutes ago, tuanphan said:

Difficult to help without checking product page url

One of the product pages I need some help with - https://www.aosjewels.com/test-store/extra-ordinary-4kfye

5 minutes ago, Ntb said:

One of the product pages I need some help with - https://www.aosjewels.com/test-store/extra-ordinary-4kfye

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  // move shopify to product description
  // checked by tuan phan squarespace forum
$(document).ready(function() {
$('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
});
</script>

6 minutes ago, tuanphan said:

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
});
</script>

 

Thank you, the button has moved but not yet to the right place. Is it possible to place the button under the price?

1 minute ago, Ntb said:

Thank you, the button has moved but not yet to the right place. Is it possible to place the button under the price?

 

and add this to Home > Design > Custom CSS

section.ProductItem-details .code-block {
    order: 4;
}

5 minutes ago, tuanphan said:

and add this to Home > Design > Custom CSS

section.ProductItem-details .code-block {
    order: 4;
}

 

Thank you for the help! it worked!

I've tried following this but no luck, any recommendations as to what i'm missing would be appreciated, thank you!

https://haveyouheard.squarespace.com/shop/country-feast-set-872f8 (pw: hyh)

On 6/3/2020 at 3:40 PM, HYH said:

I've tried following this but no luck, any recommendations as to what i'm missing would be appreciated, thank you!

https://haveyouheard.squarespace.com/shop/country-feast-set-872f8 (pw: hyh)

Above link doesn't exits. Can you check url again?

On 4/25/2020 at 6:20 PM, tuanphan said:

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  // move shopify to product description
  // checked by tuan phan squarespace forum
$(document).ready(function() {
$('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
});
</script>

Hi there! I'm trying to do the same thing on my web, actually it worked but now I don't have any idea why it doesn't. I need to move the shopify button over the share buttons:

It's not working, I think it has something to do with the second part of the code. I've put this on the append part: "TEST" to check if JS was working, and it worked perfect:

But, It doesn't work with the shopify button. The page is: https://www.libeluladesol.cl/disenos/martina-ljbs3 (pw: Gabriel2020 )

I've really appreciated your help!

55 minutes ago, Soredadux said:

It's not working, I think it has something to do with the second part of the code. I've put this on the append part: "TEST" to check if JS was working, and it worked perfect:

But, It doesn't work withthe shopify button. The page is: https://www.libeluladesol.cl/disenos/martina-ljbs3 (pw: Gabriel2020 )

I've really appreciated your help!

Remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, () => {
  $('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
}); 
</script>

16 minutes ago, tuanphan said:

Remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, () => {
  $('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
}); 
</script>

OMG It works!!!!! THANKS A LOT!!!

20 minutes ago, tuanphan said:

Remove above & use this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, () => {
  $('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));
}); 
</script>

Noup, false alarm, it worked, but only on the edition mode. If I opened a new window, like a client, It doesn't appear the shopify button.

The codes for positioning the buy buttons  worked great for me, thanks! 

Only doesn't work for Chrome browser, here you need to refresh the page a couple of times before showing the buy button. Is there some code to resolve this problem?  I've turned off the Ajax loading already. 

Works great on other browsers and mobile! 

Webpage: https://studioroem.squarespace.com/shop/sleutelhouder-zwart

Thanks in advance! 

Kind regards, 

Jeroen

@tuanphan following our messages we have managed to remove the squarespace add to cart

We then tried the above code in the footer code injection and have managed to get the shopify button above the name of the product however we would like it to be under the price. We tries using the code you put above for someone else but it does not work for us. 

Can you help with this please? Thank you 

@tuanphan this is the one x

On 7/29/2020 at 12:45 PM, Jeroen90 said:

The codes for positioning the buy buttons  worked great for me, thanks! 

Only doesn't work for Chrome browser, here you need to refresh the page a couple of times before showing the buy button. Is there some code to resolve this problem?  I've turned off the Ajax loading already. 

Works great on other browsers and mobile! 

Webpage: https://studioroem.squarespace.com/shop/sleutelhouder-zwart

Thanks in advance! 

Kind regards, 

Jeroen

Which code did you end up using? None of them are working for me 😞

Using the code snippets in this thread may slow down your website because they rely on jQuery, an open-source JavaScript library which is large and must be loaded before the code snippet will run.

It's also worth remembering that when you are using Shopify Buy Buttons your site will already be slower than a standard Squarespace Commerce site because you are loading your Squarespace site first, followed by the code for the Shopify buy button and the Shopify cart and, if you've used one of these snippets, the jQuery code too.

If you'd prefer a solution that doesn't rely on jQuery you can buy a professionally written extension from us. It comes with detailed guidance and full support.

For further information, reach out to presales support.

On 8/21/2020 at 12:22 AM, steamchamberdesign said:

Which code did you end up using? None of them are working for me 😞

None, I'm creating all products on Shopify, and I'm posting the code on Aditional Info with all the info from Shopify: Name Product, Price, Description, Add to cart. All the info from Product from Squarespace is hidden, and the only thing that shows is the code from de Shopify Button. Hope it works for you!

On 7/29/2020 at 12:45 PM, Jeroen90 said:

The codes for positioning the buy buttons  worked great for me, thanks! 

Only doesn't work for Chrome browser, here you need to refresh the page a couple of times before showing the buy button. Is there some code to resolve this problem?  I've turned off the Ajax loading already. 

Works great on other browsers and mobile! 

Webpage: https://studioroem.squarespace.com/shop/sleutelhouder-zwart

Thanks in advance! 

Kind regards, 

Jeroen

Hi! Did you solved the refresh problem? I'm dealing with the same issue, I thougth it may be Ajax, but I turn it off and keep happening. Thanks!

12 hours ago, Soredadux said:

Hi! Did you solved the refresh problem? I'm dealing with the same issue, I thougth it may be Ajax, but I turn it off and keep happening. Thanks!

I soved for her.

Use this code

<!-- Add this code above shopify code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));  
</script>
<!-- Add this code above shopify code -->
<div id="product-component-1596023449553" class="shopify-buy-frame shopify-buy-frame--product shopify-buy__layout-vertical" style="max-width: 280px;"><iframe horizontalscrolling="no" verticalscrolling="no" allowtransparency="true" frameborder="0" scrolling="no" name="frame-product-5543473905830" style="width: 100%; overflow: hidden; border: none; height: 103px;"></iframe></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }
  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }
  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'studio-roem-shop.myshopify.com',
      storefrontAccessToken: '0626cc004628f81259c85023f2ace52e',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '5543473905830',
        node: document.getElementById('product-component-1596023449553'),
        moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-family": "Raleway, sans-serif",
        "font-weight": "bold",
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px",
        ":hover": {
          "background-color": "#be9f4f"
        },
        "background-color": "#d3b158",
        ":focus": {
          "background-color": "#be9f4f"
        },
        "border-radius": "25px"
      },
      "quantityInput": {
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px"
      }
    },
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "BESTEL NU"
    },
    "googleFonts": [
      "Raleway"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-family": "Raleway, sans-serif",
        "font-weight": "bold",
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px",
        ":hover": {
          "background-color": "#be9f4f"
        },
        "background-color": "#d3b158",
        ":focus": {
          "background-color": "#be9f4f"
        },
        "border-radius": "25px"
      },
      "quantityInput": {
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px"
      }
    },
    "googleFonts": [
      "Raleway"
    ],
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-family": "Raleway, sans-serif",
        "font-weight": "bold",
        "font-size": "16px",
        "padding-top": "16px",
        "padding-bottom": "16px",
        ":hover": {
          "background-color": "#be9f4f"
        },
        "background-color": "#d3b158",
        ":focus": {
          "background-color": "#be9f4f"
        },
        "border-radius": "25px"
      },
      "title": {
        "color": "#363636"
      },
      "header": {
        "color": "#363636"
      },
      "lineItems": {
        "color": "#363636"
      },
      "subtotalText": {
        "color": "#363636"
      },
      "subtotal": {
        "color": "#363636"
      },
      "notice": {
        "color": "#363636"
      },
      "currency": {
        "color": "#363636"
      },
      "close": {
        "color": "#363636",
        ":hover": {
          "color": "#363636"
        }
      },
      "empty": {
        "color": "#363636"
      },
      "noteDescription": {
        "color": "#363636"
      },
      "discountText": {
        "color": "#363636"
      },
      "discountIcon": {
        "fill": "#363636"
      },
      "discountAmount": {
        "color": "#363636"
      }
    },
    "text": {
      "title": "Winkelwagen",
      "total": "Subtotaal",
      "empty": "Jouw winkelwagen is leeg.",
      "notice": "Verzending binnen Nederland is gratis! ",
      "button": "Afrekenen",
      "noteDescription": "Opmerking bestelling:"
    },
    "popup": false,
    "googleFonts": [
      "Raleway"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Raleway, sans-serif",
        "font-weight": "bold",
        "background-color": "#d3b158",
        ":hover": {
          "background-color": "#be9f4f"
        },
        ":focus": {
          "background-color": "#be9f4f"
        }
      },
      "count": {
        "font-size": "16px"
      }
    },
    "googleFonts": [
      "Raleway"
    ]
  },
  "lineItem": {
    "styles": {
      "variantTitle": {
        "color": "#363636"
      },
      "title": {
        "color": "#363636"
      },
      "price": {
        "color": "#363636"
      },
      "fullPrice": {
        "color": "#363636"
      },
      "discount": {
        "color": "#363636"
      },
      "discountIcon": {
        "fill": "#363636"
      },
      "quantity": {
        "color": "#363636"
      },
      "quantityIncrement": {
        "color": "#363636",
        "border-color": "#363636"
      },
      "quantityDecrement": {
        "color": "#363636",
        "border-color": "#363636"
      },
      "quantityInput": {
        "color": "#363636",
        "border-color": "#363636"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

here

<!-- Add this code above shopify code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $('section.ProductItem-details').append($('section.ProductItem-additional .code-block'));  
</script>
<!-- Add this code above shopify code -->

Can you please help @tuanphan? I want to put our Shopify buy buttons directly beneath the product title of all of our products. Or it can be just below the price; that can work, but prefer it to  We are using Squarespace 7.1. Here is a URL to one of our product pages.

https://herbspice.com/store/p/1-jar-herbspice-everything-savory-seasoning

You will still see the Squarespace Add to Cart button because I haven’t removed it as yet. I think I have a code for that, but please let me know if you have a better one. This is the code I have and I tested it and it worked.

/* ----------------- ultra-fresh "ORDER INTERFACE Be-Gone"  ----------------- /

/*  add "hideorder" tag to any page to remove dropdown, quantity, and order button  */

/*  remove select size dropdown  */

article .tag-hideorder .variant-option {

    display: none;

}

/*  remove quantity dropdown  */

article .tag-hideorder .product-quantity-input {

    display: none;

}

/*  remove order button  */

article .tag-hideorder .sqs-add-to-cart-button-wrapper {

    display: none;

}

Lastly, I want to have the quantity on the Shopify Buy Button to show on the left side instead of on top of the Add to Cart button. Do you know how to make this change? I have included a picture of how it displays on one of the pages I was experimenting with.

Thanks very much!