Frame around text

[DCB]

Hello everyone

Can you help me with a design request.

I would like a frame / speech bubble around a certain text. (See picture) Like the "2,50€ pro Maniküre".

Would this work with a custom liquid?

I would like to insert a different text but it would be great if the speech bubble is for the price. It currently looks like this on our site:

Many thanks in advance!

[EBOOST · Accepted solution]

Hi, 

If you use Dawn theme. May I suggest to update code these steps:

1. Go to Settings-> custom data -> product

2. create a metafield

   - namespace: custom

   - key: tooltip

   - type: single line text

3. Go to Store Online-> theme -> edit code

4. Go to snippets/price.liquid

5. replace code of this file with code below

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%  if product.metafields.custom.tooltip != blank %}
        <div class="tooltip-price">
          {{  product.metafields.custom.tooltip }}
        </div>
      {%  endif  %}
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{ money_price }}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {%  if product.metafields.custom.tooltip != blank %}
            <div class="tooltip-price">
              {{  product.metafields.custom.tooltip }}
            </div>
          {%  endif  %}
        {{ money_price }}
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>

6. go to Assets/base.css add code below to end of file

.card__heading {
  position: relative;
}
.price {
  padding-top: 20px;
}
.price__regular,
.price-item {
  position: relative;
}
.tooltip-price {
  display: block;
  position: absolute;
  top: calc(-100% - 1px);
  border: 1px solid currentColor;
  padding: 0 .5rem;
  background: #fff;
  font-size: 1.3rem;
  white-space: nowrap;
}
.tooltip-price:after{
  content: "";
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  position: absolute;
  left: 15px;
  bottom: -6px;
}

[EBOOST]

Hi @DCB,

It is possible.

- If you want add other text for other products after that you need add a tag for each product or create a metafield.

- If you want add a certain text for all products. You only need create a setting in the section or settings.

After that add some liquid codes and CSS to show like the screenshot.

[DCB]

it would be great with a metafield, so I could write the text for each product adapted to the angle.

are there any discussions where i could copy the code from?

[EBOOST · Accepted solution]

Hi, 

If you use Dawn theme. May I suggest to update code these steps:

1. Go to Settings-> custom data -> product

2. create a metafield

   - namespace: custom

   - key: tooltip

   - type: single line text

3. Go to Store Online-> theme -> edit code

4. Go to snippets/price.liquid

5. replace code of this file with code below

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%  if product.metafields.custom.tooltip != blank %}
        <div class="tooltip-price">
          {{  product.metafields.custom.tooltip }}
        </div>
      {%  endif  %}
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{ money_price }}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {%  if product.metafields.custom.tooltip != blank %}
            <div class="tooltip-price">
              {{  product.metafields.custom.tooltip }}
            </div>
          {%  endif  %}
        {{ money_price }}
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>

6. go to Assets/base.css add code below to end of file

.card__heading {
  position: relative;
}
.price {
  padding-top: 20px;
}
.price__regular,
.price-item {
  position: relative;
}
.tooltip-price {
  display: block;
  position: absolute;
  top: calc(-100% - 1px);
  border: 1px solid currentColor;
  padding: 0 .5rem;
  background: #fff;
  font-size: 1.3rem;
  white-space: nowrap;
}
.tooltip-price:after{
  content: "";
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  position: absolute;
  left: 15px;
  bottom: -6px;
}

[DCB]

Wow, it actually worked! Only problem which appeared is, that it also is visible on the collection page and the homepage. So i guess on every product card. Is it possible to show it only on the product pages? There is also a padding on the collection pages. So i guess its already there but only is visible when i write something in the metafield. 

[EBOOST · Accepted solution]

Hi @DCB ,

If you only want to show on Product detail pages. At step 6. Replace CSS above with CSS below

.tooltip-price { display: none;}
.product .price {
  padding-top: 20px;
}
.product .price__regular,
.product .price-item {
  position: relative;
}
.product .tooltip-price {
  display: block;
  position: absolute;
  top: calc(-100% - 1px);
  border: 1px solid currentColor;
  padding: 0 .5rem;
  background: #fff;
  font-size: 1.3rem;
  white-space: nowrap;
}
.product .tooltip-price:after{
  content: "";
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  position: absolute;
  left: 15px;
  bottom: -6px;
}

[DCB]

Wow, that was insane! Thank you very much!

I love it! I appreciate it 🤗

[DCB]

I may have another request 🙂

Is it possible to put the text with the border left aligned? Would be nice if i could try it and see which fits better. Now it looks a lil bit chaotic because everything is left aligned and this text is far right.

.tooltip-price { display: none;}
.product .price {
padding-top: 20px;
padding-bottom: 2px;
}
.product .price__regular,
.product .price-item {
position: relative;
font-size: 25px;
}
.product .tooltip-price {
display: block;
position: absolute;
top: calc(-100% - 1px);
border: 1px solid #A9A9A9;
border-radius: 11px;
padding: 0 .5rem;
background: #fff;
color: black;
font-weight: normal;
font-size: 1.3rem;
white-space: nowrap;
margin-top: 10px;
padding-bottom: 2px;
}
.product .tooltip-price:after{
content: "";
display: block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
position: absolute;
left: 15px;
bottom: -7px;
}

[EBOOST]

Hi,

May I suggest code below to replace old code

.tooltip-price {
    display: none;
}

.product .price {
    padding-top: 20px;
    padding-bottom: 2px;
}

.product .price__regular,
.product .price-item {
    position: relative;
    font-size: 25px;
}

.product .tooltip-price {
    display: block;
    position: absolute;
    top: calc(-100% - 1px);
    border: 1px solid #A9A9A9;
    border-radius: 11px;
    padding: 0 .5rem;
    background: #fff;
    color: black;
    font-weight: normal;
    font-size: 1.3rem;
    white-space: nowrap;
    margin-top: 10px;
    padding-bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.product .tooltip-price:after {
    content: "";
    display: block;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
}