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 3 (3)

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
452 74 128

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
143 15 30

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.