Story theme - How to move product price below title

Note:
Modifying the theme code will make it difficult to update your theme. Use this code at your own risk. Groupthought does not provide any warranty or further support for this code. The code provided is only a suggestion. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Story or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Story theme.

In Story theme, the product pages display the title and price together on one row:

If you have long product names or prices, there can be limited space especially if a product is on sale:

We have a code customization you can make to move the prices below the title. 

Result:

There are three main steps involved and requires you to modify some code in your theme. 

How to:

1

Make a duplicate of your theme

This is important as we are going to replace some key parts of your theme. You'll need the duplicate if there is any issue with the code changes or if you'd like to go back to the original format of the theme.

Note: If you're make this code modification to a draft theme, then make a duplicate of that theme instead. 

Rename the duplicated theme from your drafts list:

2

Edit product-form.liquid file

Return to the theme you're going to make the code modification to. This can be your live theme or if you're making the modification to a draft theme, return to that theme. Just make sure it's different from the duplicate we just made as that will be saved as a backup.

Edit code - Example from live theme:

From the Snippets folder, open product-form.liquid:

We will replace all the code in this file with new code. 

Click the link below to view the code:

Click to view new code

Copy all the code from that file and replace all the code from the existing product-form.liquid file.

Note: If you have installed any apps that have previously modified this file, then stop and do not replace the code. Contact us directly to discuss assistance options. 

After you've replaced all the code,  Save the file:

3

Add CSS style code to position the prices

The final step is to add the following code to the very bottom of your theme.scss.liquid file.

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

Add the following code to the very bottom of the file:

/* -- code from tutorial - move price below title -- */
.product__price {text-align:left; }
.product__title__wrapper {margin-bottom: 0px; }
/* - end - */

Example:

Save the file after adding the code:

That completes the tutorial. If you've made any mistakes, use the duplicate theme from Step 1 to reset the files changed.