Re: How do I change the alignment of the security seals?

anapdeabreu · ‎08-06-2024

https://lojabauer.com.br

Dan-From-Ryviu · ‎08-06-2024

Ahh, I found it. Please update the code

<style>
.payment-list > div { width: 100%; }
@media (min-width: 990px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
float: right !important;
padding-right: 30px;
}
}
@media (max-width: 749px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
margin-top: 12px;
}
}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

PageFly-Richard · ‎08-06-2024

This is Richard from PageFly - Shopify Page Builder App

Hi @anapdeabreu Please add code here to change position:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
  @media screen and (min-width: 768px){
      .footer__aside-item--payment .payment-list{
          position: relative !important;
      }
      .footer__aside-item--payment .payment-list div:nth-child(1){
         width: 100% !important;
      }
      .footer__aside-item--payment .payment-list div:nth-child(2){
            position: absolute !important;
            right: 50px !important;
            top: 20px !important;
      }
 }
</style>

Hope my solution will help you resolve the issue.

Thank you so much. Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

anapdeabreu · ‎08-06-2024

Hello, Ricardo.
Unfortunately, his solution was unsuccessful. Would you have any other suggestions?

PageFly-Richard · ‎08-06-2024

Hi @anapdeabreu You can change this code to here:

<style>
  @media screen and (min-width: 768px){
      .footer__aside-item--payment .payment-list{
          position: relative !important;
      }
      .footer__aside-item--payment .payment-list div:nth-child(1){
         width: 100% !important;
      }
      .footer__aside-item--payment .payment-list div:nth-child(1) div:nth-child(1){
            position: absolute !important;
            right: 50px !important;
            top: 20px !important;
      }
 }
</style>

It will show in my side:

Please try again, Thanks you.

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

anapdeabreu · ‎08-06-2024

Sorry. It still hasn't worked here. What should I do?

PageFly-Richard · ‎08-07-2024

Hi, I think you need this code. I have used a piece of code from: Dan-From-Ryviu , try this code to see if it fixes it,

<style>
  @media screen and (min-width: 768px){
      .footer__aside-item--payment .payment-list{
          position: relative !important;
      }
      .footer__aside-item--payment .payment-list div:nth-child(1){
         width: 100% !important;
      }
      .payment-list div div:has(a[aria-describedby="a11y-new-window-message"]){
            position: absolute !important;
            right: 50px !important;
            top: 20px !important;
      }
 }
</style>

Thank you so much.

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu · ‎08-06-2024

Hi @anapdeabreu

Please add this code to theme.liquid file, after <head>

<style>
@media (min-width: 990px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
float: right;
padding-right: 30px;
}
}
@media (max-width: 749px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
margin-top: 12px;
}
}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

anapdeabreu · ‎08-06-2024

It didn't work either. I removed the other collaborator's code and left only what you told me, but it still didn't work... 😞

Dan-From-Ryviu · ‎08-06-2024

Could you update the code and check again?

<style>
@media (min-width: 990px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
float: right !important;
padding-right: 30px;
}
}
@media (max-width: 749px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
margin-top: 12px;
}
}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

anapdeabreu · ‎08-06-2024

I updated, but there was no change. Thanks for your time anyway.

Dan-From-Ryviu · ‎08-06-2024

Could you take a screenshot of where you added the code? Did you save file and reload your page to check after adding the code?

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

anapdeabreu · ‎08-06-2024

Yes, I saved and reloaded the page several times.

Dan-From-Ryviu · ‎08-06-2024

Ahh, I found it. Please update the code

<style>
.payment-list > div { width: 100%; }
@media (min-width: 990px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
float: right !important;
padding-right: 30px;
}
}
@media (max-width: 749px) {
.payment-list div div:has(a[aria-describedby="a11y-new-window-message"]) {
margin-top: 12px;
}
}
</style>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: How do I change the alignment of the security seals?

How do I change the alignment of the security seals?

Community Blog Articles