Remove the 'X' button from my product page

Store Design
,
1

Hi, I want to change the ‘X’ button to say ‘CLOSE’ in Times New Roman when you click on a product image to enlarge.

I’m using the dawn theme (https://41nc49jsxsxvgmgl-74826613002.shopifypreview.com)

Capture 4.PNG
Capture 4.PNG395×787 293 KB

1 Like
2

Hi @rene94 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_0-1716539613707.png
BSSTechVenture_0-1716539613707.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716539619574.png
BSSTechVenture_1-1716539619574.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

.product-media-modal__toggle[aria-label="Close"] {
   display: none !important; 
}

Here is result:

BSSTechVenture_2-1716539650575.png
BSSTechVenture_2-1716539650575.png1917×880 145 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.product-media-modal__toggle {
display: none;
}

ZestardTech_0-1716540050237.png
ZestardTech_0-1716540050237.png1850×691 111 KB

4

Hi thanks for the reply, but i dont just want to remove it i want to replace it with the word CLOSE in the times new roman font

5

Hi @rene94 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.product-media-modal__toggle {
    border: none !important;
    outline: none !important;
}

Step 4: Search file theme.liquid. Then insert this code to your file:

BSSTechVenture_0-1716624913465.png
BSSTechVenture_0-1716624913465.png1919×879 92.8 KB

Here is result;

BSSTechVenture_1-1716625035997.png
BSSTechVenture_1-1716625035997.png1914×885 147 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

6

Hello @rene94 ,

The preview link has been expired. can you please share another one so that I can check and suggest you a possible solution?

Thank you

7

https://vzz6e44p25pau6si-74826613002.shopifypreview.com here you go

8

Thanks for sharing.

Need to add code into base.css file

.product-media-modal__toggle{
    display: none !important;
}