FROM CACHE - en_header

Hiding Labels in collections

Solved
GregoryKika
Tourist
24 0 0

Hello everyone, 

I'm having problems with hiding the "labels" bar in the left side of the page. I would like to be able to use the labels as metadata, without them showing in the webpage.

I basically want to remove the part that says :

COMPRAR POR

I'm using Debut theme.

I already tried using

 

.product-single__meta .single-option-radio__label {
    display: none;
}

 

 

The post I got the code from says I need to use it on the theme.scss.liquid asset section, I did it but it does not appear to work.

GregoryKika_0-1632302309787.png

This it the link to the page, the labels are only in that product because I'm trying to solve the problem first, but the idea would be to have this change affect the whole page.

Link Kika 

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
13256 2022 2584

This is an accepted solution.

@GregoryKika ,

Hi

 

 

aside#collectionFilters {
    display: none;
}
 .template-collection .large--four-fifths {
    width: 100%;
}

 

 

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 10 (10)
dmwwebartisan
Shopify Partner
11139 2393 3433

@GregoryKika 

Please try this code

@media only screen and (min-width: 769px){
 .template-collection .large--four-fifths {
    width: 100%;
}

.template-collection .grid-border--left {
    border-left: 0px solid transparent;
}

.template-collection .large--one-fifth {
    width: 0%;
    display: none;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
Zworthkey
Shopify Partner
5581 642 1523

@GregoryKika 
Paste this code on top of the theme.scss file.

aside#collectionFilters {
    display: none !important;
}

Thank You.

oscprofessional
Shopify Partner
13256 2022 2584

This is an accepted solution.

@GregoryKika ,

Hi

 

 

aside#collectionFilters {
    display: none;
}
 .template-collection .large--four-fifths {
    width: 100%;
}

 

 

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

Hey there, thanks for the answer!
It fixed the problem, but there seems to be an issue with the design now

GregoryKika_0-1632303475654.png

The products don't reach the far end of the page (where it says CARRITOS)

GregoryKika_1-1632303525207.png

This is the design, where it reaches the "end" of the page.

Any idea on how to fix this?

 

 

oscprofessional
Shopify Partner
13256 2022 2584

Hi @GregoryKika ,

On this page the size of the image is different, when you resize it with others then it will look fine !

oscprofessional_0-1632303880671.png

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
GregoryKika
Tourist
24 0 0

The solution from  worked great!

Thank you very much 🙂

Zworthkey
Shopify Partner
5581 642 1523

@GregoryKika 
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
div#CollectionSection {
    width: 133% !important;
    margin-left: -16% !important;
}
}
dmwwebartisan
Shopify Partner
11139 2393 3433

@GregoryKika 

Please try this code 

.template-collection .wrapper {
    max-width: 100% !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
BootlegCraig
Excursionist
15 0 1

Hi there! I'm trying to do the same, but I don't have a "theme.css.liquid" file in my assets folder. What I'm after is to have my collections just be images as the image has the collection name in it so it's not necessary to have the name of the collection in text over them. 

asdfasdf.PNGdafdsa.PNG

Express Yourself!
dmwwebartisan
Shopify Partner
11139 2393 3433

@BootlegCraig 

Please share your theme URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.