Solved

want transparent announcement bar on mobile device

manan123
Explorer
104 1 1

hey, i am using dawn theme i want transparent & same colour announcement bar on mobile device also as its on desktop , please tell me how to do that.

Store Url -- https://mansaroverfurnishings.com/

Accepted Solutions (4)

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

Hey @manan123,

 

Follow this instruction and you should be fine. 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px) {
    slideshow-component.slider-mobile-gutter {
        transform: translateY(-50px);
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707324780800.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

Desktop:

ThePrimeWeb_0-1707329365698.png

 

Mobile: 

ThePrimeWeb_1-1707329374660.png

 

That's the same colour code

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

Hey @manan123,

 

I cannot shift only the account icons with CSS, I can shift the whole section

ThePrimeWeb_0-1707483769298.png

 

If this is ok, then you can do that, 

 

The instructions are same as above

The code is: 

<style>
.menu-drawer__navigation-container {
    grid-template-rows: auto 1fr !important;
}

.menu-drawer__utility-links {
    grid-row: 1 !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

That's because you removed the <style> tags

ThePrimeWeb_0-1707491450763.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 26 (26)

Ritu-N
Shopify Partner
11 1 0

Hello Manan, 

Please add this CSS 
@media screen and (max-width: 480px){
#MainContent {margin-top: -115px;}
}

Let me know if this helps you

Thanks, 
Ritu 

RituN_0-1707309026106.png

 

manan123
Explorer
104 1 1

not working i added this in base.css file can you please guide me properly where i have to add this code?

Ritu-N
Shopify Partner
11 1 0

Hey, 
you can add it to your theme.liquid before </head> was closed.

It seems you have added it to index file. 
You have to put it like this : 
<style>

@media screen and (max-width: 480px){
#MainContent {margin-top: -115px;}
}

</style>

Let me know if this helps you 

Thanks

manan123
Explorer
104 1 1

sorry its still now working i'm using dawn theme & here's my theme.liquid file you can check 

 

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
<!-- Added by AVADA SEO Suite -->
{% include 'avada-seo' %}
<!-- /Added by AVADA SEO Suite -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

<title>
{{ page_title }}
{%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

{% render 'meta-tags' %}

<script src="{{ 'swiper-bundle.min.js' | asset_url }}" async></script>
<script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
{%- if settings.animations_reveal_on_scroll -%}
<script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
@font-face {
font-family: GillSans;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("{{ 'GillSansRegular.woff2' | asset_url }}") format("woff2");
}

@font-face {
font-family: MyriadPro;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("{{ 'MyriadPro-Regular.woff2' | asset_url }}") format("woff2");
}

@font-face {
font-family: Maginia;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("{{ 'MaginiaRegular.woff' | asset_url }}") format("woff");
}

{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
--gradient-background: {{ scheme.settings.background_gradient }};
--gradient-background-rgb: {{ scheme.settings.background_gradient.red }}, {{ scheme.settings.background_gradient.green }}, {{ scheme.settings.background_gradient.blue }};
{% else %}
--gradient-background: {{ scheme.settings.background }};
--gradient-background-rgb: {{ scheme.settings.background.red }}, {{ scheme.settings.background.green }}, {{ scheme.settings.background.blue }};
{% endif %}
--color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
--color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
--color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
--color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}

{{ scheme_classes | prepend: 'body' }} {
color: rgba(var(--color-foreground));
background-color: rgb(var(--color-background));
}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

--popup-border-width: {{ settings.popup_border_thickness }}px;
--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

--drawer-border-width: {{ settings.drawer_border_thickness }}px;
--drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
--drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
--drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
--drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
--drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;

--ff-primary-1: GillSans;
--ff-mag: Maginia;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'base.css' | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

{%- if settings.predictive_search_enabled -%}
<link
rel="stylesheet"
href="{{ 'component-predictive-search.css' | asset_url }}"
media="print"
onload="this.media='all'"
>
{%- endif -%}

<script>
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
if (Shopify.designMode) {
document.documentElement.classList.add('shopify-design-mode');
}
</script>
{% if template == 'cart' %}{% include "revy-bundle-script" %}{% endif %}
<style>
.shopify-payment-button__button--unbranded {
font-size: 0 !important;
background: black !important;
color: white !important;
}
.shopify-payment-button__button--unbranded::before {
content: 'BUY NOW';
position: initial;
visibility: visible;
top: 0;
left: 0;
bottom: 0;
font-size: 18px;
display: contents;
}
</style>

</head>
<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %} template--{{ template | handleize }}">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ 'accessibility.skip_to_text' | t }}
</a>

{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}

{% sections 'header-group' %}

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>

{% sections 'footer-group' %}

<ul hidden>
<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
<li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
</ul>

<script>
window.shopUrl = '{{ request.origin }}';
window.routes = {
cart_add_url: '{{ routes.cart_add_url }}',
cart_change_url: '{{ routes.cart_change_url }}',
cart_update_url: '{{ routes.cart_update_url }}',
cart_url: '{{ routes.cart_url }}',
predictive_search_url: '{{ routes.predictive_search_url }}',
};

window.cartStrings = {
error: `{{ 'sections.cart.cart_error' | t }}`,
quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
};

window.variantStrings = {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
};

window.accessibilityStrings = {
imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
shareSuccess: `{{ 'general.share.success_message' | t }}`,
pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
};
</script>

{%- if settings.predictive_search_enabled -%}
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<!-- PickyStory snippet "main_widget_script", do not modify. Safe to remove after the app is uninstalled -->
{% if content_for_header contains 'pickystory' %}
<script defer src="https://cdn.pickystory.com/widget/dist/latest/pickystory-widget.min.js"></script>
{% endif %}
<!-- PickyStory end snippet "main_widget_script" -->
<script>
function addAnchorToIcons(){
var $icons = document.querySelectorAll(`.list-social__item a`);

if (!$icons){
return;
}

for (var each of $icons){
each.setAttribute("target", "_blank");
}

}

addAnchorToIcons();
</script>
</body>
</html>

 

 

Upsellise
Shopify Partner
28 0 4

Hello @manan123 ,

I see there's a reply suggesting a CSS configuration to make your announcement bar transparent or match the same color as your website background. However, I'd like to propose another solution that requires no coding skills and is free!

 

The Searchanise Upsell & Marketing app offers a "Multi-Announcement Bar" feature, which displays alternating messages at the top or bottom of your webstore. You have complete control over the text, design, and display rules. Best of all, it maintains consistency across different devices, whether desktops, smartphones, or tablets.

 

Here's an example of what it looks like in action.

AB GIF.gif

 

Feel free to reach out if you have any questions or need further assistance.

 

Best regards,

Upsellise

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

Hey @manan123,

 

Follow this instruction and you should be fine. 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 749px) {
    slideshow-component.slider-mobile-gutter {
        transform: translateY(-50px);
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707324780800.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

thanks you sooo much!!!  one more thing i also want the header background colour of mobile exactly same as it is in desktop..please help me in the code!!

I also attached screenshots for better understanding

 

Mobile Device:

 

manan123_2-1707326453825.png

 

 

 

Desktop :

manan123_3-1707326594026.png

want this colour which i highlighted same in the mobile device

 

 

ThePrimeWeb
Shopify Partner
2035 588 462

It's already same for me in my mobile

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

Please Look again its like beige type colour in mobile & greyish type in desktop please check!!

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

Desktop:

ThePrimeWeb_0-1707329365698.png

 

Mobile: 

ThePrimeWeb_1-1707329374660.png

 

That's the same colour code

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

thanks can you please check my others threads as well i have also mentioned youu!

manan123
Explorer
104 1 1

hey can you please help me , this banner image on checkout looks good but i want to customize the banner image on checlout for mobile also because  its not looking good, check screenshot below  

 

Desktop --

manan123_0-1707481470737.png

Mobile -- 

manan123_1-1707481570539.png

Looks too messy & not visible please help me to fix this so it can be properly visible on desktop & mobile..

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

im using dawn theme 

ThePrimeWeb
Shopify Partner
2035 588 462

Hey @manan123,

 

You need Shopify Plus Plan to customize checkout. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

oh okay, can you please help me to shift the account icon from bottom to top in menu drawer on mobile device...

manan123_0-1707482028233.png

want to shift this highlighted option to the upward 

 

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

 

Please help me in this code

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

Hey @manan123,

 

I cannot shift only the account icons with CSS, I can shift the whole section

ThePrimeWeb_0-1707483769298.png

 

If this is ok, then you can do that, 

 

The instructions are same as above

The code is: 

<style>
.menu-drawer__navigation-container {
    grid-template-rows: auto 1fr !important;
}

.menu-drawer__utility-links {
    grid-row: 1 !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

thanks!! i can adjust , please tell me instructions to remove the social links below sign/register option i dont want it 

ThePrimeWeb
Shopify Partner
2035 588 462

Add this code

<style>
.menu-drawer__utility-links .list-social {
    display: none;
}

.menu-drawer__utility-links > a {
    margin-bottom: 0;
}

.menu-drawer__utility-links {
    padding-bottom: 2rem !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

thanks, but its not working the coding appears at top but i add this code 

.menu-drawer__utility-links .list-social { display: none; }

to the base.css file and its worked 

 

manan123
Explorer
104 1 1

manan123_1-1707490040763.png

how to remove this unwanted space ?

ThePrimeWeb
Shopify Partner
2035 588 462

On the previous answer there's more code, those were to remove the space.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

but its not working its appears like thiss....

manan123_0-1707490706740.png

i have to put in theme.liquid file before </head> right??

 

ThePrimeWeb
Shopify Partner
2035 588 462

This is an accepted solution.

That's because you removed the <style> tags

ThePrimeWeb_0-1707491450763.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
manan123
Explorer
104 1 1

thankyou so much!! actually i dont remove those style tags i accidently remove this closing > tag from previous style tag thats why its appear on top thanks  

manan123
Explorer
104 1 1

hey, can you please help me i want to remove this badges from footer

manan123_0-1707805541902.png

want to remove this....please help me

Store link - https://mansaroverfurnishings.com/

manan123
Explorer
104 1 1

hii i added two custom liquid for videos at different places but when i change the width of one custom liquid its automatically changes the width of other two i want to change the width of only one custom liquid  please help me 

 

my site url ; https://mansaroverfurnishings.com/

Cultura-Carnica
Visitor
1 0 0

hi! can anyone help me make my ad Transparent Announcement Bar? None of the previous codes have worked for me. My website is www.culturacarnica.it