Story theme - How to move product price below title
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:
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.