Move product price below product title
Before:
After:
To move the price below the product title on product pages, you can make this code change:
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
- 1
-
Modify product template from snippets folder
From the Snippets folder, open product.liquid:
Be sure to open the correct file as there is a product.liquid in the templates and sections folders as well.
In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for "<h5" without the quotes:
That will take you to the product price section:
Next, make about 3 blank lines above that <h5 line:
This is where we'll move the product title code to.
The product title code is just below the price section, it's one line and starts with <h1:
Move that entire line to the area where we make the blank lines above the <h5 section:
Save the file.
Result:
Undo
Use the Older versions link at the top of the file if you need to rollback or undo this code change.
Hiding the Product Price
If you prefer to just hide the product price, then use this CSS code:
/* -- code to hide product price in title -- */
.template-product #productInfo-product h5 {display: none; }
/* - end - */
Where do I add the code?
Use this link to learn where exactly to add this code snippet: