How can I add promotional text to my online store?

BryanEmpire
New Member
4 0 0

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

Screenshot_20231007-234222.jpg

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

 

What can I do to my store ?

Replies 4 (4)

dsktdskt
Shopify Partner
6 0 2

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
Shopify Partner
488 77 132

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! 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

OneMobile
Shopify Partner
168 16 31

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.

2023-10-10_155059.jpgTo 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:

2023-10-10_165328.jpg

 

I hope this helps!

If you find my answer helpful, please hit the Like button or Mark as solution to show me some encouragement.
OneMobile: The #1 Mobile App Builder For Shopify Merchants
Pick ready-made themes & customize with drag-n-drop editor.

pmoose
Shopify Partner
5 0 1

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.