Product Page - Modifications

Store Design
,

Topic summary

Main request: modify the product page by (1) removing the image counter (e.g., “1/2”) and (2) removing the zoom overlay’s circle icon.

Key actions and outcomes:

  • Image counter: Implemented via Theme Settings > Customize > Theme Settings > Custom CSS. A mobile-only CSS rule (max-width: 768px) was added to hide the slider controls containing the counter. Result confirmed working.
  • Zoom circle: Clarified that the circle is the modal close button and should remain for usability. Instead of removing it, the user asked to display an “X” inside the button.
  • “X” label: A CSS snippet targeting the modal close button’s ::after content was provided to show “X” (also scoped to mobile). Initial attempt couldn’t be published; moving the code via Edit code > theme.liquid (inserted above ) resolved the issue.

Other notes:

  • Screenshots of the product page were shared to illustrate the UI elements.
  • Store access password was requested and provided for review.

Status: Resolved. The image counter is hidden on mobile, and the zoom close button now displays an “X.”

Summarized with AI on December 15. AI used: gpt-5.
1

Oversize Heavyweight Fleece Hoodie - 460 GSM – RIGHTEOUS OFFICIAL.jpeg
Oversize Heavyweight Fleece Hoodie - 460 GSM – RIGHTEOUS OFFICIAL.jpeg1179×2556 70.9 KB

Oversize Heavyweight Fleece Hoodie - 460 GSM – RIGHTEOUS OFFICIAL.jpeg
Oversize Heavyweight Fleece Hoodie - 460 GSM – RIGHTEOUS OFFICIAL.jpeg1179×2556 118 KB

Hello!
I’m hoping I may get assistance with the following:

  1. Removing the image counter on the product page < 1/2 >

  2. When clicking on a product it zooms in and there is a circle in the top right. I would like that removed.

Thank you!

2

Hi @ErhatRO

Could you please share the password of your store with me so I can check it?

Best,

Daisy

3

Hi @DaisyVo

right5785*

RIGHTEOUS OFFICIAL

4

Hi @ErhatRO

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
product-info .product .slider-buttons.quick-add-hidden {
    display: none;
}
}

Here is the result: https://prnt.sc/Z5blMaLP-G1m

Regarding issue number 2 you mentioned, that circle is the close button. If it’s hidden, you won’t be able to close the image. It’s essential to keep it visible for users to close the image or pop-up easily.

I hope this helps

Best,

Daisy

1 Like
5

Hi @DaisyVo

Thank you! That worked!

Is there a code to put an X or “close” inside of the circle?

6

Hi @ErhatRO

Please add this code in the same place

@media screen and (max-width: 768px){
product-modal .product-media-modal__dialog button[aria-label="Close"]::after {
    content: "X";
}
}

I hope this helps

Best,

Daisy

7

It says it cant be published

8

Hi @ErhatRO

Could you please try again with these steps

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above

Let me know if it works!

Best,

Daisy

1 Like
9

@DaisyVo

Perfect! Thank you!

1 Like