Move Add to Cart button above product description - Pipeline 4

Note: If you're running Pipeline 4.3 or higher, this feature is already included in the theme, no code changes are required:
Pipeline 4.3 New Features

With the introduction of Pipeline 4, the position of Add to Cart button becomes easier to move manually in the code.

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Note: This tutorial is for Pipeline 4 and above only. There is a separate tutorial for Pipeline 3 and earlier, see bottom for link. Verify version of Pipeline you're running:
Which version of Pipeline am I using?

1

Find the Add to Cart line

From the Snippets folder, open product.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

form

Example:

Press enter and you'll to take to the line which has for form:

When you find the line (usually Line 144), you will cut that line out to move it. 

2

Remove this line

Once you've found the right line, delete the entire line:

{% include 'product-form' %}

Example

3

Find the product title position

Use the find feature and search for "h1" without the quotes. This is the line for the product title:

Press enter and you'll be take to this line:

Add a couple blank lines below that line:

4

Paste this code:

Paste this line of code below the <h1 line:

{% include 'product-form' %}

Copy the above code: Command-C (Mac) or Control-V (Win) and then Paste it in the Code Editor: Command-V (Mac) or Control-V (Win) to paste. 

Example after:

Save the changes.

Now the Add to Cart button with other form elements will be positioned above the Product description and below the product title. 

Optional: Add extra space above the product description

If you find that moving the Add to Cart button has caused your product description to start immediately after, you can add this line of code to help push the product description lower.

Code:

/* -- code to add padding after add to cart button -- */
#AddToCartForm-product {margin-bottom: 1rem;}
/* - end - */

If you need more room, increase the value of 1rem; to 2rem; or 1.5rem;

Where to add the code:

From the Assets folder, open theme.scss.liquid:

Add the code to the very bottom of the file on a new line after all other code. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.