Move Add to Cart button above product description - Pipeline 3 and earlier

With Pipeline 3 or earlier, moving the Add to Cart button requires several steps to be done in code. If you're familiar with the Code Editor, you can use these steps to move the button position. 

The regular position order is:

Price
Product title
Product description
Variant options
Quantity 
Add to Cart button
Share options

When considering moving elements around, these three need to be together:

That group is part of your actual form that is submitted when the Add to Cart button is used. You can change their order but all three must be together and can't be split to add something in-between. 

If you'd like to move the Add to Cart with the grouped form elements higher to be above the Product description, follow these steps:

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:

Note: This tutorial is for Pipeline 3 and earlier. There is a separate tutorial for Pipeline 4, see link at the bottom. 

Open snippets/product.liquid. If Pipeline is published/live theme, use this link:
snippets/product.liquid

Step1: In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for "form action" without the quotes:

Step 2: Collapse the section in the sidebar and cut out the entire section:

Look for the little triangle on the left where the line numbers are (you might be on a different line number than me, varies by Pipeline version) - Click that little triangle, it will collapse the entire form:

Click the triangle to collapse:

Once the triangle has collapsed it will be pointing right. 

Step 3: Use the Command-X (Mac) or Control-X (Win) to cut out that whole section. Now that the section has been collapsed, you can cut the whole section by cutting out just that one line. 

Cut the entire line:

Here's what it looks like after but Cut out, notice it's blank above the </div> (good):

Step 4: Find the product title position:

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

Step 5: Paste the code below the <h1 line:

Example after:

Scroll up to view the start of the pasted section:

Save the changes.

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

Undo

If you feel you've made an error, use the Older versions link to undo the changes. This would also be a good time to use your duplicate/backup theme as a fallback.