As a Shopify expert, setting and comparing product prices, and updating them with ‘% off’ or increases in prices, is essential for managing sales and promotions effectively. Whether you want to highlight a discount, show that a product is on sale, or adjust prices for different product variants, automating this process can streamline your store management and improve your profitability.
Why Set Product Price, Compare Price & % Off?
Implementing price updates and comparison offers several benefits:
- Increased Sales: Highlighting discounts and sales can attract more customers and boost sales.
- Transparency: Showing the original price alongside the discounted price increases transparency and trust.
- Automation: Automating price updates saves time and ensures consistency across your product catalog.
How to Set Product Price, Compare Price & % Off
Step 1: Access Your Shopify Admin
Log in to your Shopify admin panel. From the home screen, navigate to Products.
Step 2: Edit Product Details
In the Products section, select the product you want to update. Click on the product to open its details page.
Step 3: Set the Compare Price
In the product details page, locate the Pricing section. Here, you can set the Compare at price to show the original price before the discount.
Step 4: Calculate % Off
To display the percentage off, you can use Liquid code in your product template. The % off is calculated as:
Step 5: Add Liquid Code for % Off
In the code editor, open your product template file (e.g., product.liquid) and add the following Liquid code to display the % off:
Step 6: Add JavaScript for Automated Updates (Optional)
If you want to automate the price updates based on certain conditions (e.g., seasonal sales), add the following JavaScript code to your theme’s main JavaScript file (e.g., theme.js):
Step 7: Add CSS for Styling
Add the necessary CSS to style the price display. You can include this in your theme's main CSS file (e.g., theme.scss.liquid):
Step 8: Add Customization Options in Theme Settings
In the theme's settings_schema.json file, add the following settings to allow customization of the price display:
Step 9: Save Your Changes
Once you have made all the changes, click the Save button at the top right of the code editor.
Step 10: Preview Your Store
After saving the changes, preview your store to ensure the price display works correctly and provides a seamless shopping experience.
Conclusion
Setting and comparing product prices, along with displaying the percentage off, enhances the user experience by making discounts and promotions more visible. This feature increases transparency, encourages purchases, and simplifies price management through automation. By implementing this functionality, you create a more user-friendly and profitable online shopping experience.