Anyone Know How To Make This Element Caps

Store Design
1

Does anyone know how to make the afterpay element text in caps? I also need the afterpay logo to show up a tad smaller

website is ElevationAthleticsCanada.ca

Theme is prestige.

Thanks in advance

Screen Shot 2022-08-09 at 10.13.39 PM.png
Screen Shot 2022-08-09 at 10.13.39 PM.png3456Ă—1448 413 KB

2

Hi! @Claud123

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for

your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

Go to Online Store-> Theme->Edit code

Asset-> theme.css ->paste the below code at the bottom of the file.

#placement-1660105840561 {

text-transform: uppercase;

}

Best regards,

PageFly

3

thank you for your help. I just inputted the code as per your instructions but it did not work. Any thoughts on why?

Thanks In Advance

4

@Claud123

can you send me a screenshot of the location where you added the code

5

@Claud123

or you can also add this code:
.afterpay-paragraph {
text-transform: uppercase !important;
}
note:
Go to Online Store-> Theme->Edit code
Asset-> theme.css ->paste the below code at the bottom of the file.

6

Hello This still did not work after inputting.

7

Screen Shot 2022-08-09 at 10.58.01 PM.png
Screen Shot 2022-08-09 at 10.58.01 PM.png3456Ă—1932 660 KB

8

@Claud123

please try again with this code, i hope it helps you

afterpay-placement {

text-transform: uppercase !important;

}

9

thank you so much it worked this time. the font is huge though. How can i make it look a bit better/smaller?

Thanks

10

To make the font smaller, please add the code below to theme.css file.

.afterpay-paragraph {
    font-size: 12px !important;
}

You may change the font size from 12px to other numbers to fit your needs.

Hope it helps.

Thanks.

11

This did not work unfortunately. i inputted the code but the font size did not fix

12

Hello PageFly,

Can you help me make this element a bit smaller? When it goes all caps it gets huge.

Thanks!

13

Hi @Claud123 ,

This will decrease the size of the CAPS element…

span.afterpay-main-text {
    /* text-transform: uppercase; */
    font-size: 1rem !important;
}
14

Hello Farouk,

Thank you so much for the help. This did not work unfortunately. Is something missing?

Thanks,

Claudio

15

No worries @Claud123 ,

This should work, try this…

  • Go to Online Store-> Theme->Edit code
  • Asset-> theme.css ->paste the below code at the bottom of the file.
.ProductMeta, .afterpay-paragraph {
    text-transform: uppercase !important;
}

.ProductMeta, .afterpay-placement {
    --logo-badge-width: 80px;
}
16

Thank you so much for all the help. This worked and looks great. Your help is very appreciated.

17

You’re welcome @Claud123 !