Help with font sizes and removing navigation bar

[Korsa]

Hey guys

My site is Www.korsaclo.com (pass: jerjeff)

I need help with

1. making the font of “most recent” and “subscribe” smaller than what the shopify editor allows me to do on the home page

2. Getting rid of the navigation bar (the bar that says: “Home > All > [insert product category]”  in every page when for example you click on a product 

3. On any product page, changing the font size of the product smaller than the shopify editor page. For eg making 

4. on the Footer (mobile version), I want to remove the drop down and have the footer subjects all available without having to click and have it pop down

[JHKCreate · Accepted solution]

Hi @Korsa 

For #2 please add the following code in your theme.css file:

.breadcrumbs-wrapper {
    display: none;
}

However there is normally a settings option in the Theme that allows you to toggle that.

For #1 & #3 we can reduce the size allowed on the Shopify Editor , that would need Collaborator access but this is better than doing it the hardcoded way.

Let me know!

[iCart_App · Accepted solution]

Hello @Korsa,

Hope you are doing well.

Add the following CSS to your theme.css file to make all the requirements possible. Increase or decrease the font size as per your convenience.

1. making the font of “most recent” and “subscribe” smaller than what the shopify editor allows me to do on the home page
=>
h2.featured-collection__heading {
font-size: 18px !important;
}

2. Getting rid of the navigation bar (the bar that says: “Home > All > [insert product category]” in every page when for example you click on a product
=>
.breadcrumbs {
display: none !important;
}

3. On any product page, changing the font size of the product smaller than the shopify editor page. For eg making
=>
h1.product__title {
font-size: 20px !important;
}

4. on the Footer (mobile version), I want to remove the drop-down and have the footer subjects all available without having to click and have it pop down
=>
@media only screen and (max-width: 768px){
.footer-top__block-content {
display: block !important;
max-height: none !important;
visibility: visible !important;
opacity: 1 !important;
transition: none !important;
}
}

[iCart_App · Accepted solution]

Hello @Korsa,

1. I want to get rid of "Footer Menu" completely because it's still showing as well as on the Web view:
=> To Remove the Footer menu insert the below CSS:
h2.footer-top__block-heading {
display: none;
}

.footer-top__block-content {
margin-top: 23px;
margin-bottom: -56px;
}

@media only screen and (max-width: 768px) {
.footer-top__block-content {
margin-top: -8px;
margin-bottom: -15px;
}
}

2. The "Most Recent" I was able to change font size for but the "SUBSCRIBE" is still the same font.
=> To change the Subscribe text insert the below CSS:
h2.newsletter-section__heading {
font-size: 18px;
}

=> The code will customize these two texts only.

3. it's now created an actual link above the product for some reason to the collection haha, For all products, Could I get help for this too, please?
=> You need to remove the line of code from the product.liquid or if you have product-tempalte.liquid file then from that file. Please refer to the below images.

 

 

4. now when I'm going through the edited code, it does what each code is designed to do but when I do your next code, it undoes what the previous code does
=> Can you please send me the screenshot, so that I can check and get back to you with a solution?

[iCart_App · Accepted solution]

Please lookout for the 'product__collection-link' in product.liquid file to remove the line of code <a href....

Add the below CSS to remove the [object Object]:
div#shopify-section-product-recommendations {
display: none;
}

[JHKCreate · Accepted solution]

Hi @Korsa 

For #2 please add the following code in your theme.css file:

.breadcrumbs-wrapper {
    display: none;
}

However there is normally a settings option in the Theme that allows you to toggle that.

For #1 & #3 we can reduce the size allowed on the Shopify Editor , that would need Collaborator access but this is better than doing it the hardcoded way.

Let me know!

[iCart_App · Accepted solution]

Hello @Korsa,

Hope you are doing well.

Add the following CSS to your theme.css file to make all the requirements possible. Increase or decrease the font size as per your convenience.

1. making the font of “most recent” and “subscribe” smaller than what the shopify editor allows me to do on the home page
=>
h2.featured-collection__heading {
font-size: 18px !important;
}

2. Getting rid of the navigation bar (the bar that says: “Home > All > [insert product category]” in every page when for example you click on a product
=>
.breadcrumbs {
display: none !important;
}

3. On any product page, changing the font size of the product smaller than the shopify editor page. For eg making
=>
h1.product__title {
font-size: 20px !important;
}

4. on the Footer (mobile version), I want to remove the drop-down and have the footer subjects all available without having to click and have it pop down
=>
@media only screen and (max-width: 768px){
.footer-top__block-content {
display: block !important;
max-height: none !important;
visibility: visible !important;
opacity: 1 !important;
transition: none !important;
}
}

[Korsa]

Hi,

That worked! But it has risen some other issues.

1. 

This on the mobile view, I want to get rid of "Footer Menu" completely because it's still showing

as well as on the Web view: 

2. The "Most Recent" I was able to change font size for but the "SUBSCRIBE" is still the same font.

But also in saying this, is there a way to customise the font only for the "Most Recent" and Subscribe"?

[Korsa]

Also, 

it's now created an actual  link above the product for some reason to the collection haha

For all products

Could I get help for this too please?

Thank you so much

[Korsa]

Also, now when I'm going through the edited code, it does what each code is designed to do but when I do your next code, it undoes what the previous code does 

I think the codes are sorta undoing each other

[iCart_App · Accepted solution]

Hello @Korsa,

1. I want to get rid of "Footer Menu" completely because it's still showing as well as on the Web view:
=> To Remove the Footer menu insert the below CSS:
h2.footer-top__block-heading {
display: none;
}

.footer-top__block-content {
margin-top: 23px;
margin-bottom: -56px;
}

@media only screen and (max-width: 768px) {
.footer-top__block-content {
margin-top: -8px;
margin-bottom: -15px;
}
}

2. The "Most Recent" I was able to change font size for but the "SUBSCRIBE" is still the same font.
=> To change the Subscribe text insert the below CSS:
h2.newsletter-section__heading {
font-size: 18px;
}

=> The code will customize these two texts only.

3. it's now created an actual link above the product for some reason to the collection haha, For all products, Could I get help for this too, please?
=> You need to remove the line of code from the product.liquid or if you have product-tempalte.liquid file then from that file. Please refer to the below images.

 

 

4. now when I'm going through the edited code, it does what each code is designed to do but when I do your next code, it undoes what the previous code does
=> Can you please send me the screenshot, so that I can check and get back to you with a solution?

[Korsa]

Hi there Binal,

I've actually ended up doubling up on the code and it each code has now worked. 

So even though the code is in there twice, it seems to have done what each code is designed to do! Much appreciated.

Here is the how the code looks now:

Now regarding help with the collection link appearing in the product, I am in the product-template.liquid page and I can not seem to find that particular line of code to remove the collection link.

Would these be relevant?

On another issue: 

I've seen this pop up on the product page:

[iCart_App · Accepted solution]

Please lookout for the 'product__collection-link' in product.liquid file to remove the line of code <a href....

Add the below CSS to remove the [object Object]:
div#shopify-section-product-recommendations {
display: none;
}

[Korsa]

Your code to remove the 'object object' text has worked.

Still the issue with the code to remove the link:

- 

>Product.liquid guides to me product-template.liquid

>searching 'a href' returns no results

> searching 'url' also no results

> searching 'link' returns 2 results

1. 

2. 

Thanks in advance again!! 🙂

[iCart_App · Accepted solution]

Hello @Korsa,

I have checked the screenshots. Thank you for sharing!

To remove the link from the product title I need access to your store for a further look. If you don't mind can I send a collaborator request to your store? If yes, please send me the collaboration code to send the request.

[Korsa]

Sending PM now