Dawn theme buy button with quantity selector

[DearFreddie]

Hi there,

How can I get my add to cart buttons next to my quantity selector? I've followed the code written out in other posts but then it does this to my home page, 

[Dotsquares]

Hi @DearFreddie ,
Thank you for reaching out to the shopify community. 

Can you provide us with additional details regarding what is happening with your homepage when you implement the code? A link would be fine for troubleshooting.

In the meantime, I recommend you verify whether your inserted code is in the right container or whether it's interfering with some other element on your theme.

[DearFreddie]

Hi there! the first picture is my homepage, that's how the choose options come up after entering the code instead of being aligned properly without the code, the second picture is an example of what I would like with out my home screen moving 🙂

Hope this clarifies!

[rajweb]

Hey @DearFreddie ,

It looks like your "Add to Cart" button is being pushed down due to CSS styling conflicts or improper flex/grid settings. Since you've followed other code examples but encountered issues, the problem might be related to the Pipeline theme's existing styles.

1. Wrap the Quantity Selector and Buttons in a Flexbox:

- Find the quantity-selector and add-to-cart button elements in your Shopify theme file (probably product-form.liquid or main-product.liquid). Then, wrap them in a <div> with a flexbox style:

<div class="product-actions">
    <div class="quantity-selector">
        <!-- Your quantity selector code -->
    </div>
    <button type="submit" class="add-to-cart">Add to Cart</button>
</div>

2. Apply CSS for Flex Alignment:

Add this CSS to your theme’s theme.css or base.css file:

.product-actions {
    display: flex;
    align-items: center; /* Aligns vertically */
    gap: 10px; /* Adds spacing between quantity selector and button */
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid #b8a8a2;
    padding: 5px;
}

.add-to-cart {
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #b8a8a2;
    background-color: white;
    color: #b8a8a2;
    cursor: pointer;
}

@media (max-width: 768px) {
    .product-actions {
        flex-direction: column;
    }
}

3. Check for Theme Styles Overriding the Layout:

- If the home page breaks after adding the flexbox styles, check if the product-actions class is affecting other parts of the theme. If necessary, make it more specific:

.product-page .product-actions {
    display: flex;
}

If the issue persists, can you share your current code for the quantity selector and the Add to Cart button? That will help debug further! 

If I was able to help you, please don't forget to Like and mark it as the Solution!

Thanks!

Best,

Rajat

[DearFreddie]

Hey there! I can't find quantity-selector in main-product.liquid for some reason and I've tried looking through a bunch of other sections also.

[DaisyVo]

Hi @DearFreddie , can you share store url? 

[DearFreddie]

hi there! Store url is www.dearfreddie.com.au