Removing all highlights from embedded buy button cart

databend
Tourist
7 0 3

Hello!

 

We don't use a Shopify theme. We don't have an online store channel. We exclusively use buy buttons on our own external webpage. I've noticed that sometimes an ugly blue highlight appears on the cart icon and/or on the 'x' icon to x out of the cart... How do I make it so there will never be any of these highlights added? Sometimes they show up, sometimes they don't.

 

I don't have a theme or an online store channel... we only use buy buttons. Here is an example of one of our buy buttons -

 

<div id="cw">
<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: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function(ui) {
ui.createComponent('product', {
id: '7036212904002',
node: document.getElementById('cw'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {

"option": {
"styles": {
"wrapper": {
"border": "0px",
"border-radius": "5px",
"position": "absolute",
"height": "42px",
"bottom": "0px",
"width": "114px",
"padding": "5px"

}
}
},

"product": {
"styles": {
"buttonWrapper": {
"margin-left": "40%"
},
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "0px"
}
},
"button": {
"padding-left": "0px",
"padding-right": "0px",
"width": "calc(100% - 14px)",
"position": "relative",
"right": "-7px",
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
},
"option": {
"display": "inline-block",
"width": "20px",
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "OUT OF STOCK"
},
},
"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-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout."
},
"popup": false
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/

</script>
</div>

 

There is no styling in here for a blue highlight... which is why I'm confused.

 

Edit: here are images showing the highlights I want to remove -

 

Screen Shot 2024-01-15 at 1.27.43 PM.pngScreen Shot 2024-01-15 at 1.27.53 PM.png

Replies 3 (3)

BSS-Commerce
Shopify Expert
3477 461 515

Hi @databend ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

databend
Tourist
7 0 3

Hello,

 

Thank you so much for reaching out.

 

Currently, all of the products on our public webstore are sold out, so it would not be possible to see the highlights... It is possible to see it on this random JSFiddle though lol. Here is a link - https://jsfiddle.net/fx8gc2nk/3/

 

Simply add one of the products to the cart to see the highlight issue.

 

Thanks again,

Nathan

WebDeskSolution
Shopify Partner
165 42 47

Hello @databend 

 

Please update the focus color to #000000 in your code per this: https://app.screencast.com/1ZKhS8Mbbn0s5

 

Please hit Like and Mark it as a Solution if you find our reply helpful.

Thank You,


WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Hire Us | Call Us 877.536.3789


Location: 150 King St. W. Toronto, ON M5H 1J9