How can I add icons with text under Add to Cart button Prestige Theme

[artronauts]

Hiya everyone,
It's about adding basic css liquids.
How can I add my own icons with text under the add to cart button section with css liquid code?
Attached below.(another store).

Also second question:

How can I add the Save ($$) badges next to Price section? I see the save badge but it looks bad and under the price. attached another store thank you so much

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @artronauts  Please follow image here:

<div class="container">
  <div class="column">
    <h3 class="title"> Title1</h3>
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
      </svg>
    </div>
  </div>
  <div class="column">
    <h3 class="title">Title1</h3>
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
      </svg>
    </div>
  </div>
  <div class="column">
    <h3 class="title">Title1</h3>
    <div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
      </svg>
    </div>
  </div>
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.column {
  flex: 1;
  text-align: center;
  margin: 0 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.icon svg {
  width: 30px;
  height: 30px;
  fill: #333;
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[artronauts]

Hi,
 It didn't work exactly. title must be 14px and it must be under the icon. Please many thanks ❤️

[PageFly-Noah]

 Hi @artronauts  Ok sure, Please add code here:

<div class="container">
  <div class="column">
<div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
      </svg>
    </div>
    <h3 class="title"> Title1</h3>
    
  </div>
  <div class="column">
<div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
      </svg>
    </div>
    <h3 class="title">Title1</h3>
    
  </div>
  <div class="column">
<div class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
      </svg>
    </div>
    <h3 class="title">Title1</h3>
    
  </div>
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}

.column {
  flex: 1;
  text-align: center;
  margin: 0 10px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.icon svg {
  width: 30px;
  height: 30px;
  fill: #333;
}

</style>

[Amanda_Fordeer]

Hi @artronauts,

If you are unable to achieve this by adding code directly, you can consider using product badge applications as a temporary solution or leverage them to bring even more benefits to your sales efforts. For instance, using the Fordeer Product Labels & Badges app, you can easily set icons by navigating to the Trust badges tab.

[artronauts]

Hi Amanda,

I need as a css liquid code thanks.
@KetanKumar i need your help Ketan! Thanks!

[KetanKumar]

@artronauts 

oh sorry for late reply let me know how can i help you?