Shopify themes, liquid, logos, and UX
hey, i want to remove this highlighted badges from the footer , please help me to do so...
My store Url - https://mansaroverfurnishings.com/
Solved! Go to the solution
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
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;
}
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:
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;
}
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
This is an accepted solution.
@manan123
You can try that
.image-with-text{
width:70%;
}
This is an accepted solution.
@manan123
Use this code
@media screen and (max-width: 768px) {
.image-with-text{
width:auto;
}
}
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;
}
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:
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;
}
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();
}
}
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>
.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
This is an 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;
}
}
This is an 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:
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
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
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;
}
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
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:
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/
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;
}
how can i get this view??
@manan123
You may need custom coding for that
Like to reach you further
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
This is an accepted solution.
@manan123
You can try that
.image-with-text{
width:70%;
}
thankyou so much!!
hey , it also decreases the size on mobile devices i dont want any changes on mobile please help me
This is an accepted solution.
@manan123
Use this code
@media screen and (max-width: 768px) {
.image-with-text{
width:auto;
}
}
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...
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;
}
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
@manan123
NewsletterForm--sections
i have two files component-newsletter.css & newsletter-section.css i tried to add code in both of files but nothing happened pleasse check
please reply
i have two files component-newsletter.css & newsletter-section.css i tried to add code in both of files but nothing happened please check
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:
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 %}
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;
}
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
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
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();
}
}
again thanks!!!
hey i want to add slider in this section that it auto rotate by itself , please help me...
my store url : https://mansaroverfurnishings.com/
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.
hii, can you please help me my cart drawer delete button does not working ...please help!
My store URL :https://mansaroverfurnishings.com/
Hlw @manan123
We are going through your problem, but the problem you mentioned was working perfectly.
Is the problem solved?
yes it is thanks
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...
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>
.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
thanks!! it worked..
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.
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...
This is an 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;
}
}
hii im not able to see buy now button text on my website, Please check
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.
not working
@manan123we can't see your buy now button anymore.
please check now
This is an 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:
thankss so much
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
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>
i want only for mobile device it also increase size on desktop
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024