Weird shape on custom liquid

Store Design

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

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:

seiza123_0-1726891637759.png
seiza123_0-1726891637759.png556×457 24.5 KB

Custom liquid:

seiza123_1-1726891677914.png
seiza123_1-1726891677914.png747×611 30.3 KB

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
2
  • 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:

BSSTekLabs_0-1726891976905.png
BSSTekLabs_0-1726891976905.png638×692 37.9 KB

BSSTekLabs_1-1726891982742.png
BSSTekLabs_1-1726891982742.png754×413 21.1 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

@seiza123 , remove this in your custom code

BSSCommerceB2B_0-1726897974719.png
BSSCommerceB2B_0-1726897974719.png1603×791 60.4 KB

Result:

BSSCommerceB2B_1-1726897985910.png
BSSCommerceB2B_1-1726897985910.png999×330 137 KB

1 Like
4

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

1.png
1.png1102×364 132 KB

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

1 Like
5

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