Help with font sizes and removing navigation bar

Solved
Korsa
New Member
8 0 0

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

Accepted Solutions (5)

Accepted Solutions
JHKCreate
Shopify Partner
2922 504 723

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

BinalSavani
Shopify Partner
164 13 31

This is an 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;
}
}

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

BinalSavani
Shopify Partner
164 13 31

This is an 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.

 

Screenshot_34.png Screenshot_35.png

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?

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

BinalSavani
Shopify Partner
164 13 31

This is an 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;
}

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

BinalSavani
Shopify Partner
164 13 31

This is an 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.

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

Replies 11 (11)
JHKCreate
Shopify Partner
2922 504 723

This is an 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!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

BinalSavani
Shopify Partner
164 13 31

This is an 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;
}
}

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

Korsa
New Member
8 0 0

Hi,

 

That worked! But it has risen some other issues.

1. 

Korsa_0-1634608745316.png

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: 

Korsa_1-1634608795434.png

 

 

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
New Member
8 0 0

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_0-1634609250287.png

 

 

 

Korsa
New Member
8 0 0

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

 

 

BinalSavani
Shopify Partner
164 13 31

This is an 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.

 

Screenshot_34.png Screenshot_35.png

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?

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

Korsa
New Member
8 0 0

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:

Korsa_0-1634636522918.png

 

 

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?

Korsa_1-1634636635442.png

 

On another issue: 

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

Korsa_2-1634636710787.png

 

BinalSavani
Shopify Partner
164 13 31

This is an 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;
}

Binal Savani | iDentixweb


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

View solution in original post

Korsa
New Member
8 0 0

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

 

Still the issue with the code to remove the link:

Korsa_0-1634645476286.png

 

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

>searching 'a href' returns no results

Korsa_1-1634645551348.png

 

> searching 'url' also no results

Korsa_2-1634645586451.png

 

> searching 'link' returns 2 results

1. 

Korsa_3-1634645648389.png

 

2. 

Korsa_4-1634645666546.png

 

 

 

Thanks in advance again!!