Product Page - Modifications

[ErhatRO]

 

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! 

[DaisyVo]

Hi @ErhatRO 

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

Best,

Daisy

[ErhatRO]

Hi @DaisyVo 

right5785*

RIGHTEOUS OFFICIAL

[DaisyVo]

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 

[ErhatRO]

Hi @DaisyVo 

Thank you! That worked!

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

[DaisyVo]

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 

[ErhatRO]

It says it cant be published

[DaisyVo · Accepted solution]

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 </head>

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

Let me know if it works!

Best,

Daisy 

[ErhatRO]

@DaisyVo 

Perfect! Thank you!