To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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
13772 2096 2691

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

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant

View solution in original post

Replies 10 (10)
dmwwebartisan
Shopify Partner
11251 2405 3459

@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 1529

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

aside#collectionFilters {
    display: none !important;
}

Thank You.

oscprofessional
Shopify Partner
13772 2096 2691

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

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
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
13772 2096 2691

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

 

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify App | Custom Pricing Wholesale App | Shopify SEO | Digital Marketing | Shopify Strategies Consultant
GregoryKika
Tourist
24 0 0

The solution from  worked great!

Thank you very much 🙂

Zworthkey
Shopify Partner
5581 642 1529

@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
11251 2405 3459

@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
17 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
11251 2405 3459

@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.