Display tick mark under the product price

Display tick mark under the product price

Old_money
Tourist
14 0 5

Hello. I want to display the tick mark icon under the product price

 

here's the example:

Untitled.png

 

Thanks

Regency

Replies 6 (6)

BSSCommerce-B2B
Shopify Partner
1718 512 575

@Old_money , Can you kindly share your store url?

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Old_money
Tourist
14 0 5

Hello

 

Here's the link:
https://regencys.co/

 

Thanks

Regency

BSSCommerce-B2B
Shopify Partner
1718 512 575

@Old_money ,

Step 1. Go to Online Store -> Theme -> Edit code -> Add a new asset -> Create a blank file -> Choose svg and fill file name with "icon-tick-mark"

BSSCommerceB2B_0-1726680615265.png

Step 2: Paste this code in icon-tick-mark.svg file

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 116.87">
    <defs>
        <style>
            .cls-1 { fill: #1b2838; }
            .cls-2 { fill: #fff; }
        </style>
    </defs>
    <title>verified-symbol</title>
    <polygon class="cls-1"
        points="61.37 8.24 80.43 0 90.88 17.79 111.15 22.32 109.15 42.85 122.88 58.43 109.2 73.87 111.15 94.55 91 99 80.43 116.87 61.51 108.62 42.45 116.87 32 99.08 11.73 94.55 13.73 74.01 0 58.43 13.68 42.99 11.73 22.32 31.88 17.87 42.45 0 61.37 8.24 61.37 8.24" />
    <path class="cls-2"
        d="M37.92,65c-6.07-6.53,3.25-16.26,10-10.1,2.38,2.17,5.84,5.34,8.24,7.49L74.66,39.66C81.1,33,91.27,42.78,84.91,49.48L61.67,77.2a7.13,7.13,0,0,1-9.9.44C47.83,73.89,42.05,68.5,37.92,65Z" />
</svg>

Step 3: Add this code after {% render 'product-variant-picker'....  in main-product.liquid file

 <div style="display: flex; align-items: center; gap: 4px;">
                  <span class="tick-mark-icon">
                  {{- 'icon-tick-mark.svg' | inline_asset_content -}} 
                  </span>
                <span>Delivery gurantee. Refund for any issue.</span>

It will look like this

BSSCommerceB2B_1-1726680847524.png

Step 4: Add this code to the end of base.css file

.tick-mark-icon {
  display: flex;
  margin-bottom: 4px;
}
.tick-mark-icon svg {
  width: 18px;
  height: auto;
}

It will look like:

BSSCommerceB2B_2-1726680884709.png

Result 

BSSCommerceB2B_3-1726680902735.png

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

BSSCommerce-B2B
Shopify Partner
1718 512 575

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Old_money
Tourist
14 0 5

Hi @BSSCommerce-B2B 

 

its giving an error like this:

Old_money_0-1726681592747.png

Thanks

 

BSSCommerce-B2B
Shopify Partner
1718 512 575

@Old_money , Did you fix that? I see it's working now on your site 😀

BSSCommerceB2B_0-1726711643115.png

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now