Solved

Call to action in header - Blockshop theme

peter550
Explorer
76 1 36

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 

 

Screenshot 2021-10-21 at 17.25.37.png

 

 

 

 

 

 

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@peter550 

yes header customization i will 

also klaviyo provide seprete form doesn't link to shopifu sign up from sorry 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36839 3635 11972

@peter550 

sorry for that issue 

can you please share header code so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

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? 

 

KetanKumar
Shopify Partner
36839 3635 11972

@peter550 

you have just go to edit code >>>> Section >>>> header 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

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! 

 

Screenshot 2021-10-22 at 17.02.34.png

 

 

 

 

{%- 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 %}

KetanKumar
Shopify Partner
36839 3635 11972

@peter550 

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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

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

KetanKumar
Shopify Partner
36839 3635 11972

@peter550 

yes its customization to all code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

Hi Kentan, 

 

Can you do this customisation? 

Or is there a way for a shopify sign up form to link to a klaviyo list? 

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@peter550 

yes header customization i will 

also klaviyo provide seprete form doesn't link to shopifu sign up from sorry 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
peter550
Explorer
76 1 36

thats amazing! Shall I wait for you to send the code for the header customisation? 

 

Thank you for all your help

peter550
Explorer
76 1 36

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!

 

Screenshot 2021-10-21 at 17.25.37.png

KetanKumar
Shopify Partner
36839 3635 11972

@peter550 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing