This is my website: aromaticaparfums.com
The file is product-list.liquid
currently it’s like the one on the left, I want it aligned like the right
please help
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- Paste the code provided into the Custom CSS section.
button.btn.add-to-cart-btn {
margin-left: calc(100% - 120px) !important;
}
Here is the result: https://prnt.sc/XjL8G-qYxPdL
I hope this helps
Best,
Daisy
No. This is not what I wanted. I wanted all the add to cart buttons to be in a single line like this: - - - -
your code makes it: - _ - _
Please try this code
.collection__grid-loop.product__list-carousel .flickity-slider .product-index .product-info {
height: 100px !important;
}
.collection__grid-loop.product__list-carousel .flickity-slider .product-index .product-metafields {
height: 140px !important;
}
Here is the result: https://prnt.sc/8qaRTClZF4No
I hope this helps
Best,
Daisy
Please add this code more in the same position
.collection__grid-loop.product__list-carousel .flickity-slider .product-index .product-metafields > p:nth-child(2) {
height: 72px;
}
Here is the result: https://prnt.sc/gep-YTN0dHEP
Best,
Daisy
You can try code like this, either in “theme settings”=>“Custom CSS” or in “Custom CSS” of each section:
.product-index {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.product-index > :last-child {
margin-top: auto;
align-self: center;
}
Note:
You have problems with first item on collection pages – must be HTML error – browser removes the form tag (it exists in original HTML, but browser ignores it). If you click cart button there it does nothing.
I believe it’s because of the line – this should be removed.
HTML does not allow nesting forms, so when browser sees the tag of the first product card it ignores it, but uses it’s tag to close the main-collection-form.
