How can I hide labels in Debut theme collections?

Solved

How can I hide labels in Debut theme collections?

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)

oscprofessional
Shopify Partner
15938 2383 3092

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12321 2551 3714

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Zworthkey
Shopify Partner
5581 642 1575

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

aside#collectionFilters {
    display: none !important;
}

Thank You.

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
15938 2383 3092

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Zworthkey
Shopify Partner
5581 642 1575

@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
12321 2551 3714

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

oscprofessional
Shopify Partner
15938 2383 3092

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
GregoryKika
Tourist
24 0 0

The solution from  worked great!

Thank you very much 🙂

BootlegCraig
Excursionist
25 0 3

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
12321 2551 3714

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app