How can I add a 'SELL' button to my mobile header using liquid?

Store Design

Topic summary

A user needs help adding a “SELL” button to their mobile header on a Shopify store (label-source.co.uk).

Initial Request:

  • Shared their header.liquid code, which uses a conditional rendering system with three header styles (style1, style2, style3)
  • The code includes settings for logo height, transparent header options, and schema markup

Proposed Solution:

  • Another user provided CSS code to add to assets/app.css
  • The CSS targets mobile screens (max-width: 767px) and styles a secondary area item with class “thb-secondary-area-item”
  • Styling includes: black background (#000), white text (#fff), 20px height, 1.5em top margin, and 20px border radius
  • All properties use !important flags to ensure they override existing styles

Status: The solution has been provided but not yet confirmed as implemented or tested. The discussion appears to be a straightforward technical support request with a CSS-based fix.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Need to add a “SELL” button to my header on mobile.

URL: https://label-source.co.uk

header.liquid code below.

{%- liquid
assign style = section.settings.style
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 %} {%- endcase -%}
{% style %} :root { --logo-height: {{ logo_height_range | append: 'px' }}; --logo-height-mobile: {{ logo_height_range_mobile | append: 'px' }}; } {% endstyle %}

{% schema %}
{
“name”: “Header”,
“class”: “header-section”,
“settings”: [
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”,
“info”: “400 x 68 px .png recommended.”
},
{
“type”: “range”,
“id”: “logo_height_range”,
“min”: 20,
“max”: 80,
“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”: “style1”,
“options”: [
{ “value”: “style1”, “label”: “Logo left, menu center” },
{ “value”: “style2”, “label”: “Logo left, menu left” },
{ “value”: “style3”, “label”: “Logo center, menu left” }
],
“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”: “image_picker”,
“id”: “mobile_promo_image”,
“label”: “Promotion image”,
“info”: “375 x 370 px .jpg recommended.”
},
{
“type”: “text”,
“id”: “mobile_promo_heading”,
“default”: “Promotion heading”,
“label”: “Heading”
},
{
“type”: “text”,
“id”: “mobile_promo_link_label”,
“label”: “Promotion button label”,
“default”: “Shop”,
“info”: “Leave the label blank to hide the text button.”
},
{
“type”: “url”,
“id”: “mobile_promo_link”,
“label”: “Promotion button link”
},
{
“type”: “checkbox”,
“id”: “show_language_switcher”,
“label”: “Enable language switcher”,
“default”: true,
“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”: “text”,
“id”: “promo_1_link_label”,
“label”: “Button label”,
“default”: “Shop”,
“info”: “Leave the label blank to hide the text button.”
},
{
“type”: “url”,
“id”: “promo_1_link”,
“label”: “Button 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”: “text”,
“id”: “promo_2_link_label”,
“label”: “Button label”,
“default”: “Shop”,
“info”: “Leave the label blank to hide the text button.”
},
{
“type”: “url”,
“id”: “promo_2_link”,
“label”: “Button link”
}
]
}
]
}
{% endschema %}

2

@Danielparsons

Please add the following CSS code to your assets/app.css bottom of the file.

@media screen and (max-width: 767px){
a.thb-secondary-area-item.thb-secondary-sell {
    background: #000 !important;
    color: #fff !important;
    height: 20px !important;
    margin-top: 1.5em !important;
    border-radius: 20px !important;
}
}

Thanks!