How can I add a login icon to my website header?

JJsBeehive · October 4, 2020, 12:09am

I’m wanting to add login icon onto my header. I’m using pop theme

can anyone help me please

my URL is jjsbeehive.com.au

KetanKumar · October 4, 2020, 4:57am

Hello, @JJsBeehive

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site header code,
So I will check and provide a solution here.

JJsBeehive · October 4, 2020, 5:24am

{% capture navSize %}250px{% endcapture %}
{% capture navHeaderSize %}{{ section.settings.menu_mobile | escape }}px{% endcapture %}
{% capture logoMaxHeight %}{{ section.settings.menu_mobile | escape | minus: 30 }}px{% endcapture %}
{% capture borderWidth %}{{ settings.border_width }}px{% endcapture %}
{% capture colorBorder %}{{ settings.color_borders }}{% endcapture %}

.site-header { {% if section.settings.border_menu %} border-bottom: {{ borderWidth }} solid {{ colorBorder }}; {% endif %} } @media screen and (max-width: 1024px) { .site-header { height: {{ navHeaderSize }}; } } {% if section.settings.border_menu %} @media screen and (min-width: 1025px) { .site-header { border-right: {{ borderWidth }} solid {{ colorBorder }}; border-width: 0 {{ borderWidth }} 0 0; } } {% endif %} @media screen and (min-width: 1025px) { .main-content { margin: 90px 0 0 0; } .site-header { height: 100%; width: {{ navSize }}; overflow-y: auto; left: 0; position: fixed; } } .nav-mobile { width: {{ navSize }}; } .page-move--nav .page-element { left: {{ navSize }}; } @media screen and (min-width: 1025px) { .page-wrapper { left: {{ navSize }}; width: calc(100% - {{ navSize }}); } } .supports-csstransforms .page-move--nav .page-element { left: 0; -webkit-transform: translateX({{ navSize }}); -moz-transform: translateX({{ navSize }}); -ms-transform: translateX({{ navSize }}); -o-transform: translateX({{ navSize }}); transform: translateX({{ navSize }}); } @media screen and (min-width: 1025px) { .supports-csstransforms .page-move--cart .site-header { left: -{{ navSize }}; } .supports-csstransforms .page-move--cart .page-wrapper { left: calc({{ navSize }} / 2); transform: translateX(calc(-50% + ({{ navSize }} / 2))); } } @media screen and (max-width: 1024px) { .page-wrapper { top: {{ navHeaderSize }}; } } .page-move--nav .ajaxify-drawer { right: -{{ navSize }}; } .supports-csstransforms .page-move--nav .ajaxify-drawer { right: 0; -webkit-transform: translateX({{ navSize }}); -moz-transform: translateX({{ navSize }}); -ms-transform: translateX({{ navSize }}); -o-transform: translateX({{ navSize }}); transform: translateX({{ navSize }}); } @media screen and (max-width: 1024px) { .header-logo img { max-height: {{ logoMaxHeight }}; } } @media screen and (min-width: 1025px) { .header-logo img { max-height: none; } } .nav-bar { height: {{ navHeaderSize }}; } @media screen and (max-width: 1024px) { .cart-toggle, .nav-toggle { height: {{ navHeaderSize }}; } }

{% assign navMenu = linklists[section.settings.nav_menu] %}

{% include 'site-nav' with navMenu %}

{{ 'general.navigation.menu' | t }}menu

{% if template.name == ‘index’ %}

{% else %}
{% endif %}
{% if section.settings.logo != blank %}

{% else %}
{{ shop.name }}
{% endif %}

{% if template.name == ‘index’ %}

{% else %}

{% endif %}

{{ 'layout.cart.title' | t }}cart

{% comment %}
Use the uploaded logo from section settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}

{% if template.name == 'index' %}

{% else %}
{% endif %}
{% if section.settings.logo != blank %}
{% capture img_id %}Logo-{{ section.id }}{% endcapture %}
{% capture img_wrapper_id %}LogoWrapper-{{ section.id }}{% endcapture %}
{%- assign img_url = section.settings.logo | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{% include ‘image-style’ with image: section.settings.logo, small_style: true, width: 195, height: 505, wrapper_id: img_wrapper_id, img_id: img_id %}

{% else %} {{ shop.name }} {% endif %}
{% if template.name == ‘index’ %}

{% else %}

{% endif %}

{% comment %}
Show number of items in the cart and total cost in the /cart link

Ajaxify Cart Notes:

#cartToggle toggles cart visibility (drawer or modal)
#cartCount updates the total number of items in the cart
#cartCost updates the total cost of the cart
Documentation: http://shopify.com/timber#ajax-cart
{% endcomment %}

{{ 'layout.cart.title' | t }} ({{ cart.item_count }})
{% if customer.first_name != blank %} {% capture first_name %}{{ customer.first_name }}{% endcapture %} {{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} {% else %} {{ 'layout.customer.account' | t }}
{{ 'layout.customer.log_out' | t }}
{{ 'layout.customer.log_in' | t }}
{{ 'layout.customer.create_account' | t }}

{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}

{% include 'site-nav' with navMenu %}

{% schema %}
{
“name”: {
“de”: “Logo und Menü”,
“en”: “Logo and menu”,
“es”: “Logotipo y menú”,
“fr”: “Logo et menu”,
“it”: “Logo e menu”,
“ja”: “ロゴとメニュー”,
“nl”: “Logo en menu”,
“pt-BR”: “Logo e menu”,
“zh-CN”: “徽标和菜单”,
“zh-TW”: “標誌和選單”
},
“settings”: [
{
“type”: “header”,
“content”: {
“de”: “Logo”,
“en”: “Logo”,
“es”: “Logotipo”,
“fr”: “Logo”,
“it”: “Logo”,
“ja”: “ロゴ”,
“nl”: “Logo”,
“pt-BR”: “Logotipo”,
“zh-CN”: “徽标”,
“zh-TW”: “商標”
}
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: {
“de”: “Benutzerdefiniertes Logo”,
“en”: “Custom logo”,
“es”: “Logotipo personalizado”,
“fr”: “Logo personnalisé”,
“it”: “Logo personalizzato”,
“ja”: “ロゴをカスタムする”,
“nl”: “Aangepast logo”,
“pt-BR”: “Logotipo personalizado”,
“zh-CN”: “自定义徽标”,
“zh-TW”: “自訂商標”
},
“info”: {
“de”: “Maximal 450 x 250 Pixel”,
“en”: “450 x 250px max”,
“es”: “450 x 250px máx.”,
“fr”: “450 x 250 px max”,
“it”: “450 x 250 px max”,
“ja”: “最大450 x 250ピクセル”,
“nl”: “450 x 250px max”,
“pt-BR”: “450 x 250px máx.”,
“zh-CN”: “最大 450 x 250 px”,
“zh-TW”: “最大 450 x 250 像素”
}
},
{
“type”: “header”,
“content”: {
“de”: “Hauptmenü”,
“en”: “Main Menu”,
“es”: “Menú principal”,
“fr”: “Menu principal”,
“it”: “Menu principale”,
“ja”: “メインメニュー”,
“nl”: “Hoofdmenu”,
“pt-BR”: “Menu principal”,
“zh-CN”: “主菜单”,
“zh-TW”: “主選單”
}
},
{
“type”: “link_list”,
“id”: “nav_menu”,
“label”: {
“de”: “Menü”,
“en”: “Menu”,
“es”: “Menú”,
“fr”: “Menu”,
“it”: “Menu”,
“ja”: “メニュー”,
“nl”: “Menu”,
“pt-BR”: “Menu”,
“zh-CN”: “菜单”,
“zh-TW”: “選單”
},
“default”: “main-menu”
},
{
“type”: “header”,
“content”: {
“de”: “Größe”,
“en”: “Sizing”,
“es”: “Dimensión”,
“fr”: “Dimensions”,
“it”: “Taglie”,
“ja”: “サイジング”,
“nl”: “Grootte aanpassen”,
“pt-BR”: “Dimensionamento”,
“zh-CN”: “调整大小”,
“zh-TW”: “尺寸確認”
}
},
{
“type”: “text”,
“id”: “menu_mobile”,
“label”: {
“de”: “Höhe des mobilen Hauptmenüs (in Pixel)”,
“en”: “Mobile main menu height (in pixels)”,
“es”: “Altura del menú principal de móvil (en píxeles)”,
“fr”: “Hauteur du menu principal mobile (en pixels)”,
“it”: “Altezza menu principale mobile (in pixel)”,
“ja”: “モバイルメインメニューの高さ (ピクセル単位)”,
“nl”: “Hoogte mobiel hoofdmenu (in pixels)”,
“pt-BR”: “Altura do menu principal móvel (em pixels)”,
“zh-CN”: “手机主菜单高度（以像素为单位）”,
“zh-TW”: “行動版主要選單高度 (單位為像素)”
}
},
{
“type”: “header”,
“content”: {
“de”: “Rahmen”,
“en”: “Border”,
“es”: “Borde”,
“fr”: “Bordure”,
“it”: “Bordo”,
“ja”: “罫線”,
“nl”: “Rand”,
“pt-BR”: “Borda”,
“zh-CN”: “边框”,
“zh-TW”: “邊框”
}
},
{
“type”: “checkbox”,
“id”: “border_menu”,
“label”: {
“de”: “Rahmen anzeigen”,
“en”: “Show border”,
“es”: “Mostrar borde”,
“fr”: “Afficher la bordure”,
“it”: “Mostra bordo”,
“ja”: “罫線を表示する”,
“nl”: “Toon rand”,
“pt-BR”: “Exibir borda”,
“zh-CN”: “显示边框”,
“zh-TW”: “顯示邊框”
}
}
]
}
{% endschema %}

KetanKumar · October 4, 2020, 10:14am

@JJsBeehive

Thanks for the details something is missing if possible to give me access so i will fix less than 20 min

JJsBeehive · October 4, 2020, 10:25am

Granted you staff permission, check your email. Thanks for your help

JJsBeehive · October 4, 2020, 11:21am

I can’t see the login details, can’t you figure out why it’s not working?

JJsBeehive · October 4, 2020, 11:46am

I’ve revoked access, hope someone else can help me

KetanKumar · October 4, 2020, 11:49am

@JJsBeehive

sorry i’m not able do this

JJsBeehive · October 4, 2020, 11:53am

I waited an hour after you accepted staff request, you said 20mins

KetanKumar · October 4, 2020, 7:38pm

@JJsBeehive

sorry but i can’t receive quick message on email

so someone fix this issue?

Topic		Replies	Views
Aggiungere icona log in a Header pagina Design di Shopify	3	92	February 24, 2023
How to activate login profile and icon on header - brooklyn theme Store Design	10	56	April 18, 2022
How to add a login icon to my Shopify Website? Store Design	11	108	July 22, 2022
Add header button next to login Minimal theme Store Design	4	65	September 5, 2021
Header login and cart icon issue Store Design design , header , customizations , css , shopify-themes , html	7	88	September 19, 2024

How can I add a login icon to my website header?

{% else %} {% endif %} {% if section.settings.logo != blank %} {% else %} {{ shop.name }} {% endif %} {% if template.name == ‘index’ %}

Related topics

{% else %}
{% endif %}
{% if section.settings.logo != blank %}

{% else %}
{{ shop.name }}
{% endif %}

{% if template.name == ‘index’ %}