How can I relocate the Clearpay message below the sale price?

Solved

How can I relocate the Clearpay message below the sale price?

claudinesc
Excursionist
32 0 18

Hi again.  As shown in attached picture, how can I move the Clearpay message to the bottom of the sale price please? Many thanks.

Link to page is Blue Apples Collar Sweatshirt by Hugo Loves Tiki - Petite Belle UK (petite-belle.com)

 

clearpay.png

Accepted Solutions (2)
tecoektamerai
Shopify Partner
66 5 17

This is an accepted solution.

Ok 

So go to your store > Dashboard > Action > Edit code > open 'theme.css' file add below CSS 
http://prntscr.com/1vz6bey

p.clearpay-paragraph {
    position: absolute;
    bottom: 0;
}
.product-block.product-block--price {
    position: relative;
}
.product-block--price {
    padding-bottom: 43px;
}
@media screen and (min-width:768px) and (max-width:1024px) {
.product-block--price {
		padding-bottom: 70px;
	}
}
@media screen and (min-width:240px) and (max-width:767px) {
	.product-block--price {
		padding-bottom: 70px;
	}
}

 

View solution in original post

tecoektamerai
Shopify Partner
66 5 17

This is an accepted solution.

Replies 9 (9)

tecoektamerai
Shopify Partner
66 5 17

Hello @claudinesc 

Hope you are well !!

You need to edit your product template. So fo to online store > Action > Edit code > open product-template  > open product section file > and swap the code 
http://prntscr.com/1vyxevt

Put "clear pay-paragraph" after "product__policies " div . and if you still facing issue ping me 

Thank you

claudinesc
Excursionist
32 0 18

Hi. This is what we have been told to do by Clearpay. To paste this JS code at the end of our theme.liquid file. So it is not on our product template. How do we proceed please? Many thanks.

<!-- Begin Shopify-Clearpay JavaScript Snippet (v1.0.10) -->
{% if cart.currency.iso_code == shop.currency %}
<script type="text/javascript">
// Overrides:
// var clearpay_min = 0.04; // As per your Clearpay contract.
// var clearpay_max = 1000.00; // As per your Clearpay contract.
// var clearpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'.
// var clearpay_product_selector = '#product-price-selector';
// var clearpay_cart_integration_enabled = true;
// var clearpay_cart_static_selector = '#cart-subtotal-selector';

// Non-editable fields:
var clearpay_shop_currency = {{ shop.currency | json }};
var clearpay_cart_currency = {{ cart.currency.iso_code | json }};
var clearpay_shop_money_format = {{ shop.money_format | json }};
var clearpay_shop_permanent_domain = {{ shop.permanent_domain | json }};
var clearpay_theme_name = {{ theme.name | json }};
var clearpay_product = {{ product | json }};
var clearpay_current_variant = {{ product.selected_or_first_available_variant | json }};
var clearpay_cart_total_price = {{ cart.total_price | json }};
var clearpay_js_snippet_version = '1.0.10';
</script>
<script type="text/javascript" src="https://static.afterpay.com/shopify-clearpay-javascript.js"></script>
{% else %}
<!-- Clearpay disabled: {{ cart.currency.iso_code }} != {{ shop.currency }} -->
{% endif %}
<!-- End Shopify-Clearpay JavaScript Snippet (v1.0.10) -->

tecoektamerai
Shopify Partner
66 5 17

This is an accepted solution.

Ok 

So go to your store > Dashboard > Action > Edit code > open 'theme.css' file add below CSS 
http://prntscr.com/1vz6bey

p.clearpay-paragraph {
    position: absolute;
    bottom: 0;
}
.product-block.product-block--price {
    position: relative;
}
.product-block--price {
    padding-bottom: 43px;
}
@media screen and (min-width:768px) and (max-width:1024px) {
.product-block--price {
		padding-bottom: 70px;
	}
}
@media screen and (min-width:240px) and (max-width:767px) {
	.product-block--price {
		padding-bottom: 70px;
	}
}

 

claudinesc
Excursionist
32 0 18

Thank you so much for your help! It worked! 

tecoektamerai
Shopify Partner
66 5 17

No problem 🙂 love to help

claudinesc
Excursionist
32 0 18

Sorry I should have asked about this too. How can I remove the "Shipping calculated at checkout" under the price please? 

tecoektamerai
Shopify Partner
66 5 17

This is an accepted solution.

Yes.Please check below video 

https://www.youtube.com/watch?v=AVtM9yneKts

claudinesc
Excursionist
32 0 18

You're a star! Thanks so much!

tecoektamerai
Shopify Partner
66 5 17

Love to hear from you that my solution worked for you. Thank you so much for your appreciation 🙂