Supply Theme Color Separation

New Member
5 0 0

Hi all,

 

I'm customizing the Supply theme, and I haven't been able to figure out a way to separate the cart button and search field in the Colors section. I want the search field to be white, but the cart button to match my other buttons. Is this possible with this theme?

 

Supply Colors.png

0 Likes
Shopify Partner
152 37 58
Please copy and paste the code from your header.liquid file and we can provide you with a solution. Please make sure to attach the schema at the bottom. If it’s too long to include here, please private message it to me.
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
New Member
5 0 0

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="wrapper">

<div class="grid--full">
<div class="grid-item large--one-half">
{% if template.name == 'index' %}
<h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo %}
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<a href="/" itemprop="url">
<div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
<div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
<img class="lazyload js"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="width:{{ section.settings.logo_max_width }}px;">
</div>
</div>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ logo_alt | escape }}"
itemprop="logo"
style="max-width:{{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a href="/" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

<div class="grid-item large--one-half text-center large--text-right">
{% if section.settings.show_announcement or shop.customer_accounts_enabled %}
<div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}

<p>{{ section.settings.announcement_text | escape }}</p>

{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
{% endif %}

{% if shop.customer_accounts_enabled %}
<span class="site-header--meta-links medium-down--hide">
{% if customer %}
{% capture first_name %}<a href="/account">{{ customer.first_name }}</a>{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.sign_in' | t | customer_login_link }}
<span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
</span>
{% endif %}
</div>

<br class="medium-down--hide">
{% endif %}

{% include 'search-bar' %}

<a href="/cart" class="header-cart-btn cart-toggle">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
</div>

</div>
</header>

<div id="mobileNavBar">
<div class="display-table-cell">
<button class="menu-toggle mobileNavBar-link" aria-controls="navBar" aria-expanded="false"><span class="icon icon-hamburger" aria-hidden="true"></span>{{ 'layout.navigation.mobile_menu' | t }}</button>
</div>
<div class="display-table-cell">
<a href="/cart" class="cart-toggle mobileNavBar-link">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
</div>

<nav class="nav-bar" id="navBar" role="navigation">
<div class="wrapper">
{% include 'search-bar' %}
{% include 'mobile-nav' %}
{% include 'site-nav' %}
</div>
</nav>

 

{% schema %}
{
"name": {
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"pt-BR": "Cabeçalho"
},
"class": "header-section",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"pt-BR": "Menu"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"de": "Logo",
"en": "Logo",
"es": "Logotipo",
"fr": "Logo",
"it": "Logo",
"ja": "ロゴ",
"pt-BR": "Logotipo"
}
},
{
"type": "image_picker",
"id": "logo",
"label": {
"de": "Benutzerdefiniertes Logo",
"en": "Custom logo",
"es": "Logotipo personalizado",
"fr": "Logo personnalisé",
"it": "Logo personalizzato",
"ja": "ロゴをカスタムする",
"pt-BR": "Logotipo personalizado"
},
"info": {
"de": "400px breite .png empfohlen",
"en": "400px wide .png recommended",
"es": "400px de ancho .png recomendado",
"fr": "400 px de largeur .png recommandé",
"it": "Consigliato file .png con larghezza 400 pixel",
"ja": "400ピクセル幅.png推奨",
"pt-BR": ".png com 400 px de largura recomendado"
}
},
{
"type": "text",
"id": "logo_max_width",
"label": {
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logotipo personalizado",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタムする",
"pt-BR": "Largura do logotipo personalizado"
},
"default": {
"de": "305",
"en": "305",
"es": "305",
"fr": "305",
"it": "305",
"ja": "305",
"pt-BR": "305"
}
},
{
"type": "header",
"content": {
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"pt-BR": "Barra de anúncios"
}
},
{
"type": "checkbox",
"id": "show_announcement",
"label": {
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fr": "Afficher l'annonce",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"pt-BR": "Exibir anúncio"
},
"default": false
},
{
"type": "text",
"id": "announcement_text",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"pt-BR": "Texto"
},
"default": {
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fr": "Annoncez quelque chose ici",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"pt-BR": "Anuncie algo aqui"
}
},
{
"type": "url",
"id": "announcement_link",
"label": {
"de": "Link",
"en": "Link",
"es": "Enlace",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"pt-BR": "Link"
},
"info": {
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "選択させる",
"pt-BR": "Opcional"
}
}
]
}
{% endschema %}

0 Likes
Shopify Partner
152 37 58

@PattyM 

 

The easiest solution for the community would be this: 

 

You'll go to Online Store > Themes > Actions > Edit Code > Assets > theme.scss.liquid

 

Scroll to the very bottom and paste: 

 

.site-header .header-cart-btn {
  background:  $colorBtnPrimary;
&:hover {
background: $colorBtnPrimaryHover;
}
}

 

I do also have a full solution that would be modifying your theme if you feel it's neccessary. It's more extensive so it's too long to post here. It's complete so let me know if you want the info. 

 

Screen Shot 2019-09-10 at 8.07.10 PM.png

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
New Member
5 0 0

@shayOwensby 

 

Thank you for the help! I copied and pasted that at the bottom of theme.scss.liquid, saved, and went to Customize to see if it worked. My cart button is now my regular button color, but I still see "Cart button and search field" as a single option. Is there a way to change the cart button to match Accents? That's what I should have said in my initial post, sorry.

0 Likes
Highlighted
Shopify Partner
152 37 58

@PattyM,

 

Not following 100%. Please include a url to your store so I can take a look! 

 

Thanks, 

Shay 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
0 Likes
New Member
5 0 0

https://hightidegifts.com/

 

The Cart button should ideally be the same dark pink of the gift on the wave in the logo. The current color just gets lost in the other blues of the theme, and the text is hard to read.

0 Likes
New Member
5 0 0

Button Colors.pngOkay, so I switched the button colors, but because the applicable text is dark teal across the site, the Cart button now makes my eyes vibrate. The letters on the Add to Cart button are easy to read, since they're white. Is there a way to make the Cart button match the Add to Cart button without making all of my text white and therefore unreadable across the rest of the site? I really don't want to do a total overhaul because of one button.

 

Thanks!

0 Likes