Solved

How can I remove footer badges from my online store?

manan123
Explorer
95 1 1

hey, i want to remove this highlighted badges from the footer , please help me to do so...

 

My store Url - https://mansaroverfurnishings.com/

manan123_0-1707805929957.png

 

Accepted Solutions (11)

Moeed
Shopify Partner
3695 932 1165

This is an accepted solution.

Hey @manan123 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.footer__top.page-width {
    display: none !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

ThePixelEdge
Shopify Partner
162 16 17

This is an accepted solution.

Hi @manan123 ,

You can open the Code editor and then find the file Section-footer.css and locate the line 


footer__top


Then you need to add below Css

.footer__top{
display:none;
}

 

If helpful then please Like and Accept Solution .
Buy me A Coffee

Whatsapp :- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications


Connect with Us in Our DMs | teampixeledge@gmail.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

HI @manan123 

Follow these Steps to get your result:

 

 Go to Online Store -> Edit Code->section-footer.css file

Add the following code :
Your previous code:

.footer__top {
    margin-top: 5rem;
    margin-bottom: 8.3rem;
 
}

Updated code:

.footer__top {
    margin-top: 5rem;
    margin-bottom: 8.3rem;
    display: none;
}

Result:

Screenshot 2024-02-13 134118.png

 



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123  You can try the following steps:
Go to Online Store -> Edit component-image-with-text.css file

 

.image-with-text__text-item{ 
  display:none;
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

manan123
Explorer
95 1 1

This is an accepted solution.

oh okay ....this looks very big on store i want to make it little small how can i do that

manan123_0-1707821039834.png

 

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
You can try that 

.image-with-text{
  width:70%;
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
Use this code 

 

 

@media screen and (max-width: 768px) {
   .image-with-text{
     width:auto;
   }
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
First of all thank Manan123, When my solution helps you, Please mark it as an accepted solution and Like the solution, So that we can help you further, In our previous solution, you couldn't like any of the themes 🥲🥲.

Now you try these step 

<label class="field__label" for="NewsletterForm--sections--15627965988911__newsletter_6hVQ4p"> Enter your email</label>

.newsletter-form__button:not(:focus-visible):not(.focused) {
    background: #363a3e;
}

.newsletter-form__button .icon {
    width: 2.5rem;
    color: black;
}


 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

Hi @manan123 
In the NewslatterForm section file  (In your liquid file you add the below code)

<label class="field__label" for="NewsletterForm--sections--15627965988911__newsletter_6hVQ4p">Enter Your  Email </label>

In your component-newsletter.css file add the below code 

.newsletter-form__button:not(:focus-visible):not(.focused) {
    background-color: #786f6f;
}


Result: 

BrainStation23_0-1707893397097.png

 

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
Here {{ 'newsletter.label' | t }} this  text comes from localization if you went to change email -> Enter your email then you need to cheng the newsletter label in the setting section that you will find in a local folder.
And if you went to cheng the icon color we need to add this code 

.newsletter-form__button .icon {
    width: 2.5rem;
    color: black;
}



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

hi @manan123 ,

It seems there is a mouseover handler in the slideshow component. I inspected you're store and found the handler. You  can add a condition in the mouseover handler to ignore mouseover event type for pausing auto rotation. In you're assets/global.js you can replace the handler function "focusInHandling" with the updated function below. It tells the browser to ignore mouseover events when checking to pause auto rotation. You need to replace the function code with the given function. contact us if you need anymore help with this.

  focusInHandling(event) {
    if (this.sliderAutoplayButton) {
      const focusedOnAutoplayButton =
        event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
      if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
        this.play();
      } else if (this.autoplayButtonIsSetToPlay) {
        if(event.type !== "mouseover")
        this.pause();
      }
    } else if (this.querySelector('.announcement-bar-slider').contains(event.target)) {
      if(event.type !== "mouseover")
      this.pause();
    }
  }



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

Replies 31 (31)

Moeed
Shopify Partner
3695 932 1165

This is an accepted solution.

Hey @manan123 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.footer__top.page-width {
    display: none !important;
}
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
manan123
Explorer
95 1 1

thanks you so much ...its worked i placed a new badge now but im having a problem i want to shift this image to center please help me, its appearing perfectly on mobile , hence want no changes on mobile 

manan123_0-1707818169660.png

 

 

ThePixelEdge
Shopify Partner
162 16 17

This is an accepted solution.

Hi @manan123 ,

You can open the Code editor and then find the file Section-footer.css and locate the line 


footer__top


Then you need to add below Css

.footer__top{
display:none;
}

 

If helpful then please Like and Accept Solution .
Buy me A Coffee

Whatsapp :- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications


Connect with Us in Our DMs | teampixeledge@gmail.com
manan123
Explorer
95 1 1

thanks you so much ...its worked i placed a new badge now but im having a problem i want to shift this image to center please help me, its appearing perfectly on mobile , hence want no changes on mobile 

manan123_1-1707818204509.png

 

 

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

HI @manan123 

Follow these Steps to get your result:

 

 Go to Online Store -> Edit Code->section-footer.css file

Add the following code :
Your previous code:

.footer__top {
    margin-top: 5rem;
    margin-bottom: 8.3rem;
 
}

Updated code:

.footer__top {
    margin-top: 5rem;
    margin-bottom: 8.3rem;
    display: none;
}

Result:

Screenshot 2024-02-13 134118.png

 



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

thanks you so much ...its worked i placed a new badge now but im having a problem i want to shift this image to center please help me, its appearing perfectly on mobile , hence want no changes on mobile 

manan123_0-1707818018363.png

 

Store url -https://mansaroverfurnishings.com/

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123  You can try the following steps:
Go to Online Store -> Edit component-image-with-text.css file

 

.image-with-text__text-item{ 
  display:none;
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

how can i get this view??

BrainStation23
Shopify Partner
260 43 41

@manan123 
You may need custom coding for that
Like to reach you further 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

This is an accepted solution.

oh okay ....this looks very big on store i want to make it little small how can i do that

manan123_0-1707821039834.png

 

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
You can try that 

.image-with-text{
  width:70%;
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

thankyou so much!!

manan123
Explorer
95 1 1

hey , it also decreases the size on mobile devices i dont want any changes on mobile please help me

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
Use this code 

 

 

@media screen and (max-width: 768px) {
   .image-with-text{
     width:auto;
   }
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

thankyou so much!!! one more thing i want to customize my only email form below that badges

manan123_1-1707824563871.png

 

i want placeholder "enter your email " instead of only  "email", & want to put colour in arrow also just like this image below

manan123_0-1707824463762.png

i want to make my make my email form customizable like that please help me to do so...

 

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
First of all thank Manan123, When my solution helps you, Please mark it as an accepted solution and Like the solution, So that we can help you further, In our previous solution, you couldn't like any of the themes 🥲🥲.

Now you try these step 

<label class="field__label" for="NewsletterForm--sections--15627965988911__newsletter_6hVQ4p"> Enter your email</label>

.newsletter-form__button:not(:focus-visible):not(.focused) {
    background: #363a3e;
}

.newsletter-form__button .icon {
    width: 2.5rem;
    color: black;
}


 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

sorry i forget to like that, btw i liked your solutions , can you please tell me in which section i have to put this code 

BrainStation23
Shopify Partner
260 43 41

@manan123 
NewsletterForm--sections 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

i have two files component-newsletter.css  & newsletter-section.css i tried to add code in both of files but nothing happened pleasse check

manan123
Explorer
95 1 1

please reply

manan123
Explorer
95 1 1

i have two files component-newsletter.css  & newsletter-section.css i tried to add code in both of files but nothing happened please check 

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

Hi @manan123 
In the NewslatterForm section file  (In your liquid file you add the below code)

<label class="field__label" for="NewsletterForm--sections--15627965988911__newsletter_6hVQ4p">Enter Your  Email </label>

In your component-newsletter.css file add the below code 

.newsletter-form__button:not(:focus-visible):not(.focused) {
    background-color: #786f6f;
}


Result: 

BrainStation23_0-1707893397097.png

 

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

the colour behind the arrow changes but the placeholder still not changed , i tried to put in liquid file but the code overlaps 

manan123_0-1707894198501.png

here's my newsletter.liquid file please tell me exact position where to enter the code

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="newsletter center {% if section.settings.full_width == false %}newsletter--narrow page-width{% endif %}">
<div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient content-container isolate{% if section.settings.full_width %} content-container--full-width{% endif %} section-{{ section.id }}-padding">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{%- when 'heading' -%}
<h2
class="inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h2>
{%- when 'paragraph' -%}
<div
class="newsletter__subheading rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.text }}
</div>
{%- when 'email_form' -%}
<div {{ block.shopify_attributes }}>
{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="contact[tags]" value="newsletter">
<div
class="newsletter-form__field-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="Newsletter-error--{{ section.id }}"
{% elsif form.posted_successfully? %}
aria-describedby="Newsletter-success--{{ section.id }}"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button
type="submit"
class="newsletter-form__button field__button"
name="commit"
id="Subscribe"
aria-label="{{ 'newsletter.button_label' | t }}"
>
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">
{%- render 'icon-error' -%}
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}
</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3
class="newsletter-form__message newsletter-form__message--success form__message"
id="Newsletter-success--{{ section.id }}"
tabindex="-1"
autofocus
>
{% render 'icon-success' -%}
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{% endform %}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>

{% schema %}
{
"name": "t:sections.newsletter.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "checkbox",
"id": "full_width",
"default": true,
"label": "t:sections.newsletter.settings.full_width.label"
},
{
"type": "paragraph",
"content": "t:sections.newsletter.settings.paragraph.content"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 52
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.newsletter.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Subscribe to our emails",
"label": "t:sections.newsletter.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "paragraph",
"name": "t:sections.newsletter.blocks.paragraph.name",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "<p>Be the first to know about new collections and exclusive offers.</p>",
"label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
}
]
},
{
"type": "email_form",
"name": "t:sections.newsletter.blocks.email_form.name",
"limit": 1
},
{
"type": "@app"
}
],
"presets": [
{
"name": "t:sections.newsletter.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "paragraph"
},
{
"type": "email_form"
}
]
}
]
}
{% endschema %}

 

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

@manan123 
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
Here {{ 'newsletter.label' | t }} this  text comes from localization if you went to change email -> Enter your email then you need to cheng the newsletter label in the setting section that you will find in a local folder.
And if you went to cheng the icon color we need to add this code 

.newsletter-form__button .icon {
    width: 2.5rem;
    color: black;
}



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

thankss!! its solved now, ....i'm having an issue on slideshow template image whenever i hover my mouse on picture its stops auto rotating, i want that it still auto rotates after i hover or point mouse on picture

manan123_0-1707897890592.png

please  check

manan123
Explorer
95 1 1

thankss!! its solved now, ....i'm having an issue on slideshow template image whenever i hover my mouse on picture its stops auto rotating, i want that it still auto rotates after i hover or point mouse on picture

manan123_0-1707907553607.png

 

BrainStation23
Shopify Partner
260 43 41

This is an accepted solution.

hi @manan123 ,

It seems there is a mouseover handler in the slideshow component. I inspected you're store and found the handler. You  can add a condition in the mouseover handler to ignore mouseover event type for pausing auto rotation. In you're assets/global.js you can replace the handler function "focusInHandling" with the updated function below. It tells the browser to ignore mouseover events when checking to pause auto rotation. You need to replace the function code with the given function. contact us if you need anymore help with this.

  focusInHandling(event) {
    if (this.sliderAutoplayButton) {
      const focusedOnAutoplayButton =
        event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
      if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
        this.play();
      } else if (this.autoplayButtonIsSetToPlay) {
        if(event.type !== "mouseover")
        this.pause();
      }
    } else if (this.querySelector('.announcement-bar-slider').contains(event.target)) {
      if(event.type !== "mouseover")
      this.pause();
    }
  }



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

again thanks!!!

manan123
Explorer
95 1 1

hey i want to add slider in this section that it auto rotate by itself , please help me...

manan123_0-1708073421789.png

my store url : https://mansaroverfurnishings.com/

BrainStation23
Shopify Partner
260 43 41

Hi @manan123 
To do that you need to add some theme code in your backend. And you need to hire a developer to do this.
 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com
manan123
Explorer
95 1 1

hii, can you please help me my cart drawer delete button does not working ...please help!

 

My store URL :https://mansaroverfurnishings.com/