Shopify themes, liquid, logos, and UX
I am trying to add a CTA button in the top right hand corner of my header menu, like in the image below. Its a link to a PDF customers can download for free
Any help would be much appreciated. I am using blockshop theme, and the code is test to https://laz-the-plant-scientist.myshopify.com/
Pete
Solved! Go to the solution
This is an accepted solution.
yes header customization i will
also klaviyo provide seprete form doesn't link to shopifu sign up from sorry
sorry for that issue
can you please share header code so i will check and update
hi there,
Thanks for your reply!
I dont have the header code? where would I find it? Its not custom its just the header which came with the blockshop theme?
you have just go to edit code >>>> Section >>>> header
ah. Here is the header.liquid code
I would also really like to make it so it matches this old site - so, instagram link in header, logo centre with menu items to the left but centred to logo, login button and shop cart + the CTA button in this colour scheme in the same font. Any help would be much appreciated!
{%- liquid
assign locale_label_t = 'general.language.dropdown_label' | t
assign currency_label_t = 'general.currency.dropdown_label' | t
assign search_t = 'layout.header.search' | t
assign account_t = 'layout.header.account' | t
assign cart_icon = section.settings.cart--icon
assign logo_image = section.settings.logo
assign logo_alt = section.settings.logo.alt
assign logo_height = section.settings.logo-height
assign logo_center = section.settings.header-logo-center
assign menu_center = section.settings.header-menu-center
assign menu = section.settings.menu
assign transparent_menu = section.settings.transparent-menu
assign locale_enable = false
assign currency_enable = false
if section.settings.show-currency-selector and shop.enabled_currencies.size > 1
assign currency_enable = true
endif
if section.settings.show-locale-selector and shop.published_locales.size > 1
assign locale_enable = true
endif
-%}
<header
class="header--root"
data-section-id="{{ section.id }}"
data-section-type="header-section"
data-js-class="Header"
data-center-logo="{{ logo_center }}"
data-center-menu="{{ menu_center }}"
{% if request.page_type == 'index' and transparent_menu %}
data-header-menu-transparent="true"
{% else %}
data-header-menu-transparent="false"
{% endif %}
>
<div class="header--y-menu-for-off-canvas" style="display:none;">
{% render 'framework--y-menu', handle: menu %}
</div>
{% if locale_enable or currency_enable %}
<div class="header--localization-for-off-canvas" style="display:none;">
{% form 'localization', id: 'mobile-localization' %}
{% if locale_enable %}
{%- capture locale_values -%}
{%- for locale in form.available_locales -%}
{{ locale.iso_code }},
{%- endfor -%}
{%- endcapture -%}
{% assign locale_values = locale_values | split: "," %}
{%- capture locale_names -%}
{%- for locale in form.available_locales -%}
{{ locale.endonym_name }},
{%- endfor -%}
{%- endcapture -%}
{% assign locale_names = locale_names | split: "," %}
{%
render 'framework--disclosure',
label_name: locale_label_t,
option_names: locale_names,
option_values: locale_values,
current_value: form.current_locale.iso_code,
id: 'mobile-locale',
input_name: 'locale_code',
type: 'localization'
%}
{% endif %}
{% if currency_enable %}
{%- capture currency_values -%}
{%- for currency in form.available_currencies -%}
{{ currency.iso_code }},
{%- endfor -%}
{%- endcapture -%}
{% assign currency_values = currency_values | split: "," %}
{%- capture currency_names -%}
{%- for currency in form.available_currencies -%}
{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%},
{%- endfor -%}
{%- endcapture -%}
{% assign currency_names = currency_names | split: "," %}
{%
render 'framework--disclosure',
label_name: currency_label_t,
option_names: currency_names,
option_values: currency_values,
current_value: form.current_currency.iso_code,
id: 'mobile-currency',
input_name: 'currency_code',
type: 'localization'
%}
{% endif %}
{% endform %}
</div>
{% endif %}
<div class="header--top-row">
{% if locale_enable or currency_enable %}
<div class="header--localization">
{% form 'localization', id: 'header-localization' %}
{% if locale_enable %}
{%- capture locale_values -%}
{%- for locale in form.available_locales -%}
{{ locale.iso_code }},
{%- endfor -%}
{%- endcapture -%}
{% assign locale_values = locale_values | split: "," %}
{%- capture locale_names -%}
{%- for locale in form.available_locales -%}
{{ locale.endonym_name }},
{%- endfor -%}
{%- endcapture -%}
{% assign locale_names = locale_names | split: "," %}
{%
render 'framework--disclosure',
label_name: locale_label_t,
option_names: locale_names,
option_values: locale_values,
current_value: form.current_locale.iso_code,
id: 'header-locale',
input_name: 'locale_code',
type: 'localization'
%}
{% endif %}
{% if currency_enable %}
{%- capture currency_values -%}
{%- for currency in form.available_currencies -%}
{{ currency.iso_code }},
{%- endfor -%}
{%- endcapture -%}
{% assign currency_values = currency_values | split: "," %}
{%- capture currency_names -%}
{%- for currency in form.available_currencies -%}
{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%},
{%- endfor -%}
{%- endcapture -%}
{% assign currency_names = currency_names | split: "," %}
{%
render 'framework--disclosure',
label_name: currency_label_t,
option_names: currency_names,
option_values: currency_values,
current_value: form.current_currency.iso_code,
id: 'header-currency',
input_name: 'currency_code',
type: 'localization'
%}
{% endif %}
{% endform %}
</div>
{% endif %}
{% if request.page_type == 'index' %}
<h1 class="header--logo">
{%
render 'snippet-store-title',
logo_image: logo_image,
logo_height: logo_height,
logo_alt: logo_alt
%}
</h1>
{% else %}
<div class="header--logo">
{%
render 'snippet-store-title',
logo_image: logo_image,
logo_height: logo_height,
logo_alt: logo_alt
%}
</div>
{% endif %}
{% if settings.search--show-in-header %}
<a
class="header--search"
href="{{ routes.search_url }}"
role="img"
aria-label="{{ search_t }}"
>
{% render 'framework--icons', icon: 'search' %}
</a>
{% endif %}
{% if section.settings.header-account-show and shop.customer_accounts_enabled %}
<a
class="header--account-icon"
{% if customer %}
href="{{ routes.account_url }}"
{% else %}
href="{{ routes.account_login_url }}"
{% endif %}
aria-label="{{ account_t }}"
>
{% render 'framework--icons', icon: 'account' %}
</a>
{% endif %}
</div>
<div class="header--bottom-row">
{% if linklists[menu].links.size > 0 %}
{% assign menu_alignment = 'left' %}
{% if menu_center %}
{% assign menu_alignment = 'center' %}
{% endif %}
<div class="header--menu">
{%
render 'framework--x-menu',
js_class: 'XMenu',
align: menu_alignment,
overlap_parent: 1,
handle: menu
%}
</div>
{% endif %}
<div class="header--cart">
{% render 'snippet-cart', cart_icon: cart_icon %}
</div>
</div>
<div class="header--mobile">
<div class="header--mobile--menu">
<div
tabindex="0"
data-off-canvas--open="left-sidebar"
aria-haspopup="menu"
>
{% render 'framework--icons', icon: 'menu' %}
</div>
</div>
<div class="header--mobile--title">
{%
render 'snippet-store-title',
logo_image: logo_image,
logo_height: logo_height,
logo_alt: logo_alt
%}
</div>
<div class="header--mobile--cart" data-item="accent-text">
{% render 'snippet-cart', cart_icon: cart_icon %}
</div>
</div>
</header>
{% if logo_image %}
<style>
header .logo-image {
max-height: {{ logo_height }}px;
}
.header--top-row {
height: {{ logo_height | plus: 16 }}px;
}
</style>
{% endif %}
{% schema %}
{
"name": "Header",
"class": "section--header",
"settings": [
{
"type": "checkbox",
"id": "transparent-menu",
"label": "Transparent on home page",
"info": "Only recommended with a full width image in top section"
},
{
"type": "checkbox",
"id": "header-account-show",
"label": "Enable customer account links",
"default": true,
"info": "[You will also need to enable customer accounts in your store settings](https:\/\/docs.shopify.com\/manual\/your-store\/customers\/customer-accounts)"
},
{
"type": "select",
"id": "cart--icon",
"label": "Cart icon",
"options": [
{ "label": "Text", "value": "text" },
{ "label": "Bag", "value": "bag" },
{ "label": "Cart", "value": "cart" }
],
"default": "text"
},
{
"type": "header",
"content": "Menu"
},
{
"type": "checkbox",
"id": "header-menu-center",
"label": "Center align"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "header",
"content": "Currency Selector",
"info": "To add a currency, go to your [payment settings](/admin/settings/payments)."
},
{
"type": "checkbox",
"id": "show-currency-selector",
"label": "Show currency selector",
"default": true
},
{
"type": "paragraph",
"content": "To offer multiple currencies on your online store, you must first [edit your store's currency formatting](https://docs.shopify.com/support/settings/general/tell-my-script-where-to-find-money-formats)."
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings](/admin/settings/languages)."
},
{
"type": "checkbox",
"id": "show-locale-selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Logo"
},
{
"type": "checkbox",
"id": "header-logo-center",
"label": "Center align"
},
{
"type": "image_picker",
"id": "logo",
"label": "Image",
"info": "1600 x 200px max"
},
{
"label": "Image Height",
"id": "logo-height",
"type": "range",
"min": 15,
"max": 100,
"step": 5,
"default": 50,
"info": "This is referring to the natural height and should be half the height of the image you uploaded to ensure it stays sharp on retina screens."
}
]
}
{% endschema %}
thanks for code
i have checked but its not possible simple html code it can be done some customization html and css code if you need let me know
Hi!
If it is possible I would love to know how to do it! Thank you 🙂
You will need to guide me as I am not the best at this stuff
pete
yes its customization to all code
Hi Kentan,
Can you do this customisation?
Or is there a way for a shopify sign up form to link to a klaviyo list?
This is an accepted solution.
yes header customization i will
also klaviyo provide seprete form doesn't link to shopifu sign up from sorry
thats amazing! Shall I wait for you to send the code for the header customisation?
Thank you for all your help
ideally i would love the header to look like this
so, the menu navigation to the left and centred to the logo, and the instagram, cart, CTA and login to the right and centred to the logo. Any help would be wonderfull!
as per your header customizatrion
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
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