How to Move Compare Price Before Regular Price in Debutify Theme

Table of Contents

1. Introduction
2. What is Debutify?
3. Why Choose Debutify Theme?
4. The Importance of Custom Coding in Shopify
5. Step-By-Step Guide to Moving Compare Price Before Regular Price in Debutify Theme
   1. Duplicate Your Theme for Backup
   2. Accessing the Code Section in Shopify Admin Panel
   3. Opening the Snippets Folder
   4. Finding the Product Template Dot Liquid File
   5. Cutting the Compare Price Code
   6. Testing the Code Placement
   7. Pasting the Compare Price Code Before the Product Price
   8. Saving the File and Reloading the Product Page
   9. Creating Space Between Compare Price and Regular Price
   10. Enhancing the Appearance with CSS Code
6. Customizing Theme Settings in Debutify
7. Conclusion

Moving Compare Price Before Regular Price in Debutify Theme

Are you a Shopify store owner using the Debutify theme? Have you been wondering how to move the compare price before the regular price on your product page? If so, you're in the right place! In this article, we will guide you step-by-step on how to achieve this customization using custom coding in Debutify.

1. Introduction

The Debutify theme is a popular choice among Shopify store owners due to its clean and modern design. However, one limitation of the theme is that it doesn't offer a built-in function to move the compare price before the regular price. This can be frustrating for store owners who want to highlight potential savings to their customers. But don't worry, with a little bit of custom coding, you can easily achieve this customization.

2. What is Debutify?

Debutify is a Shopify theme that is loved by many e-commerce store owners. It offers a wide range of features and customization options to enhance the look and functionality of your online store. With its responsive design and user-friendly interface, Debutify makes it easy for both beginners and experienced users to create a professional-looking store.

3. Why Choose Debutify Theme?

There are several reasons why you should consider choosing the Debutify theme for your Shopify store. Firstly, it offers a clean and modern design that is visually appealing to customers. Secondly, the theme is highly customizable, allowing you to personalize your store according to your brand's identity. Lastly, Debutify provides excellent customer support, ensuring that any issues or questions you may have are addressed promptly.

4. The Importance of Custom Coding in Shopify

Custom coding plays a crucial role in Shopify as it allows store owners to modify and enhance the functionality of their online stores. While many themes offer a wide range of customization options through their settings, there are times when you need to go beyond these options and make specific changes to suit your unique requirements. This is where custom coding comes into play, giving you the freedom to add custom features and functionality to your store.

5. Step-By-Step Guide to Moving Compare Price Before Regular Price in Debutify Theme

5.1 Duplicate Your Theme for Backup

Before making any changes to your theme's code, it's essential to create a duplicate copy as a backup. This ensures that you can revert to the original version if anything goes wrong during the customization process.

5.2 Accessing the Code Section in Shopify Admin Panel

To access the code section of your Shopify store, log in to your admin panel and navigate to "Online Store" > "Themes." Click on the three dots next to your active theme and select "Edit Code" from the dropdown menu.

5.3 Opening the Snippets Folder

In the code editor, locate and click on the "Snippets" folder. Scroll down until you find the "product-template.liquid" file, which is the file responsible for displaying the product page.

5.4 Finding the Product Template Dot Liquid File

Open the "product-template.liquid" file by clicking on it. This file contains the code that controls how the product page is structured and displayed.

5.5 Cutting the Compare Price Code

Within the "product-template.liquid" file, look for the code related to the compare price. If you are having trouble finding it, you can use the search function by pressing Ctrl+F or Command+F and searching for the keyword "compare."

Once you've found the compare price code, select all the code within the tags and cut it by pressing Ctrl+X or Command+X.

5.6 Testing the Code Placement

Before pasting the compare price code, it's essential to test the code placement to ensure it is in the desired location. Scroll down to the line where the product price is displayed and create a space above it by pressing Enter.

5.7 Pasting the Compare Price Code Before the Product Price

Paste the compare price code that you cut earlier just above the product price line. To paste the code, press Ctrl+V or Command+V. This will move the compare price before the regular price on the product page.

5.8 Saving the File and Reloading the Product Page

After pasting the code, save the "product-template.liquid" file by clicking on the save icon or using the Ctrl+S or Command+S shortcut. Once saved, reload the product page on your store to see the changes take effect. The compare price will now appear before the regular price.

5.9 Creating Space Between Compare Price and Regular Price

To create some space between the compare price and regular price, we will apply some CSS code. Right-click on the regular price displayed on the product page and select "Inspect" from the dropdown menu. This will open the browser's developer tools and highlight the corresponding code.

Within the developer tools, locate the tag with the ID "product-price." Right-click on it and select "Copy selector" or "Copy selector path" depending on your browser. This will copy the CSS selector for the regular price.

5.10 Enhancing the Appearance with CSS Code

Exit the developer tools and navigate to the "Customize" section in your Shopify admin panel. Go to "Theme Settings" and click on "Custom style and script." In the text box, paste the CSS code you copied earlier.

To create space between the compare price and regular price, add the following CSS code:

span#product-price {
  margin-left: 7px;
  font-size: 20px;
}

Feel free to adjust the margin-left value and font-size to achieve the desired appearance.

Save your changes and reload the product page. You should now see the compare price before the regular price with a suitable amount of space between them.

6. Customizing Theme Settings in Debutify

In addition to custom coding, Debutify offers various theme settings that you can customize to further personalize your store. From the "Theme Settings" section in your Shopify admin panel, you can modify colors, fonts, layouts, and more to match your brand's identity.

7. Conclusion

Moving the compare price before the regular price in the Debutify theme may require some custom coding, but it can be easily achieved by following the step-by-step guide provided in this article. By customizing your store's appearance and enhancing its functionality, you can create a unique shopping experience for your customers.