How can i move the "Shop Pay" under the price tag?

[samrose]

Hi i recently downloaded the new Dawn Crafts 2.2 theme, but there’s this ugly and horrible phrase/lettering under my price tag “Pay in full or in 4 interest-free installments for orders between $50 and $3000 with” So unnecessary and an eyesore to every customer that visit my product page…

I like the option for installment payments, but its in a ugly position, like wth was Shopify developers thinking of putting it there -.-

anyways, can someone please help me reposition it below the “buy now” button. Thank you so much!

my site is: www.emandahr.com/products/akira-kurosawa

[dmwwebartisan]

@samrose

this code customization work please share your theme.zip file i will check code and send solution for you.

Thanks!

[samrose]

blesss your soul, please let me know if there is anything else you need

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}

{%- endunless -%} {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}

{% if page_description %}

{% endif %}

{% render ‘meta-tags’ %}

{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: ‘weight’, ‘bold’
assign body_font_italic = settings.type_body_font | font_modify: ‘style’, ‘italic’
assign body_font_bold_italic = body_font_bold | font_modify: ‘style’, ‘italic’
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: ‘swap’ }}
{{ body_font_bold | font_face: font_display: ‘swap’ }}
{{ body_font_italic | font_face: font_display: ‘swap’ }}
{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}
{{ settings.type_header_font | font_face: font_display: ‘swap’ }}

:root {
–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
–font-body-style: {{ settings.type_body_font.style }};
–font-body-weight: {{ settings.type_body_font.weight }};

–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
–font-heading-style: {{ settings.type_header_font.style }};
–font-heading-weight: {{ settings.type_header_font.weight }};

–color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
–color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
–color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
–color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
–color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
–color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
–color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
–payment-terms-background-color: {{ settings.colors_background_1 }};

–gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
–gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
–gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
–gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

–page-width: {{ settings.page_width | divided_by: 10 }}rem;
–page-width-margin: {% if settings.page_width == ‘1600’ %}2{% else %}0{% endif %}rem;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: 1.8;
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ ‘base.css’ | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}

{%- endunless -%} {%- unless settings.type_header_font.system? -%} {%- endunless -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%} {{ "accessibility.skip_to_text" | t }}

{% section ‘announcement-bar’ %}
{% section ‘header’ %}

{{ content_for_layout }}

{% section ‘footer’ %}

• {{ 'accessibility.refresh_page' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

.jdgm-form-wrapper { margin-top: 40px !important; }

[diego_ezfy]

@samrose ,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
3. paste this code right above the tag:

async function move(){
	
	  function _waitForElement(selector, delay = 50, tries = 250) {
    const element = document.querySelector(selector);

    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        setTimeout(resolve, delay);
      });
    }

    if (element === null) {
      if (window[`__${selector}`] >= tries) {
        window[`__${selector}`] = 0;
        return Promise.reject(null);
      }

      return _search().then(() => _waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }
  
  await _waitForElement(`[data-shopify="payment-button"]`)
  
  console.log("loaded")
  
  var moveDOMElement = (parent,child) => document.querySelector(parent).appendChild(document.querySelector(child))

moveDOMElement(`.product-form__buttons`, `.product__tax  + div`)
}

move();

Kind regards,
Diego

[samrose]

HEy diego, that didn’t quite work

[diego_ezfy]

@samrose

The text is now showing below the ATC on your live website:

Isn’t that what you wanted?

[samrose]

yep, shopify theme support helped me out and installed a custom liquid into my theme.

[diego_ezfy]

@samrose

I’m glad it is solved. For anyone coming through this thread and seeking help, I just noticed there was a typo in my previous code, it should be this:

[Lyra]

I’m also trying to move the shop pay description, but this code didn’t seem to do anything when I added it.

[nack]

Hi Diego,

I appreciate your contributions. I cannot seem to make this work either. I’m trying to move the ShopPay terms below my add to cart buttons. I’ve updated my theme.liquid file with the second code block you submitted and it doesn’t seem to do anything for me:

Example:

https://shop.nack.is/products/base-imac?variant=31775377195081

[PaulNewton]

@samrose , @Lyra , @nack

At minimum always ab-test changes such as this.

this ugly and horrible phrase/lettering under my price tag

If the problem is aesthetics simply moving it doesn’t solve that.

I like the option for installment payments, but its in a ugly position, like wth was Shopify developers thinking of putting it there -.-

By choosing to move it you are ignoring the conversion UX design guidance of a billion dollar company, and many other installments providers; they spend a lot of money to know what they are doing so they can help you make more money so they can get a cut.

It’s a converting UX pattern of pay-installment services to have the installment messaging near pricing, mostly above the fold.

It’s so common customers may expect it as part of determining if you do installments and bounce if not.

There’s also whether by putting it after the AtC button that may inadvertently be interrupting the flow with curiosity and when the modal closes the AtC gets ignored as they rethink prices.

At minimum always ab-test changes such as this.

Another customization is to also only display it after a customer has $50+ worth in the cart, or the product being viewed is more than $50. Again test for validity.

[Fiaz-Tariq]

Hey @samrose , you can change the shop pay banner placement through custom coding. Just you need to place this code where you want to show banner:
{%- form ‘product’, product, id: form_id -%}

{{ form | payment_terms }}

{%- endform -%}

[nack]

That’s helpful to know. I can’t seem to remove it from where it defaults, however (screenshot in previous post) .

[nack]

Holy! Just figured it out actually. It’s in product-form.liquid

I found this on lines 8-13:

{% comment %}
Automatically inserted by Shop Pay Installments theme updater
{% endcomment %}
{% unless settings.disable_autogenerated_payment_terms %}
{{ form | payment_terms }}
{% endunless %}

and moved to line 67 after:

{{ form | payment_button }}
{% endif %}

And now it’s just where I wanted it to be.