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 ![]()
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 ![]()
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
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
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:
Usage:
{% render ‘buy-buttons’, block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
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 }}”
{%- 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 -%}
{%- 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 }}”
{{ 'products.product.pickup_availability.unavailable' | t }}
{{ 'products.product.pickup_availability.refresh' | t }}{%- endif -%}
Works incredible well, thanks ![]()
Happy to help you…!!!