How to remove Shopping cart & Search icon and replace it with linkedin, instagram and upwork

[Adrians_L]

Hello, how do i replace the shopping cart & search icon with social media symbols that open a new window to those websites? if possible with their logo aswell

Lininskis.com

[BSS-Commerce]

Hi @Adrians_L ,

1. First, you need to upload the images that you intend to assign as the logo for your button header. To do that, first, go to the Content tab => select Files, then click the Upload Files button and select the image to upload.

2. After uploading the image, click on the Copy link button to get the cdn link of the newly uploaded image. This image link will be used in step 7 of my tutorial list so please pay attention to it

3. Next step, click on Sale channels => select Online Store => select Edit code to edit the theme code.

4. Before adding a custom button, we need to hide the search and cart button with CSS. Find the base.css file in the Assets folder and add the following code at the end of the file:

.header__search, .header__icon--account, .header__icon--cart {
  display: none !important;
}

.linkedin__icon, .instagram__icon, .upwork__icon {
  margin-right: 10px;
}  

5. After hiding the search and cart buttons, we will start creating the button according to our wishes.

First, we need to create a file responsible for assigning a logo to the button. Go to the Snippets folder, choose to create a new file, name it so it’s easy to distinguish from the rest of the header buttons (eg Linkedin-btn, Instagram-btn…):

6. Add the following code to the newly created liquid file:

<style>
[class*='linkedin__icon'] {
    background: url("logo_cdn_link") !important;
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
}
</style>

7. Paste the cdn link you copied in step 2 into the part I highlighted. This step plays the role of assigning the image link you want to the button:

8. In the final step, we will add a button element to the theme. Find the header.liquid file located in the Sections folder

Here, press the key combination Ctrl + F and enter the phrase “header__icons” into the search bar

9. After finding the location of the header_icons element, insert the following code into the line below to complete adding the Linkedin button to the list of buttons in the header:

<!-- CUSTOM HEADER BUTTON -->
<a target="_blank" href="your_custom_url" class="linkedin__icon header__icon link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
   {% include "Snippet_Btn_file" %}
</a>
<!-- END CUSTOM HEADER BUTTON -->

In this code, your_custom_url contains the url you want the button to point to, and Snippet_Btn_file is the file name that assigns the logo corresponding to each button that chungsta created in step 5.

=> After completing the above steps, our custom button will be displayed on the storefront:

=> You can also add more custom buttons by repeating the steps as I instructed

Hope it works @Adrians_L

[Adrians_L]

Worked perfectly thank you a lot

[Adrians_L]

There is one issue that i came across if i want 2 or more icons it hides the oldest one