Easiest solution to move Trusted Shops Trust Badge from right to left (floating)

[SimonUndJan]

Hey guys,

so I've been trying to get the default variant of the Trusted Shops Badge to work on the left side of our theme. Sadly the official integration only offers a way to change the style and look to a different custom version of the badge to achieve free positioning. The default one only allows yOffset.

Bare in mind I am not a coder. I can follow simple steps and copy - pasting stuff into the code etc, but I lack coding knowledge.

Is there a simple way to make the widget align to the left instead of the right side?

Thanks for your help, guys!

[RyanMacdonald]

Hey Simon, could you include a link to your store where the trust badge is visible? That way anyone looking to help can see the code and give you some CSS to right align the badge.

[SimonUndJan]

Sure, I'll reenable it. Right now the positioning is causing overlap with our cart solution and I stopped it from being displayed.

It's back now and you can see it in action here: https://simonjan.de/

Thanks for your time!

[RyanMacdonald]

Thanks! I'll take a look now.

[RyanMacdonald]

That code for the trust badge is kinda whack haha. The class names are all minified so they're difficult to target. Here's an example "_1gwv20v". I'm assuming they have a compiler before their code so it'll be safer to target the element using a wildcard.

Below is the CSS for you. This targets an element with an id containing "minimized-trustbadge". If they change the name of element to something else, you'll can easily update "minimized-trustbadge" to whatever the new element is.

/* TrustBadge position override */
[id*="minimized-trustbadge"] {
  left: 20px !important;
  position: fixed !important;
}

Do you know where to paste this in your theme? Usually, there will be a main CSS file. You can paste it somewhere at the bottom of that.

Shameless plug for my app: Incentivize. I noticed you have Monster Upsell for your cart drawer. Incentivize may work well for you to keep that slide-out cart and have a more refined design. We pride ourselves on respecting your brand and customers. Many merchants love our app because it doesn't feel too pushy. Check it out if that resonates with you! No pressure.

Incentivize slide-out cart with free shipping and upsells/cross sells.

[SimonUndJan]

Thanks for the fast solution. I'll take a look at implementing it in some hours because I'm busy atm and I'll get right back to you and give you feedback.

We just started using Monster Upsells and are still in the test phase. If it leaves things to be desired I'll remember your app and give it a closer look.

Appreciate your help!

[RyanMacdonald]

No worries! Happy to help.

[SimonUndJan]

I actually already came around to trying it. The folder probably is theme.scss.liquid in our case, right? However I am not quiet sure the format of css provided is working in this case as nothing happens when I preview the outcome. 

Probably because the debut theme is using a different way of going about things. Here is what it reads at the top:

"Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script"

[RyanMacdonald]

It should work in that file. The code is just standard CSS. The selectors for the trusted badge might be different. I sent you a store request so I can take a closer look. If you're comfortable with that, it'll be the easiest way for me to see what's going on. The request will come from Obsidian, my app company.

[SimonUndJan]

Awesome! Accepted. 

[RyanMacdonald · Accepted solution]

I see what's going on now... Yeah, the code for this app really blocks moving it around. You can preview the theme I titled "[Ryan 2022-03-02] Debut". The badge stays over on the left now but all the popups are broken. They didn't code them to respect the position of the badge. The solution is going to be so fragile that I don't think it's worth pursuing.

My recommendation at this point is to hide the badge when your cart drawer is open. I'm not sure how to do that with Monster Upsell. They don't add any classes to the page when the cart is open. You can try reaching out to their support team to see if they can fix it for you. I'd be happy to do the same for you with Incentivize if you switch. We have merchants using both apps together today and that's how we solved it.

Happy selling! Best of luck.