Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Positioning Shopify Buy Button for Products


Riccardi

Question

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!

buybutton.JPG

buybutton1.JPG

Link to comment

Recommended Posts

  • 1
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>

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

Screenshot 2020-04-26 at 00.28.29.png

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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:image.thumb.png.485f0b93f5a6376edcda8902de9a89e0.png

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:

image.png.8a41fd0cf8faf65b7bc2c88922c1c2ec.png

image.thumb.png.ec9406f5c86e00ecb826f0006f5e08a1.png

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!

 

 

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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!!!

 

Link to comment
  • 0
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.

 

Link to comment
  • 0

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

Edited by Jeroen90
Link to comment
  • 0

@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 

Link to comment
  • 0
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 😞

Link to comment
  • 0

If you'd prefer a professional solution instead of unreliable, unsupported code snippets, you can buy an extension from us. It comes with detailed guidance and full support.

shopify-buy-button-extension.thumb.png.397000098d46bf7b0828c5e05c3377b2.png

If you need further information, reach out to presales support.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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!

Link to comment
  • 0
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!

Link to comment
  • 0
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 -->

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

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!

Screenshot_1.jpg

Link to comment
  • 0
On 9/24/2020 at 8:01 PM, herbspice said:

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

Did you solve?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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...