Afterpay product page how to move text down

Highlighted
Tourist
14 0 1

Hi i have just added afterpay and pasted the code they gave into theme.liquid. But now the text on my product pages sits right between my pricing so needs to be moved to sit underneath it.  If someone can please help asap that be great thankyou. 

www.livindreamz.com

Below is Code that i have added to theme.liquid and apparently there is no other code anywhere else. 


<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.8) -->
<script type="text/javascript">
// Overrides:
// var afterpay_min = 0.04; // As per your Afterpay contract.
// var afterpay_max = 2000.00; // As per your Afterpay contract.
// var afterpay_cbt_enabled = false; // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ).
// var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var afterpay_product_selector = '#product-price-selector';
// var afterpay_cart_integration_enabled = true;
// var afterpay_cart_static_selector = '#cart-subtotal-selector';

// Non-editable fields:
var afterpay_shop_currency = {{ shop.currency | json }};
var afterpay_cart_currency = {{ cart.currency.iso_code | json }};
var afterpay_shop_money_format = {{ shop.money_format | json }};
var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var afterpay_theme_name = {{ theme.name | json }};
var afterpay_product = {{ product | json }};
var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var afterpay_cart_total_price = {{ cart.total_price | json }};
var afterpay_js_snippet_version = '1.0.8';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script>
<!-- End Shopify-Afterpay JavaScript Snippet (v1.0.8) -->

0 Likes
Highlighted
Astronaut
1085 177 213

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:


 

.product-details-price {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
}

.product-details-price #ProductPrice {
   margin-bottom: 10px !important;
}

 


Let me know whether it works for you.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
14 0 1

Thanks but i dont have a theme.scss.liquid in assets. Have a theme.js.liquid?

0 Likes
Highlighted
Astronaut
1085 177 213

Hello,

In this case, do this:

1. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
2. paste this code right above the </body> tag:

 

<style>
.product-details-price {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
}

.product-details-price #ProductPrice {
   margin-bottom: 10px !important;
}
</style>

 



Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
14 0 1

ok so price is now above but my compare to (before sale) price is still sitting underneath. Please check what it looks like now www.livindreamz.com

I also want to make the afterpay text smaller its clashing with the price as same colouring at the moment also. 

0 Likes
Highlighted
Astronaut
1085 177 213

Hello,

I didn't realize there were more variables - it would require an in-depth customization to implement this, I'd need to be added as a staff member to your shop and get it coded. There is no simple copy-paste solution for this otherwise I'd happily guide you through. 

In case it is of your wish, feel free to shoot me an e-mail. I've been hired by 20+ people from this very forum, you can read their recommendations about my work clicking here.

Alternatively there is the possibility someone may propose to get this one done for you.

Kind regards,
Diego


◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes