How can I add a 'shop now' button to my header navigation?

Store Design
,
1

Hi,

Can you please help me. I’m trying to make ‘shop now’ in my header navigation into a button that will sit on the right side of the header beside the icons.

I’m using the vision theme - https://sacred-and-wild.myshopify.com/?_ab=0&_fd=0&_sc=1&key=9ba91b8513d8b768883f12927d9f8c163d51976eb7aadd5ab2f57e89b5399d5c&preview_theme_id=151519920415

2

@luciaogrady - single navigation item can not be taken to the right side, if you want new button then will need to edit header.liquid file, are you familiar with the coding?

3

Yes, I am! Just not overly proficient in it, so some guidance would be amazing. Thanks Suyash

4

@luciaogrady - then you can go to header.liquid file and then you can html code for shop now button in the place where you want this button… once you add the button we can use the css to make it look better…

1] make sure that you put some unique id or class for this button, so css can be added and

2] make sure you put this button in a place where it work on mobile as well

5

Could you help me with the html code needed?

6

@luciaogrady - try this… replace # with the page link where you want to take the user after clicking on shop now

Shop Now
7

Thank you. Does it matter where I place this within header.liquid?

8

@luciaogrady - yes, will show up at the place where you add it

9

I’m not quite sure where to put it - perhaps it’s too complicated for me

10

@luciaogrady - I can try if you can accept as collab

11

Yes that would be great. How do I do that?

12

I sent you the request

13

If I also send you the code within header.liquid could you pin point where it needs to go? Or is that too difficult?

{%- liquid
assign style = section.settings.style
assign sticky_header = section.settings.sticky_header
assign transparent_header = false
assign logo_height_range = section.settings.logo_height_range
assign logo_height_range_mobile = section.settings.logo_height_range_mobile
assign header_shadow = section.settings.header_shadow

if template == ‘index’
assign transparent_header = section.settings.transparent_header
endif
-%}

{%- case style -%} {%- when 'style1' -%} {% render 'header-style1', blocks: section.blocks, header_settings: section.settings %} {%- when 'style2' -%} {% render 'header-style2', blocks: section.blocks, header_settings: section.settings %} {%- when 'style3' -%} {% render 'header-style3', blocks: section.blocks, header_settings: section.settings %} {%- when 'style4' -%} {% render 'header-style4', blocks: section.blocks, header_settings: section.settings %} {%- when 'style5' -%} {% render 'header-style5', blocks: section.blocks, header_settings: section.settings %} {%- endcase -%}
{%- style -%} :root { --logo-height: {{ logo_height_range | append: 'px' }}; --logo-height-mobile: {{ logo_height_range_mobile | append: 'px' }}; } {% unless sticky_header %} .header-section { position: static !important; } {%- endunless -%} {%- endstyle -%} {{- 'header.js' | asset_url | script_tag -}}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}
{% schema %}

{
“name”: “Header”,
“class”: “header-section”,
“settings”: [
{
“type”: “checkbox”,
“id”: “sticky_header”,
“label”: “Enable sticky header”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”,
“info”: “400 x 68 px .png recommended.”
},
{
“type”: “range”,
“id”: “logo_height_range”,
“min”: 20,
“max”: 120,
“step”: 1,
“unit”: “px”,
“label”: “Logo height”,
“default”: 30
},
{
“type”: “range”,
“id”: “logo_height_range_mobile”,
“min”: 20,
“max”: 80,
“step”: 1,
“unit”: “px”,
“label”: “Mobile logo height”,
“default”: 30
},
{
“type”: “select”,
“id”: “style”,
“label”: “Desktop logo position”,
“default”: “style5”,
“options”: [
{ “value”: “style1”, “label”: “Logo left, menu center” },
{ “value”: “style2”, “label”: “Logo left, menu left” },
{ “value”: “style3”, “label”: “Logo center, menu left” },
{ “value”: “style4”, “label”: “Logo center, menu below” },

{ “value”: “style5”, “label”: “Logo left, menu below” }
],
“info”: “Position is always center for mobile.”
},
{
“type”: “select”,
“id”: “header_shadow”,
“label”: “Sticky header shadow”,
“default”: “header–shadow-small”,
“options”: [
{ “value”: “header–shadow-none”, “label”: “None” },
{ “value”: “header–shadow-small”, “label”: “Small” },
{ “value”: “header–shadow-medium”, “label”: “Medium” },
{ “value”: “header–shadow-large”, “label”: “Large” }
]
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “Menu”,
“info”: “Learn how to set up mega menus.”
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “transparent_header”,
“label”: “Enable on homepage”,
“default”: true,
“info”: “Ensure that you have a Slideshow, Video background, Image with text overlay section as the first section on your homepage.”
},
{
“type”: “image_picker”,
“id”: “logo_light”,
“label”: “Logo image”,
“info”: “Displayed when transparent header is enabled. Uses the dimensions set on your main logo.”
},
{
“type”: “header”,
“content”: “Mobile menu”
},
{
“type”: “link_list”,
“id”: “mobile_secondary_menu”,
“label”: “Secondary menu”,
“info”: “Secondary menu is shown under the main menu.”
},
{
“type”: “checkbox”,
“id”: “show_social_links”,
“label”: “Show social links”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_language_switcher”,
“label”: “Enable language switcher”,
“default”: false,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_currency_switcher”,
“label”: “Enable currency switcher”,
“default”: true,
“info”: “To add a country/region, go to your payment settings.”
}
],
“blocks”: [
{
“type”: “megamenu”,
“name”: “Mega menu”,
“limit”: 10,
“settings”: [
{
“type”: “select”,
“id”: “position”,
“label”: “Link position in main menu”,
“default”: “1”,
“options”: [
{
“value”: “1”,
“label”: “Item 1”
},
{
“value”: “2”,
“label”: “Item 2”
},
{
“value”: “3”,
“label”: “Item 3”
},
{
“value”: “4”,
“label”: “Item 4”
},
{
“value”: “5”,
“label”: “Item 5”
},
{
“value”: “6”,
“label”: “Item 6”
},
{
“value”: “7”,
“label”: “Item 7”
},
{
“value”: “8”,
“label”: “Item 8”
},
{
“value”: “9”,
“label”: “Item 9”
},
{
“value”: “10”,
“label”: “Item 10”
}
]
},
{
“type”: “header”,
“content”: “Promotion 1”
},
{
“type”: “image_picker”,
“id”: “promo_1_image”,
“label”: “Image”,
“info”: “360 x 420 px .jpg recommended.”
},
{
“type”: “text”,
“id”: “promo_1_heading”,
“default”: “Promotion heading”,
“label”: “Heading”
},
{
“type”: “textarea”,
“id”: “promo_1_content”,
“label”: “Promotion content”
},
{
“type”: “url”,
“id”: “promo_1_link”,
“label”: “Promotion link”
},
{
“type”: “header”,
“content”: “Promotion 2”
},
{
“type”: “image_picker”,
“id”: “promo_2_image”,
“label”: “Image”,
“info”: “360 x 420 px .jpg recommended.”
},
{
“type”: “text”,
“id”: “promo_2_heading”,
“default”: “Promotion heading”,
“label”: “Heading”
},
{
“type”: “textarea”,
“id”: “promo_2_content”,
“label”: “Promotion content”
},
{
“type”: “url”,
“id”: “promo_2_link”,
“label”: “Promotion link”
},
{
“type”: “header”,
“content”: “Promotion 3”
},
{
“type”: “image_picker”,
“id”: “promo_3_image”,
“label”: “Image”,
“info”: “360 x 420 px .jpg recommended.”
},
{
“type”: “text”,
“id”: “promo_3_heading”,
“default”: “Promotion heading”,
“label”: “Heading”
},
{
“type”: “textarea”,
“id”: “promo_3_content”,
“label”: “Promotion content”
},
{
“type”: “url”,
“id”: “promo_3_link”,
“label”: “Promotion link”
},
{
“type”: “header”,
“content”: “Promotion 4”
},
{
“type”: “image_picker”,
“id”: “promo_4_image”,
“label”: “Image”,
“info”: “360 x 420 px .jpg recommended.”
},
{
“type”: “text”,
“id”: “promo_4_heading”,
“default”: “Promotion heading”,
“label”: “Heading”
},
{
“type”: “textarea”,
“id”: “promo_4_content”,
“label”: “Promotion content”
},
{
“type”: “url”,
“id”: “promo_4_link”,
“label”: “Promotion link”
}
]
},
{
“type”: “menu_badge”,
“name”: “Menu badge”,
“settings”: [
{
“type”: “select”,
“id”: “badge_position”,
“label”: “Badge position in main menu”,
“default”: “1”,
“options”: [
{
“value”: “1”,
“label”: “Item 1”
},
{
“value”: “2”,
“label”: “Item 2”
},
{
“value”: “3”,
“label”: “Item 3”
},
{
“value”: “4”,
“label”: “Item 4”
},
{
“value”: “5”,
“label”: “Item 5”
},
{
“value”: “6”,
“label”: “Item 6”
},
{
“value”: “7”,
“label”: “Item 7”
},
{
“value”: “8”,
“label”: “Item 8”
},
{
“value”: “9”,
“label”: “Item 9”
},
{
“value”: “10”,
“label”: “Item 10”
}
]
},
{
“type”: “text”,
“id”: “text”,
“label”: “Text”
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “color_bg”,
“label”: “Background”,
“default”: “#D3ECE2”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Text”,
“default”: “#272422”
}
]
}
]
}
{% endschema %}

14

@luciaogrady - which which of the given 5 styles are you using, we need to edit that page

15

I believe it is style 3

16

@luciaogrady - need to edit that file

17

I can now see it showing in the header. Now we need to style it?

18

@luciaogrady - what background color do you want?

19

@luciaogrady - add this css to the very end of your app.css file and check

a.shop_now_button{background-color: #fff; text-align: center; padding: 5px; max-width: 200px; border-radius: 15px; margin-bottom: 10px;}