If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Shopify. How to add icon into Custom block

The following tutorial is going to show you how to add an icon into Custom block in Shopify template.

  1. Log into your site admin panel and navigate to Online Store -> Themes.

  2. Click on Edit HTML/CSS tab:

    Shopify. How to add icon into Custom block_1

  3. Find the assets.css.liquid file in the Assets folder:

    Shopify. How to add icon into Custom block_2

  4. Find the list of icons there on line 6695 (line number might differ in your template):

    Shopify. How to add icon into Custom block_3

  5. Let’s add an airplane icon to header custom block #1. Find the name of an icon you need in the list (to see the list you need to scroll it to the right):

    Shopify. How to add icon into Custom block_4

  6. Then open the settings_schema.json file in Config folder:

    Shopify. How to add icon into Custom block_5

  7. Find the place where header custom block #1 icons are set (you can use Ctrl+F buttons for quick search):

    Shopify. How to add icon into Custom block_6

  8. Copy and paste the last item code:

    Shopify. How to add icon into Custom block_7

  9. Then change the “label” and “value” up to your needs (in our case it is fl-bigmug-line-airplane86 and Airplane):

    Shopify. How to add icon into Custom block_8

  10. Save the changes:

    Shopify. How to add icon into Custom block_9

  11. Now you can choose your new icon for Header custom block #1:

    Shopify. How to add icon into Custom block_10

This is the end of the tutorial. Now you know how to add an icon into a Custom block in Shopify.

Feel free to check the detailed video tutorial below:

Shopify. How to add icon into Custom block