Change points # to bold + white bkgrnd

[Luxurymrkt]

 

Hi,

id like to change just the # of points ex: 700 to bold if possible

also the background of the shoppay to white and align left.

my site is: https://vazluxe.com/products/solace-london-dresses-black-os39029black-p25?pr_prod_strat=collection_f...

[Huptech-Web]

Hello! @Luxurymrkt  ,Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme.css"
6. Add the following code at the end of the file.

.bm_product_points {
    font-weight: 700;
}
body .product-form__shop-pay {
    background: #fff;
    box-shadow: 0px 0px 1px 0.5px lightgrey; /* If required then add it */
}

Here, is the screenshot for the same.


If you found this response helpful, please do like and accept the solution, and also if you have any questions please don't hesitate to ask.
(S.P)

[Dotsquares]

hi @Luxurymrkt 

we can need a html tag for particular text to bold (refer attachement)

for the the background of the shoppay to white and align left add below CSS

.product-form__shop-pay {
    background: none;
    padding-left: 0;
    padding-right: 0;
}

[PageFly-Richard]

Hi @Luxurymrkt 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<script>
let spanElement = document.querySelector('.bm_product_points');

let text = spanElement.textContent;
let number = text.match(/\d+/)[0];  // Extract the number (e.g., 400)
let prefix = text.split(number)[0];  // Get the text before the number
let suffix = text.split(number)[1];  // Get the text after the number

let boldNumber = document.createElement('span');
boldNumber.style.fontWeight = 'bold';
boldNumber.textContent = number;

spanElement.innerHTML = prefix + boldNumber.outerHTML + suffix;

</script>
<style>
.product-form__shop-pay.fs-body-75 {
    background: #fff;
    text-align: left;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly  

[B2Bridge · Accepted solution]

Hi @Luxurymrkt , you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.bm_product_points {
 font-weight: 700 !important;
}
.product-form__shop-pay {
 background-color: transparent !important;
 padding-left: 0 !important;
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍

[Rahul_dhiman]

Hello @Luxurymrkt 
a) id like to change just the # of points ex: 700 to bold if possible:-
1. To make the word bold. You can use "b" tab like this <b>500</b> to make the word "500" bold.
2. You can use this snippet to make bold. button { font-weight: 700; }

b) the background of the shoppay to white and align left.:-
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.product-form__shop-pay {
background-color: #fff !important;
text-align: left !important;
}

result

Thanks