How to remove more payment options text on dynamic button

Store Design
,

Topic summary

Goal: hide the “More payment options” text on the dynamic checkout button in the Shopify Prestige theme while keeping the separator line.

Proposed solution: add a CSS rule in Online Store → Edit code → Assets → theme.css:

  • .shopify-payment-button__more-options { display: none; }
    This targets the element showing that text and hides it.

Issue encountered: initial addition didn’t work. A screenshot revealed the code was placed after an @media screen and (max-width: 750px) { block that lacked a closing curly brace, affecting where styles applied.

Fix: move the CSS rule above the @media line, or properly close the media query so it becomes:

  • @media screen and (max-width: 750px) { .PageHeader–withBackground { min-height: 250px!important; } }
    This ensures the hide rule applies globally as intended.

Outcome: after adjusting placement/closing braces, the text was successfully removed. Status: resolved; no further action needed.

Summarized with AI on February 5. AI used: gpt-5.
1

Website: Zoticnewyork.com

Theme: Prestige

How do I remove the text and leave the line.

8ad0d6a5-d64e-4730-87ad-91400a4219d5.png
8ad0d6a5-d64e-4730-87ad-91400a4219d5.png538Ă—177 3.99 KB

2

Do you know how to edit your themes code?

From the Online Store section, click the 3 dots before the green customize button, select edit code.

In the left hand panel scroll down to the folder called “Assets” click on it to show the files, click on theme.css. At the very bottom of that file add:

.shopify-payment-button__more-options{
  display:none;
}

and that should permenantly hide that button.

3

did not work

4

did you leave the code in there? if not, place it back at the bottom of that page so I can see why it didn’t work. If you did, then you’ve put it in the wrong place.

5

I have placed :slightly_smiling_face: in theme.css

6

can you take a screenshot of the entire screen showing the code as well as the code above it and the folders on the left please?

7

9af16f90-7a06-4943-8602-e7ed8652ed3f.png
9af16f90-7a06-4943-8602-e7ed8652ed3f.png3440Ă—1272 260 KB

8

Okay, so there’s a line :

@media screen and (max-width: 750px) {
and this is meant to have a closing } but I don’t know where its meant to be, so copy the

.shopify-payment-button__more-options{
display:none;
}
so that it is ABOVE that line.
I think you could probably just put a closing bracket after the first style so it looks like:

@media screen and (max-width: 750px) {
.PageHeader–withBackground {
min-height: 250px!important;
}
}
but I’m just assuming the styles below that are for all views.

1 Like
9

It worked