How do I edit the black button "Buy it now" to "Köp nu", so it looks exactly the same as the other?

Shopify Discussion

Topic summary

A Shopify store owner wants to translate the “Buy it now” button text to Swedish (“Köp nu”) while maintaining the same styling as a reference site.

Problem:

  • The black “Buy it now” button needs to display “Köp nu” instead
  • The goal is to match the appearance of another Swedish Shopify store (KidsOneStore)
  • Screenshots were provided showing both sites for comparison

Solution provided:
A CSS-based workaround was offered:

  • Navigate to Online Store → Themes → Edit Code
  • Open the theme.liquid file in the Layout folder
  • Add custom CSS before the </head> tag that:
    • Uses ::after pseudo-element to display “Köp nu” text
    • Hides the original button text with color: transparent
    • Positions the new text using absolute positioning

Status: Solution proposed but not yet confirmed as implemented or tested.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

How do I edit the black button “Buy it now” to “Köp nu”, so it looks exactly the same as KidsOneStore?

My website: https://kryddsortimentet.se/products/smaklokens-grillmastare-presentset

Password: Krydda123

KidsOneStore: https://kidsonestore.se/products/lundby-dockset-nikki

Skärmavbild 2025-04-21 kl. 18.09.46.png
Skärmavbild 2025-04-21 kl. 18.09.46.png1348×1234 82.8 KB

Skärmavbild 2025-04-21 kl. 18.12.17.png
Skärmavbild 2025-04-21 kl. 18.12.17.png2880×1772 389 KB

2

Hi @Williamtommy,

Go to your Shopify Admin Panel.

Navigate to Online Store → Themes.

Click on Edit Code (not Customize).

Open the theme.liquid file (found inside the Layout folder).

Scroll down and paste the code just before the tag:

<style>
.shopify-payment-button__button::after {
  content: "Köp nu";
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.shopify-payment-button__button {
  color: transparent !important; /* Hide original text */
  position: relative;
}
</style>