Button on header

Store Design
,
1

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!

2

Hey @PRETTYFRIDAYS

Can you share your Store URL and Password if enabled?

Best,
Moeed

3

Hi @PRETTYFRIDAYS

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

scrnli_lKRaXElJ3q7F7C
scrnli_lKRaXElJ3q7F7C2050×1297 315 KB

4

Hi @PRETTYFRIDAYS

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 :laptop: