kelpcreative Posted July 24, 2019 Share Posted July 24, 2019 Hi all,I've a question about integrating Shopify add to cart buttons to Squarespace product pages.I've added Shopify 'add to cart' buttons to product pages. This is one of them: https://www.diestanderbaardkompanjie.co.za/test. (Password: 123456) The code has been generated by Shopify.It works as follows, if someone adds a product to the cart, a cart icon is shown on the right of the screen. The icon will be shown on every page where there's an add to cart button. So if you go to another product page with a similar button the cart icon is visible. However, this means on other pages of the website the cart icon is not visible.My question: is there a way to make the cart icon visible on every page? Shopify support couldn't help me. Bit of same policy as SS, no support on custom code.I do have a workaround direction in mind. If I add the same code snippet to the footer the cart icon is shown on every page. However, this also shows the add to cart button in the footer. Maybe there's a way to enhance the code in such a way that the add to cart button is not shown in the footer? Link to comment
kelpcreative Posted July 24, 2019 Author Share Posted July 24, 2019 Is there a way to use the Code Injection and add the following code to the header or footer without the button showing on the top left? <div id='product-component-7c99128320b'></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: 'die-stander-baard-kompanjie.myshopify.com', storefrontAccessToken: '7be21deb65addf5c0e6e894f71ff2bea', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: [3912100053070], node: document.getElementById('product-component-7c99128320b'), moneyFormat: 'R%20%7B%7Bamount%7D%7D', options: { "product": { "variantId": "all", "width": "240px", "contents": { "img": false, "imgWithCarousel": false, "title": false, "variantTitle": false, "price": false, "description": false, "buttonWithQuantity": false, "quantity": false }, "text": { "button": "VOEG BY TROLLIE" }, "styles": { "product": { "text-align": "left", "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0", "margin-bottom": "50px" } }, "button": { "background-color": "#000000", ":hover": { "background-color": "#000000" }, ":focus": { "background-color": "#000000" }, "font-weight": "normal" }, "variantTitle": { "font-weight": "normal" }, "title": { "font-size": "26px" }, "description": { "font-weight": "normal" }, "price": { "font-size": "18px", "font-weight": "normal" }, "compareAt": { "font-size": "15px", "font-family": "Helvetica Neue, sans-serif", "font-weight": "normal" } } }, "cart": { "contents": { "button": true }, "text": { "title": "Trollie", "total": "SUB TOTAAL", "notice": "Pos en afslagkodes word by die kassier bygevoeg.", "button": "GAAN VOORT MET BETALING", "empty": "Jou trollie is leeg." }, "styles": { "button": { "background-color": "#000000", ":hover": { "background-color": "#000000" }, ":focus": { "background-color": "#000000" }, "font-weight": "normal" }, "footer": { "background-color": "#ffffff" } } }, "modalProduct": { "contents": { "img": false, "imgWithCarousel": true, "variantTitle": false, "buttonWithQuantity": true, "button": false, "quantity": false }, "styles": { "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } }, "button": { "background-color": "#000000", ":hover": { "background-color": "#000000" }, ":focus": { "background-color": "#000000" }, "font-weight": "normal" }, "variantTitle": { "font-weight": "normal" }, "description": { "font-weight": "normal" }, "price": { "font-weight": "normal" }, "compareAt": { "font-family": "Helvetica Neue, sans-serif", "font-weight": "normal" } } }, "toggle": { "styles": { "toggle": { "background-color": "#000000", ":hover": { "background-color": "#000000" }, ":focus": { "background-color": "#000000" }, "font-weight": "normal" } } }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } } } }); }); } })(); /*]]>*/ </script> Link to comment
tuanphan Posted July 24, 2019 Share Posted July 24, 2019 You can use CSS to hide add to card footer. I don't see add to cart footer? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kelpcreative Posted July 24, 2019 Author Share Posted July 24, 2019 @tuanphan thanks for your comment. I injected the code into the 'head' tag. Sorry I'm not that savvy with code so can you please let me know how I would go about using CSS to hide the button on the top left? Thanks Link to comment
tuanphan Posted July 24, 2019 Share Posted July 24, 2019 Can you take screenshot of button which you want to hide? I don' see that button Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kelpcreative Posted July 24, 2019 Author Share Posted July 24, 2019 @tuanphan it's the button and the dropdown that needs to be hidden Link to comment
tuanphan Posted July 24, 2019 Share Posted July 24, 2019 @kelpcreative Try adding to Home > Design > Custom CSS div#product-component-7c99128320b { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kelpcreative Posted July 24, 2019 Author Share Posted July 24, 2019 Magic!! Thanks @tuanphan !! Link to comment
tuanphan Posted July 24, 2019 Share Posted July 24, 2019 @kelpcreative You're welcome. You can click Accept Answer. Other members can use if they know it worked. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Webswool Posted August 12, 2020 Share Posted August 12, 2020 This was so useful! Thanks @tuanphan Link to comment
Sienawalker Posted August 14, 2020 Share Posted August 14, 2020 Jumping in here to say I used this same process - I added my shopify buy button to my footer code injection on my site, then used the css rule provided by @tuanphan and it works great on 7.1 too! https://www.moonlightgardensupply.com/# (note, you have to have products in your cart for it to show up, but once you do, the cart appears on every page without showing the list of products I have hidden in my footer). Thank you! Link to comment
JennieFage Posted August 20, 2020 Share Posted August 20, 2020 Hi! I am trying to also do this but can't seem to get it to work. What buy button did you use the code for just any generic product? Link to comment
JennieFage Posted August 20, 2020 Share Posted August 20, 2020 @tuanphan sorry I am not sure if you would have seen this? Link to comment
tuanphan Posted August 21, 2020 Share Posted August 21, 2020 17 hours ago, JennieFage said: @tuanphan sorry I am not sure if you would have seen this? What is your problem? Can you describe in detail? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JennieFage Posted August 21, 2020 Share Posted August 21, 2020 @tuanphan I wish to have the card button on every page. At the moment it only appears when you are on page that has a product for sale. I have put the buy button code in the footer code injection as mentioned above but the code you provided above does not hide it, I want it hidden so you cannot see it in the footer. Link to comment
JennieFage Posted August 21, 2020 Share Posted August 21, 2020 @tuanphan don't worry we have sorted this. We just need help with the add to cart button location which I have tagged you in on another thread 😊 Link to comment
GretelVause Posted September 18, 2020 Share Posted September 18, 2020 @tuanphan I also tried to put the buy button code in the footer code injection, then used the css rule provided by @tuanphan above but still doesn't hide it as per my uploaded images below "add to cart" button. How can I hide so that you cannot see it in the footer? 🙂 Link to comment
j-l Posted March 21, 2021 Share Posted March 21, 2021 @tuanphan Having the exact same issue as @GretelVause! I copy and pasted the add to cart button code into the footer and after inputting the code that was provided to remove the icon into Custom CSS, unfortunately the icon is still there. Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/21/2021 at 4:21 PM, j-l said: @tuanphan Having the exact same issue as @GretelVause! I copy and pasted the add to cart button code into the footer and after inputting the code that was provided to remove the icon into Custom CSS, unfortunately the icon is still there. Hi. Can you share link to your site? Wee will check again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted July 20, 2021 Share Posted July 20, 2021 On 7/19/2021 at 6:02 AM, chocsandtruffles said: @tuanphan I also tried following the instructions on this page with the footer and css code to display none, however the add to cart in the footer is not hidden. Link to my site is chocsandtruffles.com and pw is nba12345 Add to Design > Custom CSS /* hide add to cart footer */ footer.sections .shopify-buy-frame--product { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.