Shopify themes, liquid, logos, and UX
I'm trying to implement social media icons on my header, for this site: www.artclubapparel.com
Ideally I would like to place them below the search bar and shopping cart as highlighted in green on the screenshot below:
The header is a bit tricky though, because when you hover the mouse when on the Home page, the hero images are on the background. Currently when this happens, logo, icons turn to white, then revert back to black when on the rest of site.
The theme I'm using has an Announcement Bar feature, but it doesn't have an additional section for social media icons. It's only function is rotating text.
Any help would be greatly appreciated.
Thank you!
Solved! Go to the solution
This is an accepted solution.
Oh, that's odd. Sorry. Apparently (.rtf) files aren't supported. I'll just paste them here.
theme.liquid
<!doctype html>
{%- capture dir -%}
{%- case request.locale.iso_code -%}
{%- when 'ae' or 'ar' or 'arc' or 'bcc' or 'bqi' or 'ckb' or 'dv' or 'fa' or 'glk' or 'ha' or 'he' or 'kwh' or 'ks' or 'ku' or 'mzn' or 'nqo' or 'pnb' or 'ps' or 'sd' or 'ug' or 'ur' or 'yi' -%}
rtl
{%- else -%}
ltr
{%- endcase -%}
{%- endcapture -%}
<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{{ dir }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">
<meta name="theme-color" content="{{ settings.color_body_bg }}">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
{% render 'head-preload' %}
{% if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif %}
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
{%- unless settings.heading_font.system? and settings.body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}
{% render 'social-meta-tags' %}
{{ 'app.css' | asset_url | stylesheet_tag }}
{% render 'head-variables' %}
<script>
window.theme = window.theme || {};
theme = {
settings: {
money_with_currency_format: {{- shop.money_format | json -}},
cart_drawer: {{- settings.cart_drawer -}},
product_id: {% if product %}{{ product.id }}{% else %}false{% endif %},
},
routes: {
root_url: '{{ routes.root_url }}',
cart_url: '{{ routes.cart_url }}',
cart_add_url: '{{ routes.cart_add_url }}',
search_url: '{{ routes.search_url }}',
cart_change_url: '{{ routes.cart_change_url }}',
cart_update_url: '{{ routes.cart_update_url }}',
predictive_search_url: '{{ routes.predictive_search_url }}',
},
variantStrings: {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
preOrder: `{{ 'products.product.pre_order' | t }}`,
},
strings: {
requiresTerms: `{{ 'sections.cart.terms_confirm' | t }}`,
shippingEstimatorNoResults: `{{ 'sections.cart.shipping_estimator.no_results' | t }}`,
shippingEstimatorOneResult: `{{ 'sections.cart.shipping_estimator.one_result' | t }}`,
shippingEstimatorMultipleResults: `{{ 'sections.cart.shipping_estimator.multiple_results' | t }}`,
shippingEstimatorError: `{{ 'sections.cart.shipping_estimator.error' | t }}`
}
};
</script>
{{ content_for_header }} <!-- Header hook for plugins -->
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
</head>
<body class="animations-{{ settings.animations }} button-uppercase-{{ settings.button_uppercase }} navigation-uppercase-{{ settings.navigation_uppercase }} product-title-uppercase-{{ settings.product_title_uppercase }}{% if customer %} customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}">
<a class="screen-reader-shortcut" href="#main-content">{{ 'accessibility.skip_to_text' | t }}</a>
<div id="wrapper">
{% sections 'header-group' %}
<div role="main" id="main-content">
{{ content_for_layout }}
</div>
{% sections 'footer-group' %}
{% render 'cart-drawer' %}
{% render 'product-drawer' %}
{% render 'search-drawer' %}
<div class="click-capture"></div>
</div>
{{ 'vendor.min.js' | asset_url | script_tag }}
{% if settings.animations %}
{{ 'animations.min.js' | asset_url | script_tag }}
<script>
gsap.defaults({
ease: Power4.easeOut
});
gsap.config({
nullTargetWarn: false
});
gsap.registerPlugin(ScrollTrigger);
</script>
{% endif %}
{% if settings.enable_quick_view or settings.enable_quick_add %}
{{ 'product.js' | asset_url | script_tag }}
{% endif %}
{{ 'slideshow.js' | asset_url | script_tag }}
{{ 'app.js' | asset_url | script_tag }}
<script type="module" src="{{ 'scroll-shadow.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- if request.design_mode -%}
{{ 'theme-editor.js' | asset_url | script_tag }}
{%- endif -%}
{%- if settings.cart_recommendations -%}
<script src="{{ 'product-recommendations.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{% render 'back-to-top' %}
<style>
h1.collection-banner--title {
display: none !important;
}
</style>
</body>
</html>
______
footer.liquid
{% liquid
assign full_width = section.settings.full_width
assign copyright_text = section.settings.copyright_text
assign show_language_switcher = section.settings.show_language_switcher
assign show_currency_switcher = section.settings.show_currency_switcher
assign show_payment_icons = section.settings.show_payment_icons
%}
<link rel="stylesheet" href="{{ 'footer.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'footer.css' | asset_url | stylesheet_tag }}</noscript>
<footer class="footer" id="footer">
<div class="row {% if full_width %}full-width-row{% endif %}">
{%- for block in section.blocks -%}
{% if block.type == 'text' %}
{%- liquid
assign column_class = 'small-12 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--text">
{%- if block.settings.title != blank -%}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{%- endif -%}
{%- if block.settings.image != blank -%}
{% assign image = block.settings.image %}
{% assign master_width = image.src.width | append: 'x' | append: image.src.height %}
{%- render 'responsive-image', image: image, sizes: master_width, retina: 1, priority: 'low' -%}
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte text-size--{{ block.settings.text_size }}">
{{ block.settings.text }}
</div>
{%- endif -%}
{%- if block.settings.button_text != blank -%}
<a class="text-button" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">{{ block.settings.button_text }}</a>
{%- endif -%}
{%- if block.settings.show_social_links -%}
{%- render 'social-links' -%}
{%- endif -%}
</div>
</div>
{% endif %}
{%- if block.type == 'menu' -%}
{%- liquid
assign column_class = 'small-12 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns widget--menu-column" {{ block.shopify_attributes }}>
<div class="widget widget--menu">
<button class="thb-widget-title collapsible" tabindex="0">{{ block.settings.title }} <span></span></button>
{%- if block.settings.menu != blank -%}
<ul class="thb-widget-menu">
{% for link in block.settings.menu.links %}
{% assign has_sub_menu = false %}
{% if link.links.size > 0 %}
{% assign has_sub_menu = true %}
{% endif %}
<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if link.active %} active{% endif %}">
<a href="{{ link.url }}" title="{{ link.title | escape }}"{%- if link.active %} aria-current="page"{% endif -%}>{{ link.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}
{% if has_sub_menu %}
<ul class="sub-menu" tabindex="-1">
{% for l in link.links %}
{% assign has_sub_menu = false %}
{% if l.links.size > 0 %}
{% assign has_sub_menu = true %}
{% endif %}
<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if l.active %} active{% endif %}" role="none">
<a href="{{ l.url }}" title="{{ l.title | escape }}" role="menuitem">{{ l.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}
{% if has_sub_menu %}
<ul class="sub-menu" role="menu">
{% for sub_link in l.links %}
{% assign has_sub_menu = false %}
{% if sub_link.links.size > 0 %}
{% assign has_sub_menu = true %}
{% endif %}
<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if sub_link.active %} active{% endif %}" role="none">
<a href="{{ sub_link.url }}" title="{{ sub_link.title | escape }}" role="menuitem">{{ sub_link.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- if block.type == 'signup' -%}
{%- liquid
assign column_class = 'small-12 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--signup">
{% if block.settings.title != blank %}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% render 'email-signup-form' %}
</div>
</div>
{%- endif -%}
{%- if block.type == 'social' -%}
{%- liquid
assign column_class = 'small-6 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--social">
{% if block.settings.title != blank %}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{% endif %}
{% render 'social-links' %}
</div>
</div>
{%- endif -%}
{%- if block.type == 'custom_liquid' -%}
{%- liquid
assign column_class = 'small-6 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--custom">
{% if block.settings.title != blank %}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{% endif %}
{{ block.settings.custom_liquid }}
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
<div class="sub-footer">
<div class="row {% if full_width %}full-width-row{% endif %}">
<div class="small-12 medium-8 columns">
{% render 'localization', id: 'FooterLocalization', show_language_switcher: show_language_switcher, show_currency_switcher: show_currency_switcher %}
</div>
<div class="small-12 medium-4 columns">
{%- if show_payment_icons -%}
<div class="footer-payment-icons">
{%- unless shop.enabled_payment_types == empty -%}
{%- for type in shop.enabled_payment_types -%}
<figure>{{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}</figure>
{%- endfor -%}
{%- endunless -%}
</div>
{%- endif -%}
</div>
<div class="small-12 columns">
<p>© {{ 'now' | date: "%Y" }} {{ shop.name }}, {{ copyright_text }} {{ powered_by_link }}</p>
{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
<div class="footer--follow-on-shop">
{{ shop | login_button: action: 'follow' }}
</div>
{%- endif -%}
</div>
</div>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"class": "section-footer",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "Make section full width"
},
{
"type": "text",
"id": "copyright_text",
"label": "Additional copyright text",
"default": "All rights reserved."
},
{
"type": "checkbox",
"id": "show_language_switcher",
"label": "Enable language switcher",
"default": true,
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show_currency_switcher",
"label": "Enable currency switcher",
"default": true,
"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons",
"default": true,
"info": "By default your theme shows the icons that are associated with the payment gateway you have enabled in the [payment settings](/admin/settings/payments)."
},
{
"type": "header",
"content": "Follow on Shop",
"info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
},
{
"type": "checkbox",
"id": "enable_follow_on_shop",
"default": true,
"label": "Enable Follow on Shop"
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "240 x 100 px .png recommended."
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add company info here.</p>"
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"id": "button_text",
"type": "text",
"label": "Button label",
"default": "Explore",
"info": "Leave the label blank to hide the button."
},
{
"id": "button_link",
"type": "url",
"label": "Button link"
},
{
"type": "checkbox",
"id": "show_social_links",
"label": "Show social links",
"default": true
}
]
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "Menu",
"info": "Select navigation to display"
}
]
},
{
"type": "social",
"name": "Social links",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
},
{
"type": "signup",
"name": "Email signup",
"limit": 1,
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add a text to attract more customers to <strong>sign up!</strong></p>"
}
]
},
{
"type": "custom_liquid",
"name": "Custom liquid",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom liquid",
"info": "Add app snippets or other Liquid code to create advanced customizations."
}
]
}
]
}
{% endschema %}
This is an accepted solution.
Hi, @pjcasgui
In snippets/header-secondary-area.liquid line you can add this code after this line
<a class="thb-secondary-area-item thb-secondary-cart" href="{{ routes.cart_url }}" id="cart-drawer-toggle"><div class="thb-secondary-item-icon">{%- render 'svg-icons' with 'cart' %} <span class="thb-item-count">{%- if cart.item_count > 99 -%}{%- render 'svg-icons' with 'thb-asterisk' -%}{%- else -%}{{ cart.item_count }}{%- endif -%}</span></div></a>
This is an accepted solution.
@pjcasgui
You can use this css it will optimize the icon like the image
.thb-header-right {
position: relative;
}
.thb-header-right .social-links {
position: absolute;
top: 42px;
right: 0;
display: flex;
gap: 15px;
}
.thb-header-right .social-links li {
margin-bottom: 0;
line-height: 0;
padding: 5px;
}
.thb-header-right .social-links li a {
height: 0;
display: contents;
}
.thb-header-right .social-links span {
display: none;
}
,
I hope you find this useful. If it meets your needs, please consider liking and marking it as the accepted solution.
Kind regards,
Arif from ShopiDevs
This is an accepted solution.
Hi, Extremly sorry, not checked that your theme used app.css you can insert at the end of the file or at the end of theme.liquid file
<style>
.thb-header-right {
position: relative;
}
.thb-header-right .social-links {
position: absolute;
top: 42px;
right: 0;
display: flex;
gap: 15px;
}
.thb-header-right .social-links li {
margin-bottom: 0;
line-height: 0;
padding: 5px;
}
.thb-header-right .social-links li a {
height: 0;
display: contents;
}
.thb-header-right .social-links span {
display: none;
}
</style>
Thank you
This is an accepted solution.
hi, @pjcasgui
Use this css
<style>
.header.transparent--true:not(:hover):not(.is-sticky) .social-links li a svg path{
color: #da0707 !important;
stroke: red;
fill: red;
}
</style>
You can change the color which you need, I have set red. Now when hover it show correct one and new CSS will change CSS for transparent header.
Hope this issue will work for you.
Thank you
This is an accepted solution.
Hi,
Use this css it will hide in mobile.
@media all and (max-width: 479px) {
.header.social-links{
display:none;
}
}
If the issus is solved like and click as solution the post. 🙂
Thank you
Hi @pjcasgui
Which theme are you using? In your header file, you can search for the CSS class thb-secondary-area thb-header-right, which is for the top area. Then, you can add the social links that you inserted in the footer. This needs to be done through your theme coding. Since this is not a default Shopify theme, we are unable to provide the correct code for it.
Thank you.
Hi, I'm using Reformation Theme.
Hi, @pjcasgui
If possible you can share the header.liquide and footer.liquid file then we can check and told you what to put. We do not have this theme. It may be Premium theme.
Can. you check again? no file is attached
This is an accepted solution.
Oh, that's odd. Sorry. Apparently (.rtf) files aren't supported. I'll just paste them here.
theme.liquid
<!doctype html>
{%- capture dir -%}
{%- case request.locale.iso_code -%}
{%- when 'ae' or 'ar' or 'arc' or 'bcc' or 'bqi' or 'ckb' or 'dv' or 'fa' or 'glk' or 'ha' or 'he' or 'kwh' or 'ks' or 'ku' or 'mzn' or 'nqo' or 'pnb' or 'ps' or 'sd' or 'ug' or 'ur' or 'yi' -%}
rtl
{%- else -%}
ltr
{%- endcase -%}
{%- endcapture -%}
<html class="no-js" lang="{{ request.locale.iso_code }}" dir="{{ dir }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">
<meta name="theme-color" content="{{ settings.color_body_bg }}">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
{% render 'head-preload' %}
{% if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif %}
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
{%- unless settings.heading_font.system? and settings.body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}
{% render 'social-meta-tags' %}
{{ 'app.css' | asset_url | stylesheet_tag }}
{% render 'head-variables' %}
<script>
window.theme = window.theme || {};
theme = {
settings: {
money_with_currency_format: {{- shop.money_format | json -}},
cart_drawer: {{- settings.cart_drawer -}},
product_id: {% if product %}{{ product.id }}{% else %}false{% endif %},
},
routes: {
root_url: '{{ routes.root_url }}',
cart_url: '{{ routes.cart_url }}',
cart_add_url: '{{ routes.cart_add_url }}',
search_url: '{{ routes.search_url }}',
cart_change_url: '{{ routes.cart_change_url }}',
cart_update_url: '{{ routes.cart_update_url }}',
predictive_search_url: '{{ routes.predictive_search_url }}',
},
variantStrings: {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
preOrder: `{{ 'products.product.pre_order' | t }}`,
},
strings: {
requiresTerms: `{{ 'sections.cart.terms_confirm' | t }}`,
shippingEstimatorNoResults: `{{ 'sections.cart.shipping_estimator.no_results' | t }}`,
shippingEstimatorOneResult: `{{ 'sections.cart.shipping_estimator.one_result' | t }}`,
shippingEstimatorMultipleResults: `{{ 'sections.cart.shipping_estimator.multiple_results' | t }}`,
shippingEstimatorError: `{{ 'sections.cart.shipping_estimator.error' | t }}`
}
};
</script>
{{ content_for_header }} <!-- Header hook for plugins -->
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
</head>
<body class="animations-{{ settings.animations }} button-uppercase-{{ settings.button_uppercase }} navigation-uppercase-{{ settings.navigation_uppercase }} product-title-uppercase-{{ settings.product_title_uppercase }}{% if customer %} customer-logged-in{% endif %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}">
<a class="screen-reader-shortcut" href="#main-content">{{ 'accessibility.skip_to_text' | t }}</a>
<div id="wrapper">
{% sections 'header-group' %}
<div role="main" id="main-content">
{{ content_for_layout }}
</div>
{% sections 'footer-group' %}
{% render 'cart-drawer' %}
{% render 'product-drawer' %}
{% render 'search-drawer' %}
<div class="click-capture"></div>
</div>
{{ 'vendor.min.js' | asset_url | script_tag }}
{% if settings.animations %}
{{ 'animations.min.js' | asset_url | script_tag }}
<script>
gsap.defaults({
ease: Power4.easeOut
});
gsap.config({
nullTargetWarn: false
});
gsap.registerPlugin(ScrollTrigger);
</script>
{% endif %}
{% if settings.enable_quick_view or settings.enable_quick_add %}
{{ 'product.js' | asset_url | script_tag }}
{% endif %}
{{ 'slideshow.js' | asset_url | script_tag }}
{{ 'app.js' | asset_url | script_tag }}
<script type="module" src="{{ 'scroll-shadow.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- if request.design_mode -%}
{{ 'theme-editor.js' | asset_url | script_tag }}
{%- endif -%}
{%- if settings.cart_recommendations -%}
<script src="{{ 'product-recommendations.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{% render 'back-to-top' %}
<style>
h1.collection-banner--title {
display: none !important;
}
</style>
</body>
</html>
______
footer.liquid
{% liquid
assign full_width = section.settings.full_width
assign copyright_text = section.settings.copyright_text
assign show_language_switcher = section.settings.show_language_switcher
assign show_currency_switcher = section.settings.show_currency_switcher
assign show_payment_icons = section.settings.show_payment_icons
%}
<link rel="stylesheet" href="{{ 'footer.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'footer.css' | asset_url | stylesheet_tag }}</noscript>
<footer class="footer" id="footer">
<div class="row {% if full_width %}full-width-row{% endif %}">
{%- for block in section.blocks -%}
{% if block.type == 'text' %}
{%- liquid
assign column_class = 'small-12 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--text">
{%- if block.settings.title != blank -%}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{%- endif -%}
{%- if block.settings.image != blank -%}
{% assign image = block.settings.image %}
{% assign master_width = image.src.width | append: 'x' | append: image.src.height %}
{%- render 'responsive-image', image: image, sizes: master_width, retina: 1, priority: 'low' -%}
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte text-size--{{ block.settings.text_size }}">
{{ block.settings.text }}
</div>
{%- endif -%}
{%- if block.settings.button_text != blank -%}
<a class="text-button" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">{{ block.settings.button_text }}</a>
{%- endif -%}
{%- if block.settings.show_social_links -%}
{%- render 'social-links' -%}
{%- endif -%}
</div>
</div>
{% endif %}
{%- if block.type == 'menu' -%}
{%- liquid
assign column_class = 'small-12 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns widget--menu-column" {{ block.shopify_attributes }}>
<div class="widget widget--menu">
<button class="thb-widget-title collapsible" tabindex="0">{{ block.settings.title }} <span></span></button>
{%- if block.settings.menu != blank -%}
<ul class="thb-widget-menu">
{% for link in block.settings.menu.links %}
{% assign has_sub_menu = false %}
{% if link.links.size > 0 %}
{% assign has_sub_menu = true %}
{% endif %}
<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if link.active %} active{% endif %}">
<a href="{{ link.url }}" title="{{ link.title | escape }}"{%- if link.active %} aria-current="page"{% endif -%}>{{ link.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}
{% if has_sub_menu %}
<ul class="sub-menu" tabindex="-1">
{% for l in link.links %}
{% assign has_sub_menu = false %}
{% if l.links.size > 0 %}
{% assign has_sub_menu = true %}
{% endif %}
<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if l.active %} active{% endif %}" role="none">
<a href="{{ l.url }}" title="{{ l.title | escape }}" role="menuitem">{{ l.title }}</a>{% if has_sub_menu %}<span class="thb-arrow" tabindex="0">{%- render 'svg-icons' with 'thb-dropdown-bottom' -%}</span>{% endif %}
{% if has_sub_menu %}
<ul class="sub-menu" role="menu">
{% for sub_link in l.links %}
{% assign has_sub_menu = false %}
{% if sub_link.links.size > 0 %}
{% assign has_sub_menu = true %}
{% endif %}
<li class="{% if has_sub_menu %}menu-item-has-children{% endif %}{% if sub_link.active %} active{% endif %}" role="none">
<a href="{{ sub_link.url }}" title="{{ sub_link.title | escape }}" role="menuitem">{{ sub_link.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- if block.type == 'signup' -%}
{%- liquid
assign column_class = 'small-12 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--signup">
{% if block.settings.title != blank %}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% render 'email-signup-form' %}
</div>
</div>
{%- endif -%}
{%- if block.type == 'social' -%}
{%- liquid
assign column_class = 'small-6 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--social">
{% if block.settings.title != blank %}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{% endif %}
{% render 'social-links' %}
</div>
</div>
{%- endif -%}
{%- if block.type == 'custom_liquid' -%}
{%- liquid
assign column_class = 'small-6 medium-4 large-2'
case block.settings.column_size
when 'medium'
assign column_class = 'small-12 medium-3'
when 'large'
assign column_class = 'small-12 medium-6'
endcase
-%}
<div class="{{ column_class | escape }} columns" {{ block.shopify_attributes }}>
<div class="widget widget--custom">
{% if block.settings.title != blank %}
<div class="thb-widget-title">{{ block.settings.title }}</div>
{% endif %}
{{ block.settings.custom_liquid }}
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
<div class="sub-footer">
<div class="row {% if full_width %}full-width-row{% endif %}">
<div class="small-12 medium-8 columns">
{% render 'localization', id: 'FooterLocalization', show_language_switcher: show_language_switcher, show_currency_switcher: show_currency_switcher %}
</div>
<div class="small-12 medium-4 columns">
{%- if show_payment_icons -%}
<div class="footer-payment-icons">
{%- unless shop.enabled_payment_types == empty -%}
{%- for type in shop.enabled_payment_types -%}
<figure>{{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}</figure>
{%- endfor -%}
{%- endunless -%}
</div>
{%- endif -%}
</div>
<div class="small-12 columns">
<p>© {{ 'now' | date: "%Y" }} {{ shop.name }}, {{ copyright_text }} {{ powered_by_link }}</p>
{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
<div class="footer--follow-on-shop">
{{ shop | login_button: action: 'follow' }}
</div>
{%- endif -%}
</div>
</div>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"class": "section-footer",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "Make section full width"
},
{
"type": "text",
"id": "copyright_text",
"label": "Additional copyright text",
"default": "All rights reserved."
},
{
"type": "checkbox",
"id": "show_language_switcher",
"label": "Enable language switcher",
"default": true,
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show_currency_switcher",
"label": "Enable currency switcher",
"default": true,
"info": "To add a country/region, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons",
"default": true,
"info": "By default your theme shows the icons that are associated with the payment gateway you have enabled in the [payment settings](/admin/settings/payments)."
},
{
"type": "header",
"content": "Follow on Shop",
"info": "To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop)"
},
{
"type": "checkbox",
"id": "enable_follow_on_shop",
"default": true,
"label": "Enable Follow on Shop"
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "240 x 100 px .png recommended."
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add company info here.</p>"
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"id": "button_text",
"type": "text",
"label": "Button label",
"default": "Explore",
"info": "Leave the label blank to hide the button."
},
{
"id": "button_link",
"type": "url",
"label": "Button link"
},
{
"type": "checkbox",
"id": "show_social_links",
"label": "Show social links",
"default": true
}
]
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "Menu",
"info": "Select navigation to display"
}
]
},
{
"type": "social",
"name": "Social links",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
},
{
"type": "signup",
"name": "Email signup",
"limit": 1,
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add a text to attract more customers to <strong>sign up!</strong></p>"
}
]
},
{
"type": "custom_liquid",
"name": "Custom liquid",
"settings": [
{
"type": "select",
"id": "column_size",
"label": "Column size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "small"
},
{
"id": "title",
"type": "text",
"label": "Title"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom liquid",
"info": "Add app snippets or other Liquid code to create advanced customizations."
}
]
}
]
}
{% endschema %}
Oh, that's odd. Apparently (.rtf) files aren't supported. I tried pasting the code, but it didn't go through either.
I've added them to a Google Docs file, please let me know if you're able to view:
https://docs.google.com/document/d/e/2PACX-1vSr8lUq5mvMYbMtROudLS5iluIcnTJss8O_vtS7tLNhpZyyJiXwrFdYh...
Thank you for the file but unfortunatly the code is not exits their. Are you able to find from your theme file. Or you can send me the theme file from top personal message. I can find that for you if you want.
Oh no. Okay, I uploaded the files to a WeTransfer link: https://we.tl/t-QFeh1p4MZV
Let me know if you can access them fine.
Thank you
Thank you but here is no header code.
Sorry for the confusion. I figured out how to download the theme file and uploaded via WeTransfer: ///////
Fingers crossed.
My download is complete, please remove the link, so that , this premium theme can't download by all. Which. may financially lose the theme author.
I will update you soon.
thank you
This is an accepted solution.
Hi, @pjcasgui
In snippets/header-secondary-area.liquid line you can add this code after this line
<a class="thb-secondary-area-item thb-secondary-cart" href="{{ routes.cart_url }}" id="cart-drawer-toggle"><div class="thb-secondary-item-icon">{%- render 'svg-icons' with 'cart' %} <span class="thb-item-count">{%- if cart.item_count > 99 -%}{%- render 'svg-icons' with 'thb-asterisk' -%}{%- else -%}{{ cart.item_count }}{%- endif -%}</span></div></a>
This is an accepted solution.
@pjcasgui
You can use this css it will optimize the icon like the image
.thb-header-right {
position: relative;
}
.thb-header-right .social-links {
position: absolute;
top: 42px;
right: 0;
display: flex;
gap: 15px;
}
.thb-header-right .social-links li {
margin-bottom: 0;
line-height: 0;
padding: 5px;
}
.thb-header-right .social-links li a {
height: 0;
display: contents;
}
.thb-header-right .social-links span {
display: none;
}
,
I hope you find this useful. If it meets your needs, please consider liking and marking it as the accepted solution.
Kind regards,
Arif from ShopiDevs
Thank you Arif, where do I place this css?
Right now it's appearing like this, when the background is white:
And it stays black, when the background scrolls up:
Will the provided css take into account changing the color to white when the white bg is not present?
Thank you.
Put this css in base.css file in your theme .
1. navigate your theme from Online Store
Thank you
Arif, thank you for all your help so far. Since you downloaded the theme file, could you tell me which specific css to look for since "base.css" is not one of the options.
This is an accepted solution.
Hi, Extremly sorry, not checked that your theme used app.css you can insert at the end of the file or at the end of theme.liquid file
<style>
.thb-header-right {
position: relative;
}
.thb-header-right .social-links {
position: absolute;
top: 42px;
right: 0;
display: flex;
gap: 15px;
}
.thb-header-right .social-links li {
margin-bottom: 0;
line-height: 0;
padding: 5px;
}
.thb-header-right .social-links li a {
height: 0;
display: contents;
}
.thb-header-right .social-links span {
display: none;
}
</style>
Thank you
Is there any way to invert the color of the icons when the white background is not present? It doesn't look good when the white background isn't present:
This is an accepted solution.
hi, @pjcasgui
Use this css
<style>
.header.transparent--true:not(:hover):not(.is-sticky) .social-links li a svg path{
color: #da0707 !important;
stroke: red;
fill: red;
}
</style>
You can change the color which you need, I have set red. Now when hover it show correct one and new CSS will change CSS for transparent header.
Hope this issue will work for you.
Thank you
So far so good Arif! One last question, how do I disable the social media icons from showing on the mobile devices?
This is an accepted solution.
Hi,
Use this css it will hide in mobile.
@media all and (max-width: 479px) {
.header.social-links{
display:none;
}
}
If the issus is solved like and click as solution the post. 🙂
Thank you
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024