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 post
  • Answers 34
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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. If you need fur

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

Did you solve?

Posted Images

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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

Link to post
  • 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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 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, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 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 post
  • 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 post
  • 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 -->

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 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 post
  • 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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...