Hi, i’m trying to change the location of our add to cart button to the top of the page. We use the newest version of the empire theme. Is there a good way to do this?
Topic summary
Goal: Move the “Add to Cart” button to the top of the product page in the latest Empire theme.
Solution provided: Adjust the product details layout using CSS Flexbox in theme assets.
- Path: Online Store → Theme → Edit code → Assets/theme.css.
- Method: Set .product-main .product-details to display:flex (column) and reorder its child blocks using the CSS order property so the form (which includes the Add to Cart button) appears near the top, after title/vendor/price.
- Order used: title (1), vendor (2), price (3), form/add-to-cart (4), description (5), share (6).
Notes:
- This approach rearranges elements visually without modifying templates.
- An accompanying image illustrates the reordered layout; code snippet is central to the solution.
Outcome: The original poster confirmed the change worked (“problem solved”).
Status: Resolved; no further action requested.
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/theme.css
- Add code below to bottom of file
.product-main .product-details {
display: flex;
flex-flow: column;
}
.product-main .product-details .product-block--title {
order: 1;
}
.product-main .product-details .product-block--vendor {
order: 2;
}
.product-main .product-details .product-block--price {
order: 3;
}
.product-main .product-details .product-block--form {
order: 4;
}
.product-main .product-details .product-block--description {
order: 5;
}
.product-main .product-details .product-block--share {
order: 6;
}
1 Like
Thank you, problem solved!