How to hide Options Box from showing on the frontend

Technical Q&A
1

I want to Hide the Name text box from the Frontend only. https://gyazo.com/f45524e1414a5d00f4a0b737c8143cdc https://gyazo.com/73474c75203e28a40bb03720e54a94b9

this is a similar fix to this problem but in my case i only want to Hide the “Name”

Below code taken from google console code for this.

Name
2

Hi @Chad25

Welcome to Shopify Community.

Aibek is here from Speedimize.io

You can hide the inline styles as below:


Or add in the end of theme.css:

```css
#SingleOptionSelector-0, label[for="SingleOptionSelector-0"] {
display: none;
}

Hope that helps you.

3

Thank you but when you say theme css do you mean

theme. scss. liquid

4

Yes, it is.

If you find this difficult.

Can you share URL of your shop and we can provide you a solution.

5

ok great i did that but it now is out of alignment https://gyazo.com/b8fafb09214e875b75ba14aa6bbe098c ?

what could fix this issue

6

also looks to have removed another filed on other products “the SIZE Filed” https://gyazo.com/924194b78a29d8262d3b33b6e7720567

7

It’s very hard to find a solution with just screenshoots.

Can you please share the URL of your shop? So we can provide solution for your shop/

8

Hello @Chad25
please Add this css

#SingleOptionSelector-0, label[for="SingleOptionSelector-0"] {
display: none;
}
9

Not looking to give admin access at this point take a look at the google console inspect element https://www.benthandcraftedrings.com/collections/forces-of-nature/products/handcrafted-wooden-ring-mens-wooden-ring-with-lapis-inlay-stones

10

We’re not looking for admin requests, now it’s forbidden in Shopify Community.

It can be done without it. Thank you for your cooperation.

Here is the solution:

add this code to the end of the theme.scss liquid:

.template-product .selector-wrapper.js.product-form__item:nth-child(1) {
    display: none;
}
11

thank you for your response but as you will see from above messages i tried this and yes it worked but it was also removing the Size box and the Name Box.

12

Soz thought you wanted admin… i added that code but when you load another item you can see its removed the name but ALSO the SIZE https://www.benthandcraftedrings.com/collections/forces-of-nature/products/paua

i need the size and Width

13

You have accidentally removed this line:

0rgYOel
0rgYOel3034×1552 723 KB

we disabled our style now everything works fine. Can you please check?

14

when adding this code

#SingleOptionSelector-0, label[for=“SingleOptionSelector-0”] {
display: none;
}

to the css file it is removing both NAME BOX AND SIZE BOX i only want it to not show the name box

15

short video to help explain what could be the issue https://storyxpress.co/video/kpp1p0ndw0y7601gc

16

Ok, now try this:

.template-product .selector-wrapper.js.product-form__item:nth-child(1) {
    display: none;
}

This style is supposed to work. It will only hide the first element, in your case its “Name”. But you probably deleted it.

17

Now everything is much clear for us.

So now try this:

#product_form_6729509470387 .selector-wrapper.js.product-form__item:nth-child(1) {
display: none;
}

We specified the product id, since you only want to hide it for one product. Now everything should work as normal.

18

Thank you very much kind sir… that did the job just fine.