Troubleshoot a weird link issue after adding CSS code

Store Design
,
1

I’m having a strange issue where my product price and h2 tags are linking to cart and homepage on my product page- any ideas why?

https://emy.studio/collections/shop/products/golden-body-oil

I think this code is interfering on the product.liquid file:

/* ☯ STICKY ICON LEFT - Yin ☯ */
  
.logo-image::before  {
  content:'' !important;
  position:absolute !important;
  background-image:url(https://cdn.shopify.com/s/files/1/0618/8734/8965/files/EMY_logos_colors_final-26_84ce823a-1a99-4834-9ffc-69c1aaef3a80.png?v=1642648957) !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:50% 50% !important;
  width:100% !important;
  height:100% !important;
  top:25vh !important;
  right: 40vw !important;
}

/* ☯ STICKY ICON RIGHT - Hand ☯ */
  

#CartCount::before {
  content:'' !important;
  position:absolute !important;
  background-image:url(https://cdn.shopify.com/s/files/1/0618/8734/8965/files/EMY_logos_colors_final-18.png?v=1642657834) !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:50% 50% !important;
  width:100% !important;
  height:100% !important;
  top:60vh !important;
  right: -47vw !important;
}
2

I don’t think how you’re approaching the sticky hand is the right one. The idea is sound but i do see quirks with it. Don’t let that put you off as I know you would have put lots of time into the building and it shows (well done!).

For the sake of troubleshooting and learning let’s look at the css for the hand.

You are setting the width to be 100% so you end up with an element that is far wider than it needs to be, and sits over the top of some of your content.

Consider a tweak to something like this:

#CartCount::before {
    content: '' !important;
    position: absolute !important;
    background-image: url(https://cdn.shopify.com/s/files/1/0618/8734/8965/files/EMY_logos_colors_final-18.png?v=1642657834) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    width: 50px;
    height: 50px;
    top: 60vh !important;
    right: 0;
}

I’m ignoring my views on best practice but take a look at the code above and how I’ve set an explicit width and height, and changed the right property value. This should sit close enough to the edge that it’s less likely to run over content and be narrow enough that less people will accidentally click on it. It still likely will on smaller screens but hopefully this gives you something to try!

I did see in testing that the tab + icons sat over the top of the icon so that will be the next thing to tackle.

3

Thanks heaps for clarifying - I’m definitely open to doing this a way that is heading toward more best practice! Unfortunately, I still have the issue of the price and other elements linking to the cart and homepage.