Remove the 'X' button from my product page

[rene94]

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)

[BSSCommerce-HDL]

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[aria-label="Close"] {
   display: none !important; 
}

Here is result: 

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 😍

[rene94]

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 

[BSSCommerce-HDL]

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: 

<script>
let btn_close_modal = document.querySelector('.product-media-modal__toggle');
if(btn_close_modal) {
  btn_close_modal.innerHTML = "Close";
}
</script>

Here is result; 

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 😍

[ZestardTech]

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;
}

[EFOLI-Emilia7]

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

[rene94]

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

[EFOLI-Emilia7]

Thanks for sharing.

Need to add code into base.css file

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