Add Track order icon on the header

[raitom]

hello. someone can help me plis i want to add a icon with a truck on the header to track orders...

Im using the DAWN THEME.

my page: https://raitom.com/

ICON:

https://www.reshot.com/free-svg-icons/item/delivery-truck-EBUG9Y4MZD/

[BSSCommerce-B2B · Accepted solution]

Hi @raitom,

Step 1:  Go to Online Store -> Theme -> Edit code.

Step 2: Find the file header.liquid, and locate the code snippets I've marked here.

Step 3: Add this code above that

 <a href="/track-order" class="header__icon header__icon--cart link focus-inset">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:#231f20}</style></defs><g id="delivery_truck" data-name="delivery truck"><path class="cls-1" d="M27.93 13h-2.25l-1.37-3.43A2.51 2.51 0 0 0 22 8h-3a2.1 2.1 0 0 0-2.1-2H10a1 1 0 0 0 0 2h6.9a.09.09 0 0 1 .1.1V21h-6.18a3 3 0 0 0-5.64 0H4.1a.09.09 0 0 1-.1-.1V8.1a.09.09 0 0 1 .1-.1H6a1 1 0 0 0 0-2H4.1A2.1 2.1 0 0 0 2 8.1v12.8A2.1 2.1 0 0 0 4.1 23h1.08a3 3 0 0 0 5.64 0h9.36a3 3 0 0 0 5.64 0H27a3 3 0 0 0 3-3v-4.9a2.07 2.07 0 0 0-2.07-2.1zM8 23a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm15 0a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm5-3a1 1 0 0 1-1 1h-1.18a3 3 0 0 0-5.64 0H19V10h3a.5.5 0 0 1 .47.31L23.52 13H21a1 1 0 0 0 0 2l7 .07z"/><path class="cls-1" d="m12.86 11.23-6 5a1 1 0 0 0-.13 1.41 1 1 0 0 0 .77.36 1 1 0 0 0 .64-.23l6-5a1 1 0 1 0-1.28-1.54zM6.52 12a1 1 0 1 0 1-1 1 1 0 0 0-1 1zM13.51 16a1 1 0 1 0 1 1 1 1 0 0 0-1-1z"/></g></svg>
  </a>

It will look like this

Replace track-order by the link to your track order page

If you don't have a track order page, you can follow this video to create one: https://www.youtube.com/watch?v=bRQTqCbt9SE

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day! 

[BSSCommerce-B2B · Accepted solution]

Hi @raitom,

Step 1:  Go to Online Store -> Theme -> Edit code.

Step 2: Find the file header.liquid, and locate the code snippets I've marked here.

Step 3: Add this code above that

 <a href="/track-order" class="header__icon header__icon--cart link focus-inset">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:#231f20}</style></defs><g id="delivery_truck" data-name="delivery truck"><path class="cls-1" d="M27.93 13h-2.25l-1.37-3.43A2.51 2.51 0 0 0 22 8h-3a2.1 2.1 0 0 0-2.1-2H10a1 1 0 0 0 0 2h6.9a.09.09 0 0 1 .1.1V21h-6.18a3 3 0 0 0-5.64 0H4.1a.09.09 0 0 1-.1-.1V8.1a.09.09 0 0 1 .1-.1H6a1 1 0 0 0 0-2H4.1A2.1 2.1 0 0 0 2 8.1v12.8A2.1 2.1 0 0 0 4.1 23h1.08a3 3 0 0 0 5.64 0h9.36a3 3 0 0 0 5.64 0H27a3 3 0 0 0 3-3v-4.9a2.07 2.07 0 0 0-2.07-2.1zM8 23a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm15 0a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm5-3a1 1 0 0 1-1 1h-1.18a3 3 0 0 0-5.64 0H19V10h3a.5.5 0 0 1 .47.31L23.52 13H21a1 1 0 0 0 0 2l7 .07z"/><path class="cls-1" d="m12.86 11.23-6 5a1 1 0 0 0-.13 1.41 1 1 0 0 0 .77.36 1 1 0 0 0 .64-.23l6-5a1 1 0 1 0-1.28-1.54zM6.52 12a1 1 0 1 0 1-1 1 1 0 0 0-1 1zM13.51 16a1 1 0 1 0 1 1 1 1 0 0 0-1-1z"/></g></svg>
  </a>

It will look like this

Replace track-order by the link to your track order page

If you don't have a track order page, you can follow this video to create one: https://www.youtube.com/watch?v=bRQTqCbt9SE

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day! 

[raitom]

it work thank you very much.   love it.

one more thing how can i put more space between the truck and cart ?

[BSSCommerce-B2B · Accepted solution]

@raitom,

Step 1:  Go to Online Store -> Theme -> Edit code.

Step 2: Find the file base.css

Step 3: Add this code to the end of file

a[href="/pages/order-tracking"] {
    margin-right: 0px;
    margin-left: 12px;
}

Result:

[raitom]

thank you bro it workk..

[raitom]

hi there, when i just realise when i open the website on my iphone the icon doesnt show up on the screen can you help with this error pls 

[BSSCommerce-B2B]

@raitom, It is a bug on ios device. Both cart icon and track icon don't show.

You can change the code in step 3 like this

 <a href="/track-order" class="header__icon header__icon--cart link focus-inset">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:#231f20}</style></defs><g id="delivery_truck" data-name="delivery truck"><path class="cls-1" d="M27.93 13h-2.25l-1.37-3.43A2.51 2.51 0 0 0 22 8h-3a2.1 2.1 0 0 0-2.1-2H10a1 1 0 0 0 0 2h6.9a.09.09 0 0 1 .1.1V21h-6.18a3 3 0 0 0-5.64 0H4.1a.09.09 0 0 1-.1-.1V8.1a.09.09 0 0 1 .1-.1H6a1 1 0 0 0 0-2H4.1A2.1 2.1 0 0 0 2 8.1v12.8A2.1 2.1 0 0 0 4.1 23h1.08a3 3 0 0 0 5.64 0h9.36a3 3 0 0 0 5.64 0H27a3 3 0 0 0 3-3v-4.9a2.07 2.07 0 0 0-2.07-2.1zM8 23a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm15 0a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm5-3a1 1 0 0 1-1 1h-1.18a3 3 0 0 0-5.64 0H19V10h3a.5.5 0 0 1 .47.31L23.52 13H21a1 1 0 0 0 0 2l7 .07z"/><path class="cls-1" d="m12.86 11.23-6 5a1 1 0 0 0-.13 1.41 1 1 0 0 0 .77.36 1 1 0 0 0 .64-.23l6-5a1 1 0 1 0-1.28-1.54zM6.52 12a1 1 0 1 0 1-1 1 1 0 0 0-1 1zM13.51 16a1 1 0 1 0 1 1 1 1 0 0 0-1-1z"/></g></svg>
  </a>

In the icon-svg.liquid file, you can set the width and height for the SVG like this.

width="100%" height="100%"

Hope it helps

[raitom]

what do i need to do to put the cart(bag) aswell... only the track order is there 

[BSSCommerce-B2B]

@raitom, Did you find the "icon-cart.svg" file?

Please add this code after <svg 

width="100%" height="100%"

It will look like 

[raitom]

Yes I did it