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

Shopify cart icon on all pages


kelpcreative

Question

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?

Edited by kelpcreative
Initial Revision
Link to comment

20 answers to this question

Recommended Posts

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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