Product list view

backdeals
Tourist
12 2 3

Hello, 

I want to reduce a size of list view and the size of image also. ( is for B2B shop so i want to make something quick to order form ) 

Shop : https://tenbuyone.myshopify.com/collections/apple

backdeals_0-1619542038457.png

I want the same size of image below : if we can put add to cart and quick view on the same line.

backdeals_1-1619542147971.png

 

 

0 Likes
MyCodeMagic
Excursionist
11 4 2

Hello

@backdeals 

please pest this CSS code in theme.css

.product-item--list .product-item__image-wrapper {
    width: 70px;
    margin-right: 20px;
}
.product-item--list {
    padding: 10px;
}
.product-item--list .product-item__info {
    margin: 0;
}
.product-item__inventory {
    margin: 0;
}
a.product-item__title.text--strong.link {
    min-height: 0;
    margin: 0;
}
.product-item__price-list {
    padding: 0 20px;
}
.product-item--list .product-item__action-list {
    display: flex;
    margin-left: 20px;
    min-width: unset;
    align-items: center;
    justify-content: center;
}
.button-stack > .button + .button {
    margin: 0;
    margin-left: 10px;
}

This code output is a show like this 

If you still want to make it smaller, you can make the font size smaller

Screenshot_9.png

If you like and feel good, write and accept it as a solution

0 Likes
backdeals
Tourist
12 2 3

Thanks for you effort but its coming like below and the same time can i get the price after IN STOCK

backdeals_0-1619549614819.png

 

0 Likes
g33kgirl
Shopify Partner
223 59 71

@backdealsin addition to @MyCodeMagic's code, add this to your CSS also:

.product-item__info-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.product-item--list .product-item__action-list {
    flex-direction: row;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
backdeals
Tourist
12 2 3
Thanks , it's working, but see below, you can align the price and instock
. you can put it in stock and display price after instock please .

[image: image.png]
0 Likes
g33kgirl
Shopify Partner
223 59 71

@backdeals You will have to do that in your template file.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
backdeals
Tourist
12 2 3

i don't understand, you can ask invitation request ? 

0 Likes