Padlock icon on buttons

[Matt_D]

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

Something like the picture.

[BrianAtWork · Accepted solution]

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!

[shayes]

Hello,

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

[Matt_D]

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

[bumblebee]

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

[shayes]

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.

[Matt_D]

Would you mind sharing a screenshot of what you did or post the code so that others might benefit?

[Justyn1304]

Hi Brian, please could you share the padlock asset file so that I can add it to my Boundless theme.

[BrianAtWork]

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!