Weird shape on custom liquid

Topic summary

A user encountered an unwanted square shape appearing near their product title after adding custom liquid code to their Shopify store. The issue was visible in screenshots showing both the problematic display and the custom liquid code.

Root Cause:
Multiple respondents identified that the .tooltip-arrow:empty CSS rule was creating the unwanted square element.

Proposed Solutions:

  • Option 1: Add CSS to hide the arrow by setting display: none !important for .tooltip-arrow:empty in the base.css file
  • Option 2: Remove the .tooltip-arrow:empty block entirely from the custom liquid code
  • Option 3: Modify the style tag within the custom liquid itself

All solutions target the same CSS element causing the visual issue. The discussion includes before/after screenshots demonstrating successful removal of the square shape while preserving the tooltip functionality.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.

Hello, I am getting a weird square pop up near my product title when I add this custom liquid. What might i be able to change to keep the liquid but remove the square? thanks

Weird square:

Custom liquid:

Code of liquid:

.tooltip-wrapper { position: relative; margin-top: 19px; display: flex; padding: 16px; gap: 8px; background: #ECFBFF; color: black; } .tooltip-arrow:empty { display: block; } .tooltip-arrow { position: absolute; height: 16px; width: 16px; background: #ECFBFF; top: -8px; left: 48px; transform: rotateY(0deg) rotate(45deg); } .pulse-icon span { position: relative; display: flex; width: 10px; height: 10px; border-radius: 50%; background-color: #54DEFC; animation: pulse 2s ease 0s infinite normal none; margin: 10px; } .pulse-icon span::after { content: ""; width: 16px; height: 16px; border: 1px solid #334FB4; border-radius: 50%; position: absolute; left: -3px; top: -3px; } .tooltip-content { margin: auto; font-size: 12px; margin-left: 0px; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 1; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } .container-krismotion { display: flex; flex-direction: row; }

54 People are checking out...

1 Like
  • Here is the solution for you @seiza123
  • Please follow these steps:
  1. Go to Online Store β†’ Theme β†’ Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press β€˜Save’ to save it

  • Here is the result you will achieve:

  • Please press β€˜Like’ and mark it as β€˜Solution’ if you find it helpful. Thank you.
1 Like

@seiza123 , remove this in your custom code

Result:

1 Like

Hello @seiza123
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

.tooltip-arrow:empty {
display: none !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like

Hi @seiza123
Update style tag to this


If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Thanks!

1 Like