Buy Now Button dissappearing after selecting product variant

manan123
Tourist
76 1 0

I'm using dawn theme for my store but when i chose another variant on product page the buy now button get dissappeared please help me to solve this ....

 

my website url is --- https://mansaroverfurnishings.com/

Replies 10 (10)

ThePixelEdge
Shopify Partner
160 16 15

Hello @manan123 
https://mansaroverfurnishings.com/products/classic-solid-cotton-bed-sheet-by-ross-4?variant=41689565...
I checked here and It is working , can you please provide a url to debug this at our end.

Thanks in advance.

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
Tourist
76 1 0

yeah its fixed now thanks ..can you please help me to shift the position of sign in option from footer to upward only on mobile device, see screenshot for understanding....

manan123_0-1707379383666.png

want to shift this highlighted option to the upward

 

ThePixelEdge
Shopify Partner
160 16 15

Hello @manan123

After reviewing the situation, we have identified a solution. If for any reason you're unable to implement the suggested changes, please let us know. We can request collaborator access to make those adjustments on your behalf. Please inform us of your decision.

 

Remove position:relative from below class
.menu-drawer__utility-links

Add this new class
.menu-drawer__utility-links .menu-drawer__account {
	position: absolute;
	top: 20px;
	left: 20px;
}

 imgpsh_fullsize_anim.png

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
Tourist
76 1 0

could you please guide me where to put this code??

ThePixelEdge
Shopify Partner
160 16 15

Hi @manan123 

You could add it in component-menu-drawer.css file in the assets folder . 

Let me know if that works for you. 

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
Tourist
76 1 0

its not working please help me there's my component-menu-drawer.css file

 

.header__icon--menu {
position: initial;
}

.js menu-drawer > details > summary::before,
.js menu-drawer > details[open]:not(.menu-opening) > summary::before {
content: '';
position: absolute;
cursor: default;
width: 100%;
height: calc(100vh - 100%);
height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
top: 100%;
left: 0;
background: rgba(var(--color-foreground), 0.5);
opacity: 0;
visibility: hidden;
z-index: 2;
transition: opacity 0s, visibility 0s;
}

menu-drawer > details[open] > summary::before {
visibility: visible;
opacity: 1;
transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}

.menu-drawer {
position: absolute;
transform: translateX(-100%);
visibility: hidden;
z-index: 3;
left: 0;
top: 0;
width: calc(100vw - 3rem);
padding: 0;
background-color: #ffffff;
overflow-x: hidden;
--color-foreground: 123, 123, 123;
}

.js .menu-drawer {
height: calc(100vh - 0%);
/* height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))); */
}

.js details[open] > .menu-drawer,
.js details[open] > .menu-drawer__submenu {
transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

.no-js details[open] > .menu-drawer,
.js details[open].menu-opening > .menu-drawer,
details[open].menu-opening > .menu-drawer__submenu {
transform: translateX(0);
visibility: visible;
}

.js .menu-drawer__navigation .submenu-open {
visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

@media screen and (min-width: 750px) {
.menu-drawer {
width: 40rem;
}

.no-js .menu-drawer {
height: auto;
}
}

.menu-drawer__inner-container {
position: relative;
height: 100%;
}

.menu-drawer__navigation-container {
display: grid;
grid-template-rows: 1fr auto;
align-content: space-between;
overflow-y: auto;
height: 100%;
}

.menu-drawer__navigation {
padding: 5rem 0;
}

.menu-drawer__inner-submenu {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-top: 5rem;
}

.no-js .menu-drawer__navigation {
padding: 0;
}

.no-js .menu-drawer__navigation > ul > li {
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.no-js .menu-drawer__submenu ul > li {
border-top: 0.1rem solid rgba(var(--color-foreground), 0.04);
}

.js .menu-drawer__menu li {
margin-bottom: 0.2rem;
}

.list-menu__item.menu-drawer__menu-item {
padding: 1.9rem 2.4rem;
text-decoration: none;
font-size: 1.4rem !important;
letter-spacing: 2.39px;
color: #7B7B7B;
}

.menu-drawer__inner-submenu .list-menu__item.menu-drawer__menu-item {
text-transform: none;
letter-spacing: 1.95px;
font-size: 1.3rem;
}

.no-js .menu-drawer__menu-item {
font-size: 1.6rem;
}

.no-js .menu-drawer__submenu .menu-drawer__menu-item {
padding: 1.2rem 5.2rem 1.2rem 6rem;
}

.no-js .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item {
padding-left: 9rem;
}

.menu-drawer summary.menu-drawer__menu-item {
padding-right: 5.2rem;
}

.no-js .menu-drawer__menu-item .icon-caret {
right: 3rem;
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover{
color: rgb(var(--color-foreground));
background-color: rgba(var(--color-foreground), 0.04);
}

.menu-drawer__menu-item--active:hover {
background-color: rgba(var(--color-foreground), 0.08);
}

.js .menu-drawer__menu-item .icon-caret,
.no-js .menu-drawer .icon-arrow {
display: none;
}

.menu-drawer__menu-item > .icon-arrow {
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%);
}

.js .menu-drawer__submenu {
position: absolute;
top: 0;
width: 100%;
bottom: 0;
left: 0;
background-color: #ffffff;
z-index: 1;
transform: translateX(100%);
visibility: hidden;
}

.js .menu-drawer__submenu .menu-drawer__submenu {
overflow-y: auto;
}

.menu-drawer__close-button {
padding: 1.9rem 2.4rem;
text-decoration: none;
display: flex;
align-items: center;
font-size: 1.4rem;
width: 100%;
background-color: transparent;
font-family: var(--font-body-family);
font-style: var(--font-body-style);
text-align: left;
text-transform: uppercase;
}

.no-js .menu-drawer__close-button {
display: none;
}

.menu-drawer__close-button .icon-arrow {
transform: rotate(180deg);
margin-right: 1rem;
}

.menu-drawer__utility-links {
padding: 2.4rem 2rem 3rem;
background-color: #F4F4F4;
position: relative;
}

.header--has-social .menu-drawer__utility-links {
padding: 2.4rem 2rem 3rem;
}

@media screen and (max-width: 749px) {
.header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
padding: 2rem;
}
}

@media screen and (max-width: 989px) {
.header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
padding: 2rem;
}
}

.menu-drawer__account {
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 0.99px;
color: rgb(var(--color-foreground));
margin-bottom: 3rem;
}

.menu-drawer__utility-links:has(ul:empty) .menu-drawer__account,
.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
margin-bottom: 0;
}

.menu-drawer__account .icon-account {
height: 2rem;
width: 2rem;
margin-right: 1rem;
color: #000000;
}

.menu-drawer__account:hover .icon-account {
transform: scale(1.07);
}

.menu-drawer .list-social {
justify-content: flex-start;
gap: 3.6rem;
}

.menu-drawer .list-social:empty {
display: none;
}

.menu-drawer .list-social__link {
padding: 0;
color: #4E3A3A;
}

.close-menu-drawer {
min-width: auto;
min-height: auto;
position: absolute;
z-index: 2;
padding: 2.4rem;
right: 0;
top: 0;
}

.close-menu-drawer svg {
width: 13px;
height: auto;
display: block;
}

 

ThePixelEdge
Shopify Partner
160 16 15

Hi @manan123 ,

Can you Please Provide Collaborator Access to us so that we can Inspect it if you are not able to do it . 
teampixeledge@gmail.com

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
Tourist
76 1 0

Please check my component-menu-drawer.css file once , if it's need to edit this file only then please edit the file & paste code here otherwise i'll give you access

ThePixelEdge
Shopify Partner
160 16 15

Hello @manan123 
Providing access woudl be great.

Thanks in advance.

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
Tourist
76 1 0

thanks , but i adjust it accordingly please tell me how to remove that space only ....

manan123_0-1707490145801.png