Quantity selector collection product card

Store Design
, ,
1

{E8985A86-906E-4337-8B8B-9EA37FFC1EB0}
{E8985A86-906E-4337-8B8B-9EA37FFC1EB0}361×686 55.6 KB

Hey all, i’m trying to figure out how to stretch from left to right the quantity selector, i’m on savor theme, just in collection page on product card

2

Hi @clavilla57

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

thanks for the answer, actually i’ve another shop online, i’m working on a second theme that i will implement in the near future, how do i share the preview with you?

4

Hi, @clavilla57

Just add this css, hope it will works!

.quantity-selector{
flex-grow: 1;
}

5

Hi @clavilla57

Share the Theme Preview Link

Go to Online Store → Themes in your Shopify admin.

Find your unpublished theme (the one you’re working on).

Click Preview → then click “Share preview” (or “Preview link”).

Shopify will generate a public preview link.

Just copy and send that link here.

6

Hello, @clavilla57

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.collection .product-card .quantity-selector-wrapper {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
}

.collection .product-card .quantity-selector-wrapper .quantity-selector__button {
    flex-grow: 1 !important;
}

grid-template-columns : adjust as needed
The class names might be slightly different in the Savor theme.

Thanks!

7

thanks

8

theres a way to add a css inside the block instead of edit code? this wont let me update the theme

9

You can place it wherever you like.

Thanks!