Trust badge placements

[jeffreym]

Hi guys.

Thank you in advance for helping me! I hope what I ask for makes sense.
I want this adjustment to be made on all 3 product pages.

1. I want the badge images to be reduced insize a tiny bit without losing quality.
2. A small space between the image and the text
3. The middle line removed or the return truck image & text moved to the right so it looks better.

URL: Hygiadental.com
PW: myown

Thank you again!

[rajweb]

Hey @jeffreym 

Got it! To achieve the changes you've described for your trust badges on all three product pages, you can adjust the CSS for the badge section. Here's how you can make the changes:

/* 1. Reduce badge image size */
.ss-trust-badge-image-template--18361987661924__ss_trust_badges_emojis_mqVD4V img {
  width: 60px !important; /* Adjust this size as needed */
  height: auto !important;
}

/* 2. Add a small space between the badge image and text */
.ss-trust-badge-item-template--18361987661924__ss_trust_badges_emojis_mqVD4V {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important; /* Space between image and text */
}

/* 3. Remove middle line or adjust alignment for better appearance */
.ss-trust-badge-item-template--18361987661924__ss_trust_badges_emojis_mqVD4V {
  border-bottom: none !important; /* Removes the middle line */
}

.ss-trust-badge-item-template--18361987661924__ss_trust_badges_emojis_mqVD4V:nth-child(2) {
  justify-content: flex-start !important; /* Aligns the second badge content */
}

Result:

Steps to Add the CSS:

1. Online Store

2. Themes

3. Edit Code

4.  Open the theme.css or base.css file (depending on your theme setup).

5. Scroll to the bottom and paste the CSS code.

6. If you'd like me to tweak the code further or clarify anything, let me know!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[DaisyVo]

Hi @jeffreym 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

product-form.product-form + div > div > ul > li > div:nth-child(1) > img {
    width: 30px !important;
}
product-form.product-form + div > div > ul > li:nth-child(1) {
    border: none !important;
}
product-form.product-form + div > div > ul > li:nth-child(2) {
    justify-content: end !important;
}

Here is the result: 

I hope this helps

Best,

Daisy