Remove “options” button for products on featured collection list

[Rob_H247]

 

How to remove “options” button on the main page (featured product list) before you click the product? (Dawn Theme)  

[StephensWorld]

Hey Nananaanan,

Can you please provide me with a link to the page that this is showing on? 

Also, can you confirm which version of the the Dawn theme you're using? 

I just tried adding the latest version of the Dawn theme to my store, and adding a "featured collection" section/block to the homepage. It looks a bit different than yours does though --  it's a button you have to click instead of just showing the options ... but it does have the option to hide these (you just have to uncheck the "enable quick add button"). 

If your theme doesn't have this, then you're probably using an older version. If that's the case, then you'd want to look if your theme has the option to add custom CSS to the section:

If your theme has the "custom CSS" section, then I'd just need a link to your page, and then I can tell you what to add to that section to hide the options. 

If your theme doesn't have the "custom CSS" section, then you're probably using a really old version of the Dawn theme -- in that case, I would recommend adding the newest version of the theme to your store, and then re-setting up the theme, so that you have the most up-to-date functionality. 

Cheers,

Stephen

[Rob_H247]

I do have the option for custom CSS, the address is JaxandRylan.com currently using dawn 9.0, afraid to upgrade because of a warning “some code will not transfer automatically” I just want to add code to remove the options on the main page when looking at multiple items, (featured collections)  but of course still have options when you click the product and open the product page. 

[StephensWorld]

Try adding the following coding to the "custom CSS" box for the 'featured collection' block/section:

.swatches-globo {display: none;}

[Rob_H247]

Just tried It and It removed too much. It removed the color swatches, add to cart, and the options. I only want to remove the options…

[StephensWorld]

You kind of need to remove it all, or else keep it all. If you want the 'add to cart' buttons and swatches to appear on the page, then you'll also need the other variant options to show too (or else customers won't be able to choose which "option" variant they want when adding to cart). 

If you want to keep the swatches & add to cart button, then you should just split that product up into multiple products, so that the only variants are the colours. Currently, that product has 8 different variants for "options" -- each of those 'options' should be it's own product, if you want to keep the add-to-cart and swatches. 

As far as I'm aware, there's no way to hide just the 'options' and keep the swatches. It's an all-or-nothing situation. Best to just split the product up into separate products.

[Asad24]

What's your store url ?

[Made4uo-Ribe]

Hi @Rob_H247 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[Rob_H247]

Jaxandrylan.com 

[Asad24]

Go to your online store -> customize -> settings -> custom css 
and paste this code in the custom css section

.name-option {
display: none !important;
}

[Rob_H247]

This is the closest I’ve came to resolving and still better then having the options button, but is there any way to also remove the option pictures?  I just want the color swatches and the add to cart button so all products match rather they have options or not…. 

[Made4uo-Ribe]

Thanks, Is this solved?

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Rob_H247]

No, my understanding is that It is not possible to only remove the options, you must remove options and color swatches and add to cart button all together. O ly solution is to remove all 3 or separate options into separate product listings 

[Made4uo-Ribe]

Oh, Okay it because they have same name selector. 

Just like to confirm this is only you like to remove right? Not including the color and button? If it is try this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

#Slide-template--20841953853719__360a4930-7bde-44a3-a4ad-9a269787af4d-1 > div > div > div.card__content > div.card__information.globo-swatch-product-item > div.swatches-globo--list > div > div > div.globo-swatch-list > div:nth-child(2) {
    dsplay: none;
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Rob_H247]

 

This is exactly what I am trying to do yes. I pasted that code in base.css however preview of store shows no change…

[Made4uo-Ribe]

Try this one again.

#Slide-template--20841953853719__360a4930-7bde-44a3-a4ad-9a269787af4d-1 > div > div > div.card__content > div.card__information.globo-swatch-product-item > div.swatches-globo--list > div > div > div.globo-swatch-list > div:nth-child(2) {
    dsplay: none !important;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Rob_H247]

 

 

I must be doing something wrong because still I see no change at all. I copy that code and paste in after the last line in folder assets-base.css and save, then preview, I even published It as current live site

 and viewed on 2 browsers and no change is made, but the image you shared is the result I am looking for. Not sure…

also I’m now noticing that the upper left corner usually indicates that a recent version is available, not now says “no recent changes” even after the new code is clearly pasted and saved