Customize the Unit Price in your Shopify Store

To customize the appearance of the unit price on your Shopify store and ensure it aligns perfectly with your brand, you can utilize the Custom CSS feature within the Theme Customizer. This allows you to adjust the format and the positioning of the price-per-unit displayed on your product page. Below, we provide easy, step-by-step instructions to help you make these adjustments seamlessly.

Update the format (Font/Font Size/Bold/Italic)

• Navigate to Sales Channel on your admin panel and click on the Online Store.

• Identify the current theme applied to your store. This step is crucial, as any modifications will only affect the active theme. Click the Customize button to access the Theme Editor.

• Click on the Theme settings icon of the left, scroll to the bottom of the settings, and click on Custom CSS.

• You can update the style of your unit price on the Product page and the Collection page.

• Customize the Unit Price on the Product Page: If you want to modify how the unit price looks on product pages, copy and paste the following CSS code into the Custom CSS box. You can further personalize the appearance by adding or adjusting various CSS attributes to match your store’s style. Here are some examples:

.appattic_price_app_div {

• Customize the Unit Price on the Collection Page: If you want to modify how the unit price looks on collection pages, copy and paste the following CSS code into the Custom CSS box. You can further personalize the appearance by adding or adjusting various CSS attributes to match your store’s style. Here are some examples:

.appattic_price_app_coll {

Don't forget to save your changes. Click on the Save button. The updates will be reflected on your Shopify page.

Update the position (above or below price, under product rating)

• In your Shopify admin, navigate to the Sales Channels section and select Online Store. Next to the Customize button, click on the three small dots and select Edit Code. This will open your theme’s code editor.

• Within the Edit Code section, scroll to find the Snippets folder on the left-hand panel. Look for the file that handles product layout, usually called product-template.liquid, product-price.liquid,  product.liquid or product-info.liquid based on the theme which you are using.

• After you find the correct snippets, inside the template file, find the section where the price is displayed. Then, insert the below code exactly where you want the unit price to show up:

<div class="appattic_price_span"></div>

Make sure to place it inside the right <div> tag, close to where the product price is already displayed. Once you've added the code, click Save to apply the changes.

With just a few simple steps, you have successfully customized the appearance of the unit price on your Shopify store. If you ever want to undo the changes, return to the Custom CSS section and remove or modify the code.