Solved

Frame around text

DCB
Excursionist
21 1 2

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".

DCB_0-1713974474090.png

 

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:

 

DCB_1-1713974516285.png

 

 

Many thanks in advance!

Accepted Solutions (2)
EBOOST
Shopify Partner
826 227 255

This is an 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

EBOOST_0-1714029868255.png

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>

EBOOST_1-1714030040103.png

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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST

View solution in original post

EBOOST
Shopify Partner
826 227 255

This is an 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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST

View solution in original post

Replies 8 (8)

EBOOST
Shopify Partner
826 227 255

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.

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
DCB
Excursionist
21 1 2

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
Shopify Partner
826 227 255

This is an 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

EBOOST_0-1714029868255.png

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>

EBOOST_1-1714030040103.png

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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
DCB
Excursionist
21 1 2

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. 

DCB_0-1714048057542.png

 




EBOOST
Shopify Partner
826 227 255

This is an 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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
DCB
Excursionist
21 1 2

Wow, that was insane! Thank you very much!

DCB_0-1714056449919.png


I love it! I appreciate it 🤗

DCB
Excursionist
21 1 2

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.

DCB_0-1715351563881.png

.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
Shopify Partner
826 227 255

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;
}
Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST