How to fix code conflict affecting 'Add to Cart' button and 'Qty' box alignment?

[Alliance]

Hi guys,

I applied the following code from the community relocate “Add to cart” button and “Qty” input box inside the product card.

Theme.js:

if(window.location.href.indexOf(“allianceautoproducts.com/collections”) > -1) {
const list = document.querySelectorAll(“.grid-view-item.product-card”);
const addDiv = document.querySelectorAll(“.grid__item.grid__item–collection-template.small–one-half.medium-up–one-quarter form”);
var index = 0;
list.forEach(l => {
l.style.height = “auto”;
l.appendChild(addDiv[index])
index ++;
})
}

Then I applied the following code from the community to align “Add to cart” button with “Qty” input box inside the product card:

Theme.scss:

.grid__item–collection-template form{
display:flex;
justify-content: space-between;
padding: 15px 15px;
}

body.template-collection li.grid__item–collection-template .grid-view-item #quantity{
display:flex;
max-width:90px;
margin:0;
}

body.template-collection li.grid__item–collection-template .grid-view-item > a{
z-index: -1;
}

But Whenever applied, in mobile view, product card shadow disappeared and “Add to cart” button disaligned along with qty input box, and prices alinged to the left.

Appreciate your help, Thank you

allianceautoproducts.com

[EBOOST]

Hi @Alliance

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/theme.scss.css
3. Copy code below to bottom of file

@screen and (max-width: 749px){
	body.template-collection li.grid__item--collection-template .grid-view-item>a {
		z-index: 1;
	}
	body.template-collection li.grid__item--collection-template  form{
		position: relative;
		z-index: 2;
		padding: 0;
	}
	body.template-collection li.grid__item--collection-template  form .btn{
		padding-left: 8px;
		padding-right: 8px;
		font-size: 10px;
	}
}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

[Alliance]

Did not work

[EBOOST]

Hi @Alliance

sorry it should be code below. It is missing media

@media screen and (max-width: 749px){
	body.template-collection li.grid__item--collection-template .grid-view-item>a {
		z-index: 1;
	}
	body.template-collection li.grid__item--collection-template  form{
		position: relative;
		z-index: 2;
		padding: 0;
	}
	body.template-collection li.grid__item--collection-template  form .btn{
		padding-left: 8px;
		padding-right: 8px;
		font-size: 10px;
	}
}

[Alliance]

Excellent , but the price after changed to white and became invisible

[EBOOST]

Hi @Alliance

Could you give me your screenshot? I dont see this issue. My end likes screenshot below:

[Alliance]

Thank you. I fixed it from the theme editor. One more request please, Can you link back the product image to the product page?

Thank you

[EBOOST]

Hi @Alliance

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/theme.scss.css
3. Copy code below to bottom of file

body.template-collection li.grid__item--collection-template .grid-view-item>a {
  z-index: 1;
}
body.template-collection li.grid__item--collection-template  form{
  position: relative;
  z-index: 2;
}

[Alliance]

In product page, " you may also like" section, " Add to cart " and Qty input box are not in the product card like collection.

eeeeehhh

[EBOOST]

Hi @Alliance

For PDP. You need update HTML( need update it in recommendation liquid) and add more CSS to Assets/theme.scss.css as well

.product-card a.grid-view-item__image-container {
	z-index: 1;
}
.product-card form[action="/cart/add"] {
	display: flex;
	position: relative;
	z-index: 2;
}
.product-card form[action="/cart/add"] input[name="quantity"]{
	max-width: 80px;
}
.product-card form[action="/cart/add"] input.btn{
	margin-left: auto;
}
@media screen and (max-width: 749px){
	.product-card form[action="/cart/add"] input[name="quantity"]{
		max-width: 40px;
	}
	.product-card form[action="/cart/add"] input.btn{
		font-size: 10px;
	    padding-left: 8px;
	    padding-right: 8px
	}
}

[Alliance]

How to update HTML in recommendation liquid? That css code not working alone.

[Alliance]

Where to update html?

Thank you

[EBOOST]

Hi @Alliance

Sorry. Because your theme is a custom theme. I don’t know this theme structure. I only check HTML after that suggest a solution to you fix it.

[Alliance]

I did it. Have a look. Need now to align the buttons, titles, and prices.

Thank you

[EBOOST]

Hi @Alliance

You can add code below to bottom of Assets/theme.scss.css file.

.product-recommendations__inner  .grid--view-items{
	display: flex;
	flex-flow: wrap;
}
.product-recommendations__inner  .grid--view-items .grid__item .product-card {
	display: flex;
	flex-flow: column;
	height: 100%;
}
.product-recommendations__inner  .grid--view-items .grid__item .product-card .product-card__title{
	margin-top: auto;
}
.product-recommendations__inner  .grid--view-items .grid__item .product-card .product-card__image-with-placeholder-wrapper {
	height: inherit;
	display: flex;
	align-items: center;
}

[Alliance]

You are simply the best. All good. Thank you and Happy New Year!

[Alliance]

The remaining issue in Mobile View. Product cards are not aligned.

Thank you,

allianceautoproducts.com

[Alliance]

Sorry, I have to ask this again after loosing theme.scss file. I am supposed to launch the website today.

I want to align both “add to cart” button and “Qty” input box to the top and add padding to the product cart top/down/ left/right so that I get all produc cards in the following:

1- Collection-Mobile/view

2- Recommended products- Mobile/Desktop

3- In Mobile view: prices to be inside the product card.

4- Prices inside product card-Mobile/view.

5- Add gap between both “add to cart” button and “Qty” input box- Mobile/view

Thank you

allianceautoproducts.com

Thank you

allianceautoproducts.com

[EBOOST]

Hi @Alliance

You can use code below add to bottom of Assets/theme.scss.css file.

Because we don’t have many space on small screen. So I do it only show one item on each row.

.product-recommendations__inner .grid--view-items {
	padding-right: 30px;
    margin-right: -30px;
    padding-top: 30px;
    margin-top: -30px;
}

.product-card form[action="/cart/add"] input[name=quantity] {
	margin-right: 10px;
}

@media only screen and (min-width: 750px) and  (max-width: 1100px){
	.product-recommendations__inner .grid--view-items .grid__item,
	#Collection .grid--view-items .grid__item {
		width: 33.33333%;
	}
	.product-recommendations__inner .grid--view-items .grid__item {
		margin-bottom: 35px;
	}
	
}
@media only screen and (max-width: 749px){
	#Collection .grid--view-items .product-card {
		padding: 15px;
	}
	body.template-collection li.grid__item--collection-template .grid-view-item #quantity {
		margin-left: 0;
		margin-right: 10px;
	}
	.product-recommendations__inner .grid--view-items .grid__item{
		margin-bottom: 35px;
	}
}
@media only screen and (max-width: 425px){
	.product-recommendations__inner .grid--view-items .grid__item,
	#Collection .grid--view-items .grid__item {
		width: 100%;
	}
}

[Alliance]

All great, but I got two issues:

1- In desktop view: White shoulder underneath product cards.

2- In mobile view, one product only displayed in a big product card, instead of 2 products as earlier.

Thank you,

allianceautoproducts.com