Custom Liquid block is shifting icons on my page- how to fix code?

Technical Q&A
1

Hi, I worked with Support and they found the issue, but I’m not sure who to fix it:
I created a block above my product description for “Scent Descriptions”, so users can open/collapse (actually, the assistant created it). This liquid block is pushing the shopping cart icon (at the top right of the page) out of alignment on the page.

I need this collapsible block. How do I fix the code? I’ll post the actual code below the photo.

8876-46763-21027-44557-94201
8876-46763-21027-44557-942011920×890 225 KB

Scent Descriptions ›
{{ product.metafields.custom.scent_descriptions | metafield_tag }}
details { border-top: 1px solid #e0e0e0; padding: 1rem 0; } summary { cursor: pointer; font-weight: 500; padding: 0.5rem 0; display: flex; justify-content: space-between; align-items: center; list-style: none; gap: 1rem; font-family: 'Red Hat Display', sans-serif; font-size: 9pt; text-transform: uppercase; } summary::-webkit-details-marker { display: none; } .arrow { transition: transform 0.3s ease; font-size: 1.8em; transform: rotate(90deg); margin-left: auto; } details[open] .arrow { transform: rotate(270deg); } .scent-content { padding: 1rem 0; }
2

Hey @VerdantHC

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Here’s the URL to the product page:

https://verdanthomeco.com/products/signature-mop-soap-concentrate

5

Hey @VerdantHC

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
details.account-popover.mobile\:hidden {
    padding: 0 !important;
    border: 0 !important;
}
</style>

RESULT:

image
image1906×916 126 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

6

Hello there, if you want to fix the alignment issue of the account icon on your site, then you need to add the code shared below in the end of styles.css file.

.account-popover {
    padding: 0px !important;
    border-top: 0px !important;
}

Once you paste the code, then you will get these results:

image
image1910×528 74.2 KB

7

For my understanding, what is this code doing? Is it realigning the icons globally on the site? Since this is the theme code, that’s what I’m surmising.
Will this change anything else? It seems when I change one thing for the better, it messes up others :frowning: The desktop will display correctly and not shift/scroll, right? That happened previously.

8

Actually this Question asked from @Moeed but I’m sorry if I am interrupting. I would like to answer the Query.

As the class that written in the css is the unique class. It’s not global class that affect on the other elements. Which means adding this css will not causing any other issues.

In previous times, if you face the issue with applying the css globally, then this might be due to using the global classes.

9

I know it’s marked as solved, but to give a better explanation – the code which AI suggested uses very generic selectors, like details or summary.

There are other elements on the page which are details and summary and these styles would apply to them too. Your “Account” button is details.

One way to avoid these side-effects can be to move what’s between <style> and </style> in the AI-generated code into Product Info section “Custom CSS” setting.
This will apply the code only inside Product Info section.

The fix that was given above uses more specific element selectors and as such, it has much lower possibility for side-effects.

Also, I’d recommend to rather use Shopify’s own AI to generate your codes – it is trained to avoid side-effects.