Re: AfterPay Placement on Product Page

Solved

How do I position AfterPay info next to product price?

Mish4109
New Member
7 0 0

Can someone tell me how to place the AfterPay info beside my price on the product page? I am using the Prestige Theme

this is what I have

Mish4109_0-1645033703519.png

 

 

 

This is what I want

Mish4109_1-1645033703559.png

 

 

@m1guelrod

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 973

This is an accepted solution.

Hi @Mish4109 ,

 

sorry for replying late.

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

.ProductMeta__PriceList {
    display: inline-block !important;
}

.template-product .afterpay-paragraph {
    width: calc(100% - 55px);
    display: inline-block;
    padding-left: 20px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

Replies 7 (7)

AvadaCommerce
Shopify Partner
3879 839 973

Hi @Mish4109 ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

banned
Mish4109
New Member
7 0 0
AvadaCommerce
Shopify Partner
3879 839 973

This is an accepted solution.

Hi @Mish4109 ,

 

sorry for replying late.

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

.ProductMeta__PriceList {
    display: inline-block !important;
}

.template-product .afterpay-paragraph {
    width: calc(100% - 55px);
    display: inline-block;
    padding-left: 20px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
Mish4109
New Member
7 0 0

Could you tell me where I can edit the code to reduce the .afterpay_logo?

AvadaCommerce
Shopify Partner
3879 839 973

Hi @Mish4109 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

.template-product .afterpay-paragraph img {
    max-width: 70px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

Mish4109
New Member
7 0 0

I was not able to make this solution work. Are you still available to help?

 

robertjohn17
Excursionist
21 0 6

Hi i tried your code on the essence theme and it didnt work any other ideas? 

Screenshot 2024-04-18 at 2.12.07 PM (2).png