How can I remove footer badges from my online store?

[manan123]

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

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

[Moeed · 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

[ThePixelEdge · 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;
}

[BrainStation23 · 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:

[BrainStation23 · 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;
}

[manan123 · Accepted solution]

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

[BrainStation23 · Accepted solution]

@manan123 
You can try that 

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

[BrainStation23 · Accepted solution]

@manan123 
Use this code 

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

[BrainStation23 · 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;
}

[BrainStation23 · 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 · 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;
}

[BrainStation23 · 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();
    }
  }

[Moeed · 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>
.product__stock {
    display: none !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[BrainStation23 · Accepted solution]

Hi @manan123 
You can follow these step to achieve your result 
Go to online store ->Edit code ->Go to component-price.css file and use bellow code 

@media screen and (mnax-width:768px){
    .price .price--large .price--on-sale  .price--show-badge{
          display:flex;
     }
   .badge .price__badge-sale,
   .badge .price__badge-sold{
      height: 2.5rem !important;
    
   }

}

[Moeed · 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

[manan123]

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 

[ThePixelEdge · 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;
}

[manan123]

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 

[BrainStation23 · 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:

[manan123]

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 

Store url -https://mansaroverfurnishings.com/

[BrainStation23 · 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;
}

[manan123]

how can i get this view??

[BrainStation23]

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

[manan123 · Accepted solution]

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

[BrainStation23 · Accepted solution]

@manan123 
You can try that 

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

[manan123]

thankyou so much!!

[manan123]

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

[BrainStation23 · Accepted solution]

@manan123 
Use this code 

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

[manan123]

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

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

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

[BrainStation23 · 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;
}

[manan123]

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]

@manan123 
NewsletterForm--sections 

[manan123]

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]

please reply

[manan123]

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 · 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: 

[manan123]

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

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 · 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;
}

[manan123]

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

please  check

[manan123]

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

[BrainStation23 · 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();
    }
  }

[manan123]

again thanks!!!

[manan123]

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

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

[BrainStation23]

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.
 

[manan123]

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

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

[BrainStation23]

Hlw @manan123 
We are going through your problem, but the problem you mentioned was working perfectly.
Is the problem solved? 

[manan123]

yes it is thanks

[manan123]

i'm facing an another problem , i want to hide the inventory message on my product page , please help me with that

here's url :https://mansaroverfurnishings.com/products/atena-bed-spread-collection-by-ross-1?_pos=1&_sid=128337b...

[Moeed · 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>
.product__stock {
    display: none !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[manan123]

thanks!! it worked..

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[manan123]

hey, i want to show this sale word in front of MRP not on next line on mobile devices also please help me to make this adjustments..

In desktop view its visible like this :

And in mobile devices its display like this :

I Want to display this sale word as same as its on desktop devices ...please help me with that

Here's the URL : https://mansaroverfurnishings.com/products/erenity-1

Thankyou...

[BrainStation23 · Accepted solution]

Hi @manan123 
You can follow these step to achieve your result 
Go to online store ->Edit code ->Go to component-price.css file and use bellow code 

@media screen and (mnax-width:768px){
    .price .price--large .price--on-sale  .price--show-badge{
          display:flex;
     }
   .badge .price__badge-sale,
   .badge .price__badge-sold{
      height: 2.5rem !important;
    
   }

}

[manan123]

hii im not able to see buy now button text on my website, Please check

https://mansaroverfurnishings.com/products/erenity-1

[BrainStation23]

Hi @manan123 . In your base.css file, you will find this code:

.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}

Replace this code with the code below:

.button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: var(--buttons-radius-outset);
    box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity));
}

Let us know if this works or not.

[manan123]

not working

[BrainStation23]

@manan123we can't see your buy now button anymore.

[manan123]

please check now

[BrainStation23 · Accepted solution]

@manan123. We don't think the code is updated. It is still the same.

You can update the following code in your base.css file:

.button::before, .shopify-challenge__button::before, .customer button::before, .shopify-payment-button__button--unbranded::before, .shopify-payment-button [role="button"]::before, .cart__dynamic-checkout-buttons [role="button"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow),var(--shadow-opacity));
}

Just remove ".shopify-payment-button__button--unbranded::before, .shopify-payment-button [role="button"]::before," this from the above code.

Here is the output:

[manan123]

thankss so much

[manan123]

Hii , i added a video using custom liquid , i want to make it bigger only for mobile device .Please help me with code

My website url ; https://mansaroverfurnishings.com/

Here's the code - 

<style>
video {
width: 100%;
display: block;
margin: 0 auto;
}

.desktop-video {
display: none;
}

.mobile-video {
display: block;
}

/* Bildschirmgrößen über 992 Pixel */
@media (min-width: 992px) {
.desktop-video {
display: block;
}

.mobile-video {
display: none;
}
}
</style>

<video autoplay muted playsinline loop class="mobile-video">
<source src="https://cdn.shopify.com/videos/c/o/v/db55b5c931d14d1eb26b513e1e9a1be6.mp4">
</video>
<video autoplay muted playsinline loop class="desktop-video">
<source src="https://cdn.shopify.com/videos/c/o/v/26e19309c4664a25aef29e39ab86916b.mp4">
</video>

Please help me

[BrainStation23]

HI @manan123 
Update your style code

<style>
video {
width: 100% !importnat;
display: block;
margin: 0 auto;
}

.desktop-video {
display: none;
}

.mobile-video {
display: block;
}

/* Bildschirmgrößen über 992 Pixel */
@media (min-width: 992px) {
.desktop-video {
display: block;
}

.mobile-video {
display: none;
}
}
</style>

[manan123]

i want only for mobile device it also increase size on desktop