Padlock icon on buttons

Solved
Highlighted
Shopify Partner
7 0 0

Is there a simple solution to add a padlock style icon/image to a button?

 

Something like the picture.

 

checkout_lock_icon2_-_ninjanutz_2048x

0 Likes
Highlighted

Success.

Shopify Partner
239 59 98

Hi @Matt_D,

 

Yes, there is a simple solution to add a padlock style icon/image to a button.

 

If you have the 'icon-lock' file in your assets directory, you can simply add this code anywhere to get the padlock style icon:

 

{% include 'icon-lock' %}

 

For instructions on how to do this on the specific button in your screenshot:

 

Before you customize your theme:

  • Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

 

Edit your theme code:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code.
  3. Click the cart-template.liquid file in your Sections directory.
  4. Find the code for the checkout button. Should look similar to this:
    <input type="submit" name="checkout" class="btn btn--small-wide cart__submit cart__submit-control" value="{{ 'cart.general.checkout' | t }}"/>
  5. Replace that code with this code:
    <button
      type="submit"
      name="checkout"
      class="btn btn--small-wide cart__submit btn--has-icon-before cart__submit-control"
    >
      {% include 'icon-lock' %} {{ 'cart.general.checkout' | t }}
    </button>
  6. Click Save.

 

If you don't have the 'icon-lock' file in your assets directory, I can provide that to you.

 

Let me know if this answers your question or if you need more help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like
Highlighted
New Member
2 0 0

Hello,

I don't have the icon-lock file in my theme. Is it possible to send it to me as well? Thank you.

0 Likes
Highlighted
Shopify Partner
7 0 0

Hello - if you go into "Edit Code" and then expand the "Snippets" folder you should find a file called icon-lock.liquid.  If you don't have it, you could download the latest Narrative theme as I know that has it in, or if you're still not finding let me know and I'll try sharing it. 🙂

0 Likes
Highlighted
New Member
1 0 0

Thank you so much for your guidance!  

I do not have a 'icon-lock' file in your assets directory and would be most appreciative if you provide me the code and information!

I am attempting to add the icon to my checkout tab!  First time playing with code!

 

Cheers and Thank you

Bumblebee

0 Likes
Highlighted
New Member
2 0 0

I tried it but it made the lock about 400px or so. Not sure what I did wrong but ended up just using a unicode lock in edit languages. Thank you.

0 Likes
Highlighted
Shopify Partner
7 0 0
Would you mind sharing a screenshot of what you did or post the code so that others might benefit?
0 Likes
Highlighted
New Member
1 0 0
Hi Brian, please could you share the padlock asset file so that I can add it to my Boundless theme.
0 Likes
Highlighted
Shopify Partner
239 59 98

Hi @Justyn1304,

 

@Matt_D is correct that the file should be located in the "Snippets" folder and not the "Assets" folder.

 

This is contents of the icon-lock.liquid file from the Debut theme:

 

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-lock" viewBox="0 0 17 20"><path fill="#FFF" d="M15.725 8.333H15.3V6.875C15.3 3.02 12.313 0 8.5 0 4.687 0 1.7 3.02 1.7 6.875v1.458h-.425C.571 8.333 0 8.893 0 9.583v9.167C0 19.44.571 20 1.275 20h14.45c.704 0 1.275-.56 1.275-1.25V9.583c0-.69-.571-1.25-1.275-1.25zM4.25 6.875C4.25 4.381 6.077 2.5 8.5 2.5s4.25 1.88 4.25 4.375v1.458h-8.5V6.875zm5.95 8.142c0 .91-.754 1.65-1.683 1.65h-.034c-.93 0-1.683-.74-1.683-1.65v-1.7c0-.911.754-1.65 1.683-1.65h.034c.93 0 1.683.739 1.683 1.65v1.7z"/></svg>

There are CSS styles associated with this icon that need to be added to your theme:

 

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    fill: currentColor;
}

 

Cheers!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes