HORIZON THEME SUGGESTION: Button Styles

Technical Q&A
1

Please add the option to choose different button styles for mobile and desktop in the horizon theme. Currently, you can only add one style at a time.

2

@3rdDay
Update Schema in section or settings_schema.json

Add two fields instead of one:

{
  "type": "select",
  "id": "button_style_desktop",
  "label": "Button style (Desktop)",
  "options": [
    { "value": "primary", "label": "Primary" },
    { "value": "secondary", "label": "Secondary" },
    { "value": "outline", "label": "Outline" }
  ],
  "default": "primary"
},
{
  "type": "select",
  "id": "button_style_mobile",
  "label": "Button style (Mobile)",
  "options": [
    { "value": "primary", "label": "Primary" },
    { "value": "secondary", "label": "Secondary" },
    { "value": "outline", "label": "Outline" }
  ],
  "default": "secondary"
}

Update Button Markup in Liquid (e.g. button.liquid or sections/*.liquid)

Instead of one class, output both styles but scope them with device breakpoints:

<a 
  href="{{ button_link }}" 
  class="btn 
    btn--{{ section.settings.button_style_desktop }}-desktop 
    btn--{{ section.settings.button_style_mobile }}-mobile">
  {{ button_label }}
</a>

Add CSS to Control Which Style Shows

Inside your theme CSS (e.g. theme.css):

/* Desktop buttons */
[class*="-desktop"] {
  display: inline-block;
}
[class*="-mobile"] {
  display: none;
}

@media screen and (max-width: 749px) {
  /* Swap for mobile */
  [class*="-desktop"] {
    display: none !important;
  }
  [class*="-mobile"] {
    display: inline-block !important;
  }
}

This way:

  • On desktop, the button_style_desktop option applies.

  • On mobile, the button_style_mobile option applies.

3

Thanks for your really detailed response.

I had a look and couldn’t see anything like these schema blocks anywhere. For example, the term ‘outline‘ doesn’t appear anywhere in the code. Unless I just add all this in rather than replacing anything similar.