Change product button positions in Dawn

[matchamandmary]

Hi Guys,

I’m struggling to find any info on how to change the  layout of buttons on my product template page using the dawn theme.

Ideally I’m looking to put the colour & size variant buttons next to each other as opposed to below each other.  In addition to this I am adding a pop up block Size Guide above the quantity selector block, similarly I would like to have these aligned side by side.  Any help would be greatly appreciated.

 

 

[NadiaAnthony]

Can you please share the URL for your store? Password if necessary?

[matchamandmary]

Hi Nadia,

Sure, it’s ‘matcham-and-mary.myshopify.com

pls click on one of the Tees under the Matcham menu to get to the example.

thanks

[NadiaAnthony]

Navigate to Online Store > Themes > "..." Edit Code. Find the base.css file in the Assets folder. Scroll to the bottom where there is no more code and make a new line break.

Add the following:

variant-selects {
    display: flex !important;
}

.product-form__input--dropdown {
    margin: var(--inputs-border-width) !important;
    flex: 0 0 50% !important;
    display: grid !important;
}

.product-form__quantity, .product-popup-modal__opener {
    float: left !important;
    width: 50% !important;
    margin-top: 0 !important;
}

.quantity {
    width: calc(50% / var(--font-body-scale) + var(--inputs-border-width) * 2) !important;
}

.product-form__buttons, .product-form__input .select {
    max-width: 100% !important;
}

Start here. I recommend going into the WYSIWYG Editor (Online Store > Themes > Customize > Product Page) and moving the quantity input above the "Size Guide" so that it sits to the left and the size chart to the right.

[matchamandmary]

Thanks Nadia,

The snippet of code worked brilliantly with aligning the colour & size.  However your advice about moving the quantity above the size chart didn’t seem to work, they still sit below one another.  Any further ideas?

[NadiaAnthony]

Yes! Please add the following below where you added the other CSS:

.product-popup-modal__opener {
    display: inline-block;
    text-align: center;
    margin-top: 2rem !important;
}
.quantity {
    width: calc(100% / var(--font-body-scale) + var(--inputs-border-width) * 2)!important;
}

 That should do it. Please review mobile as well.

[matchamandmary]

Hi Nadia,

Thank you for your update.  I just added your code below previous section and the only changes were that the  quantity button seemed to double in width and the ‘size chart’ link nudged to right a little too.  Still not next to each other yet?

Anything come to mind that might be causing this?

thanks,

Ben