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

artronauts
Excursionist
36 1 9

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

Ekran Resmi 2024-05-30 01.36.06.png

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

Ekran Resmi 2024-05-30 01.39.18.png

Replies 6 (6)

PageFly-Noah
Shopify Partner
1283 227 260

This is Noah from PageFly - Shopify Page Builder App

Hi @artronauts  Please follow image here:

PageFlyNoah_1-1717033332607.png

 

<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

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.

artronauts
Excursionist
36 1 9

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

artronauts_0-1717062125781.png

 

PageFly-Noah
Shopify Partner
1283 227 260

 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>

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.

Amanda0128
Shopify Partner
53 4 18

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.

If you find my suggestion helpful, please give it a like or mark it as a solution!
And discover more approaches to:
Streamline invoicing process Boost sales with labels & badges Add social proofs & create FOMO
Or get valuable updates and private deals regarding Shopify here.
artronauts
Excursionist
36 1 9

Hi Amanda,

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

KetanKumar
Shopify Partner
36904 3640 11985

@artronauts 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing