Hi guys, I just started my website and I would like to have a call to action button on the right side of my header that’s also visible for mobile. Does anybody have the code to do this? My theme is Pitch.
Massive thanks!
Topic summary
Request to add a call-to-action (CTA) button on the right side of the header that remains visible on mobile, specifically for the Pitch theme. The requester asked for code to implement this.
Latest development: A responder requested the store URL and storefront password (if enabled) to review and provide precise guidance.
Status: No solution or code provided yet; assistance is pending until store access details are shared.
Key points:
- Goal: Header-right CTA button with mobile visibility on a Pitch-themed store.
- Needed info: Store URL and password to proceed.
- No images, code snippets, or examples were included.
Next step: The original poster should share the store URL and password (if the storefront is password-protected) to enable targeted help. Discussion remains open and unresolved.
2 Likes
Try this, it needs changes in 2 files. First in header.liquid in your theme sections folder. Replace around line 62
capture actions
render 'header-actions'
endcapture
with
capture actions
render 'header-actions',show_cta: section.settings.show_header_cta,cta_label: section.settings.header_cta_label,cta_link: section.settings.header_cta_link,cta_open_in_new_tab: section.settings.header_cta_open_in_new_tab
endcapture
Next, in the same file, way to the bottom, after
{
"type": "header",
"content": "t:content.customer_account"
},
{
"type": "paragraph",
"content": "t:content.manage_customer_accounts"
},
add new code so it looks like:
{
"type": "header",
"content": "t:content.customer_account"
},
{
"type": "paragraph",
"content": "t:content.manage_customer_accounts"
},
{
"type": "header",
"content": "t:content.buttons"
},
{
"type": "checkbox",
"id": "show_header_cta",
"label": "t:settings.show",
"default": false
},
{
"type": "text",
"id": "header_cta_label",
"label": "t:settings.label",
"visible_if": "{{ section.settings.show_header_cta }}"
},
{
"type": "url",
"id": "header_cta_link",
"label": "t:settings.link",
"visible_if": "{{ section.settings.show_header_cta }}"
},
{
"type": "checkbox",
"id": "header_cta_open_in_new_tab",
"label": "t:settings.open_new_tab",
"default": false,
"visible_if": "{{ section.settings.show_header_cta }}"
},
The second file is header-actions.liquid and instead
<header-actions
{{- block.shopify_attributes -}}
>
New code is
{% liquid
assign show_cta = show_cta | default: false
assign cta_label = cta_label | default: '' | strip
assign cta_link = cta_link | default: blank
assign cta_open_in_new_tab = cta_open_in_new_tab | default: false
assign should_show_cta = false
if show_cta
if cta_label != blank
if cta_link != blank
assign should_show_cta = true
endif
endif
endif
%}
<header-actions
{{- block.shopify_attributes -}}
>
{% if should_show_cta %}
<a
href="{{ cta_link | escape }}"
class="button button--secondary header-actions__cta"
{% if cta_open_in_new_tab %}
target="_blank" rel="noopener"
{% endif %}
>
{{ cta_label | escape }}
</a>
{% endif %}
Save both files.
Now you should be able to add button text and a link in the header section settings, and it should look like this
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 