Change text on button "Buy it now"

[Hugobrunto]

Hi Experts, 

I want to change this text without changing the button style, color or the animation. 

Please anyone, Where is the file/folder located so I just simply can change the text? 

Thank you ❤️

[rajweb]

Hey @Hugobrunto ,

To change the text for the "Buy it now" button without altering its style, color, or animation, you'll need to locate the file that contains this button's text. In most Shopify themes, this button text can be found in one of the following places:

Theme Language Settings:

-Online Store > Theme > Edit languages

-In the language Editor, search for "Buy it now" in the fields. Many themes have the button text configurable directly here.

Product Template Files:

If you don’t find it in the language settings, go to Online Store > Theme > Edit Code \

Look for the product page template, which might be located in Sections (e.g., product-template.liquid) or Templates  (e.g.,  product.liquid).

Search within these files for Buy it now. You may find it hardcoded here, or it may reference a translation variable that you can modify in the language settings.

JavaScript or Snippets:

Sometimes, the "Buy it now" text is added through a JavaScript file or a snippet.

Check the Snippets folder for files that may contain button customization, such as product-form.liquid or buy-it-now.liquid.

Let me know if you need further guidance on locating or editing the file.

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[Hugobrunto]

Hi Rajweb, 

Thank you very much for good instructions. I tried all your solutions but I couldn't locate it anywhere. I do have a snippet folder named "Buy-buttons.liquid" but I couldn't find the text in there, "Buy It Now" as the button is showing.. 

Is is possible that this text still is there but not shown? How could I change it then? 😕 

Here is the full code in that folder. 

{% comment %}
Renders product buy-buttons.
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} product form id.
- section_id: {String} id of section to which this snippet belongs.
- show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

Usage:
{% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
<div {{ block.shopify_attributes }} class="{% if block.settings.disable_animation == true %}no-animation{% endif %}">
{%- if product != blank -%}
{%- liquid
assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign show_dynamic_checkout = false
if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
assign show_dynamic_checkout = true
endif
-%}

<product-form
class="product-form"
data-hide-errors="{{ gift_card_recipient_feature_active }}"
data-section-id="{{ section.id }}"
>
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg
aria-hidden="true"
focusable="false"
class="icon icon-error"
viewBox="0 0 13 13"
>
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>

{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
class="product-variant-id"
>

{%- if gift_card_recipient_feature_active -%}
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
{%- endif -%}

<div class="product-form__buttons">
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
<button
id="ProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
>
<!-- **bleep** BÖRJAN SPECIAL BUY BUTTON GÖR EN KUNDBESTÄLLNING -->
<span>
{%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
{{ 'products.product.sold_out' | t }}
{%- else -%}
{% if template == "product.special-order" %}
Beställ
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endif %}
{%- endif -%}
</span>
<!-- **bleep** KOD SPECIAL BUY BUTTON GÖR EN KUNDBESTÄLLNING -->
<div class="loading-overlay-spinner hidden">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>
{%- else -%}
<div class="product-form">
<div class="product-form__buttons form">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary"
disabled
>
{{ 'products.product.sold_out' | t }}
</button>
</div>
</div>
{%- endif -%}

{%- if show_pickup_availability -%}
{{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
| where: 'pick_up_enabled', true
-%}

<pickup-availability
class="product__pickup-availabilities no-js-hidden quick-add-hidden"
{% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
available
{% endif %}
data-root-url="{{ routes.root_url }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
>
<template>
<pickup-availability-preview class="pickup-availability-preview">
{% render 'icon-unavailable' %}
<div class="pickup-availability-info">
<p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
<button class="pickup-availability-button link link--text underlined-link">
{{ 'products.product.pickup_availability.refresh' | t }}
</button>
</div>
</pickup-availability-preview>
</template>
</pickup-availability>

<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</div>

[Rahul_dhiman · Accepted solution]

Hello @Hugobrunto 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

button.shopify-payment-button__button--unbranded {
font-size: 0rem;
}

.shopify-payment-button__button--unbranded::before {
content: "Your Text Here"; /*add the text here*/
font-size: 1.6rem;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[Hugobrunto]

Works incredible well, thanks ❤️ 

[Rahul_dhiman]

Happy to help you...!!!