Shopify themes, liquid, logos, and UX
Hi! I have uploaded the logo with the right format and size but still, it is not showing properly on mobile view. Please see the attached image for reference. How can I fix this? Here is the link to my website: https://arshi-homes-testing.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
Hello @Sohaibarshad ,
Check in your theme settings there is 2 options to upload the logos.
One is for desktop and 2nd one is for mobile.
No need to edit the code.
If you are not sure where then read the theme documentation properly.
Thanks
oh sorry for that issue
can you please share header code so i will check and guide your
If you're comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by
Hello KetanKumar,
Sorry but I'm not well aware of coding technicalities. However, here's the link to my store: https://arshi-homes-testing.myshopify.com/
Please have a look at the header code.
Hello @KetanKumar,
My issue still prevails. The logo is still not visible on mobile view. To review the header code please visit my store at: https://arshi-homes-testing.myshopify.com/
Looking forward to your response.
yes, please share header code so i will update code
Thanks for the prompt reply.
Can you please guide me where I can find my header code?
Secondly I think the logo is being picked or linked with wrong URL. See attached image below.
yes, please go to edit code >>> section >>> header
Here you go @KetanKumar
<!-- /sections/header.liquid -->
{% if template contains 'index' %}
{% if section.settings.select_hds == "header_v1" %}
{% include 'header-v1' %}
{% elsif section.settings.select_hds == "header_v2" %}
{% include 'header-v2' %}
{% elsif section.settings.select_hds == "header_v3" %}
{% include 'header-v3' %}
{% elsif section.settings.select_hds == "header_v4" %}
{% include 'header-v4' %}
{% elsif section.settings.select_hds == "header_v5" %}
{% include 'header-v5' %}
{% elsif section.settings.select_hds == "header_v6" %}
{% include 'header-v6' %}
{% endif %}
{% else %}
{% if section.settings.select_hds_all == "header_ver1" %}
{% include 'header-v1' %}
{% elsif section.settings.select_hds_all == "header_ver2" %}
{% include 'header-v2' %}
{% elsif section.settings.select_hds_all == "header_ver3" %}
{% include 'header-v3' %}
{% elsif section.settings.select_hds_all == "header_ver4" %}
{% include 'header-v4' %}
{% elsif section.settings.select_hds_all == "header_ver5" %}
{% include 'header-v5' %}
{% elsif section.settings.select_hds_all == "header_ver6" %}
{% include 'header-v6' %}
{% endif %}
{% endif %}
{% schema %}
{
"name": "Header",
"class": "index-section",
"settings": [
{
"type": "header",
"content": "Header Homepage"
},
{
"type": "select",
"id": "select_hds",
"label": "Select Style",
"options": [
{
"value": "header_v1",
"label": "Header v1"
},
{
"value": "header_v2",
"label": "Header v2"
},
{
"value": "header_v3",
"label": "Header v3"
},
{
"value": "header_v4",
"label": "Header v4"
},
{
"value": "header_v5",
"label": "Header v5"
},
{
"value": "header_v6",
"label": "Header v6"
}
],
"default": "header_v1"
},
{
"type": "color",
"id": "hd_home_color_text",
"label": "Texts & Icons Color",
"default": "#fff"
},
{
"type": "checkbox",
"id": "hd_home_enable_transparents",
"label": "Enable Transparent?",
"default": true
},
{
"type": "color",
"id": "hd_home_bg_header_normal",
"label": "Background Color"
},
{
"type": "range",
"id": "hd_bg_header_opacity",
"min": 0.1,
"max": 1,
"step": 0.1,
"label": "Opacity Background",
"default": 1
},
{
"type": "checkbox",
"id": "enable_sticky_hd_home",
"label": "Enable Sticky?",
"default": true
},
{
"type": "image_picker",
"id": "hd_home_logo",
"label": "Logo Image",
"info": "140 x 46px .png recommended"
},
{
"type": "range",
"id": "hd_home_logo_maxwidth",
"min": 50,
"max": 300,
"step": 5,
"unit": "px",
"label": "Logo Display Width",
"default": 140
},
{
"type": "textarea",
"id": "hd_home_logo_svg",
"label": "Logo Svg"
},
{
"type": "header",
"content": "Header Other Pages"
},
{
"type": "select",
"id": "select_hds_all",
"label": "Select Style",
"options": [
{
"value": "header_ver1",
"label": "Header v1"
},
{
"value": "header_ver2",
"label": "Header v2"
},
{
"value": "header_ver3",
"label": "Header v3"
},
{
"value": "header_ver4",
"label": "Header v4"
},
{
"value": "header_ver5",
"label": "Header v5"
},
{
"value": "header_ver6",
"label": "Header v6"
}
],
"default": "header_ver1"
},
{
"type": "color",
"id": "hd_other_color_text",
"label": "Texts & Icons Color",
"default": "#fff"
},
{
"type": "checkbox",
"id": "hd_other_enable_transparents",
"label": "Enable Transparents?",
"default": true
},
{
"type": "color",
"id": "hd_other_bg_header_normal",
"label": "Background Color"
},
{
"type": "range",
"id": "hd_other_bg_header_opacity",
"min": 0.1,
"max": 1,
"step": 0.1,
"label": "Opacity Background",
"default": 1
},
{
"type": "checkbox",
"id": "enable_sticky_hd_other",
"label": "Enable Sticky?",
"default": true
},
{
"type": "image_picker",
"id": "hd_other_logo",
"label": "Logo Image",
"info": "140 x 46px .png recommended"
},
{
"type": "range",
"id": "hd_other_logo_maxwidth",
"min": 50,
"max": 300,
"step": 5,
"unit": "px",
"label": "Logo Display Width",
"default": 140
},
{
"type": "textarea",
"id": "hd_other_logo_svg",
"label": "Logo Svg"
},
{
"type": "header",
"content": "Select Menu"
},
{
"type": "link_list",
"id": "main_menu_store",
"label": "Main Menu"
}
]
}
{% endschema %}
thanks but its multiped header file if possible to give me theme access so i will quick check and fix
@ketanKumran
How can I provide you theme access?
You can send access request via your collaborator's account?
yes, please flow
https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts
@KetanKumar I resolved the issue. Apparently, the logo for the mobile header needed to be uploaded separately. I found the option in Theme Settings. Anyways, thanks for your help and support!
wow that's great
thanks for update
This is an accepted solution.
Hello @Sohaibarshad ,
Check in your theme settings there is 2 options to upload the logos.
One is for desktop and 2nd one is for mobile.
No need to edit the code.
If you are not sure where then read the theme documentation properly.
Thanks
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024