I want to change position of buy buttons

Store Design
, ,

Topic summary

Goal: Reorder product page buttons so “Buy it now” appears above “Add to cart.” A link and screenshots illustrate the current layout.

Proposed solutions (CSS-based):

  • Add CSS in theme.liquid before to reverse the button order: set the container to display: flex; flex-direction: column-reverse; and add spacing via gap.
  • Alternatively, place the same CSS in the main theme stylesheet (main.css/base.css/style.css) at the bottom: .product-form__buttons { display: flex; flex-direction: column-reverse; gap: 1rem; } This achieves the same result.
  • Another reply suggests inserting code above in theme.liquid, but the actual code snippet wasn’t shown in the post.

Additional UX suggestions: add review star ratings under the product title, clarify pricing presentation, and include a review section lower on the page.

Status: No confirmation from the original poster that the change was applied; screenshots demonstrate expected outcomes. Discussion appears open.

Summarized with AI on December 26. AI used: gpt-5.
4

Hi @attackon

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1719363593584.png
PageFlyRichard_0-1719363593584.png1920×953 157 KB

Also, while checking on the issue for you I’ve had some suggestions that you might consider to make for your product page here is:

PageFlyRichard_1-1719363727594.png
PageFlyRichard_1-1719363727594.png1920×953 162 KB

  1. Is to add Review Star rating below the product title here : it will increase more trust for your product

  2. To review the product pricing, that will make your customer more easier to know about the price

  3. Is to add the review part under the product list section on the page

Hope this can help you solve the issue

Best regards,

Richard | PageFly