Why does AfterPay info disappear on Dawn theme when a variant is selected?

[Ben_O_Brien]

Hi all

I'm customizing the Dawn theme and hoping for it to go live today. My current live store is the Brooklyn theme. - www.secondearth.com.au 

In the Dawn theme the issue I have is the Afterpay information appears when the product page loads but disappears as soon as a variant or quantity is selected. And secondly the afterpay logo is not appearing in the footer along with the other payment options. These are not issues in my live brooklyn store but only occur in my draft Dawn theme. 

Ive reached out to Afterpay but have been waiting days for a response.

Appreciate any advice

Thanks

Ben

[ooyaasuumii]

Having this same issue 

[ooyaasuumii]

Actually just figured it out. 

At least in my case, I was using a swatch / variant app to show different images / prices based on the currently selected variant. This was completely removing the price element from the DOM (where after pay sits by default when added to the theme) and replacing it with a new one using JavaScript, hence why it would completely disappear and not simply go display:hidden, or something. 

To solve:

Go into your theme.liquid and find your Afterpay code. Locate the commented out afterpay_product_selector variable and remove the // and save.

// var afterpay_product_selector = '#product-price-selector';

Now go to your product template, whatever it may be called in your theme, and add the following code wherever you want the Afterpay badge to appear. This worked for me on Dawn theme. 

<div id="product-price-selector"></div> 

[SeanMythen]

To fix the first issue, in your theme's CSS file add this:

p.afterpay-paragraph {
    display: block !important;
}

[peakphotography]

Im currently trying to find a solution to this problem.
I have dawn theme and afterpay is all working perfectly, except if you click a different varient or increase the quantity then the afterpay installment information disappears.
I have tried adding  above to CSS and it has no effect at all.
Any other ideas?

[Shourya_Karan]

Hi there, the above CSS is targeting the child, instead add the following CSS:

square-placement{
display: block !important
}