Text box next to price

[Rickyxane]

Hi! I would love to create a text box net to the price, like the textbox on the image I’ve circeled

I’m using the symmetry theme. www.ciara-boutique.com

Looking forward hearing from you.

[Moeed]

Hey @Rickyxane

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

{% if template contains 'product' %}
<style>
span.price__current::after {
    content: "Closure Sale";
    background: #28c48c !important;
    color: white !important;
    font-size: 15px;
    margin-left: 15px;
    padding: 5px 15px !important;
    bottom: 5px !important;
    position: relative;
}
.price__default {
    display: flex !important;
    flex-flow: row-reverse !important;
    gap: 0.5em !important;
    justify-content: start !important;
}
</style>
{% endif %}

RESULT

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[tim_1]

Ok, here is the solution which does not require editing theme code (as it will make future theme updates problematic).

Use the following code in the “Custom CSS” setting of main product page section:

.product-form .price--on-sale .price__default:after{
  content: "Closure Sale!";
  display: inline-block;
  margin: 0 0.5rem;
  background: var(--product-label-overlay-reduction-bg);
  color: var(--header-bg-col);
  padding: 0 0.5rem;
}

This will show the badge for every variant which is actually on sale and leave others without:

The code will apply to every product which uses the same template.

If you want to apply the code only to some products, you’d need a different approach:
Create a “Custom liquid” block (or a section if there is no such block) and use code like this:

{% if product.tags contains "final-sale" %}
  <style>
    .product-form .price--on-sale .price__default:after{
      content: "Closure Sale!";
      display: inline-block;
      margin: 0 0.5rem;
      background: var(--product-label-overlay-reduction-bg);
      color: var(--header-bg-col);
      padding: 0 0.5rem;
    }
  </style>
{% endif %}

This code will show the badge only for products which has tag final-sale.
You can use a different condition.

Also, my code applies only to main product on the product page and does not affect the " Combine & save an extra 10%!" section.

[Rickyxane]

@tim_1

.product-form .price--on-sale .price__default:after{
  content: "Closure Sale!";
  display: inline-block;
  margin: 0 0.5rem;
  background: var(--product-label-overlay-reduction-bg);
  color: var(--header-bg-col);
  padding: 0 0.5rem;
}

Thank you!
It gives me this error, could you please have a look?

[Rickyxane]

When I use the code in the custom CSS, I can’t publish the edits because it gives an error.

[tim_1]

Ok “Custom CSS” seems to be overly picky and does not allow content: ""; rule. Will reach out to Shopify about this.

Pity, but you can still use “Custom liquid” section approach, leave <style>...</style> part to apply to all products, like this:

<style>
.product-form .price--on-sale .price__default:after{
  content: "Closure Sale!";
  display: inline-block;
  margin: 0 0.5rem;
  background: var(--product-label-overlay-reduction-bg);
  color: var(--header-bg-col);
  padding: 0 0.5rem;
}
</style>

[Rickyxane]

@tim_1

  <style>
    .product-form .price--on-sale .price__default:after{
      content: "Closure Sale!";
      display: inline-block;
      margin: 0 0.5rem;
      background: var(--product-label-overlay-reduction-bg);
      color: var(--header-bg-col);
      padding: 0 0.5rem;
    }
  </style>

That one works! Awesome.

[Rickyxane]

And, could you have a look at this?

Is it possible to create a section like that?

[tim_1]

Well, proper way is to install a Review app, some have free tier, like
EasyReviews ‑ Product Reviews or TrustShop: Product Reviews

Then position app widget block where you want it in Customizer.

Also, can you mark proper solution to not confuse other forum users?