How can I add promotional text to my online store?

[BryanEmpire]

I don't know how to describe it I want it to look like this one in the picture :

In this picture you can see the red text (promotion/offer)

What can I do to my store ?

[dsktdskt]

Hi Bryan,

You'll need to use the Compare At Price field on your products to add the discounted/promotion prices.

To show the red promotion text underneath, you have two options:

1. Through custom liquid 

• In the Theme Editor, go to your main product template
• In the Product Page section, add a Custom Liquid block where you want the text to appear

• {% if product.compare_at_price != empty %}
  <p style="color: red;">Your promo text here</p>
  {% endif %}

2. Through a custom product template

• In the theme editor, navigate to Product, then create a new template based on your main template
• In the Product Page section, add a Text block where you want the red text to appear
• Use the custom css editor for this section to style the text in red
• In your Shopify admin, assign this template to the products for which you want to show the text

Let me know if you have questions when you're implementing it!

[PageFly-Garcia]

Hi @BryanEmpire 

To enable the compare price feature, you can consider utilizing a page builder app like PageFly or Gempages. These apps allow for easy drag-and-drop integration of the element. Simply add the element to the editor and configure it accordingly.
Hope it helps. Cheers! 

[OneMobile]

Hi @BryanEmpire 

In order for your product price to look like as in the sample, follow these steps:

1. On your Shopify admin, go to Products >
2. Click on the product you want to add the "promotion"
3. Then, scroll down and input the original price into the Compare-at price box. In the sample you show, this will be 99.99.

To add the promotion text:

1. Go to your Themes > Click Customize > Navigate to your product template 
2. On the Product information section, add Custom Liquid block
3. Then paste the code below:

{% if product.compare_at_price_max > product.price %}
  <p class="promotion-text" style="color: red; font-weight: bold;">Your Promotion Text Here</p>
{% else %}
  <p class="price">{{ product.price | money }}</p>
{% endif %}

The promotion text will look something like this:

I hope this helps!

[pmoose]

Hi @BryanEmpire ,

I'm not sure if you've found a good solution to this, but we've also just launched our app Promi to do exactly this. Promi also has the benefit of offering price strikethroughs and discount descriptions on collections pages, support for code and automatic discounts, and deeplinks to apply discount codes on product and collections pages.

App listing: https://apps.shopify.com/promi-discounts

Website: https://www.usepromi.com/

We're giving out credits to use the app for free + a dedicated Slack support channel to merchants willing to provide feedback. Let me know if you're interested.