Moving shopping cart icon to the right side - Simple Theme

AnimeKyashi
Excursionist
26 0 8

Hey!

Can anyone help me with moving the shopping cart to the right side of my search bar?

Thank you in advance!!

animekyashi.com

password: cat

Screen Shot 2021-04-12 at 4.47.43 PM.png

dmwwebartisan
Shopify Partner
5873 1341 1724

@AnimeKyashi 

This is little bit of customization in your header.liquid file. Please share your sections/header.liquid code here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
AnimeKyashi
Excursionist
26 0 8

@dmwwebartisan this is the coding for section header.liquid

{%- unless section.settings.logo == blank -%}
{%- assign logo_max_height = section.settings.logo_max_width | divided_by: section.settings.logo.aspect_ratio -%}
{% if logo_max_height > 600 %}
{%- assign logo_max_width = 600 | times: section.settings.logo.aspect_ratio -%}
{% else %}
{%- assign logo_max_width = section.settings.logo_max_width -%}
{% endif %}

<style>
.site-header__logo {
width: {{ logo_max_width | append: 'px'}};
}
#HeaderLogoWrapper {
max-width: {{ logo_max_width | append: 'px'}} !important;
}
</style>
{%- endunless -%}

{% if section.settings.show_announcement and section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar--link:hover {
{% assign brightness = settings.color_primary_color | color_brightness %}

{% if brightness <= 224 %}
background-color: {{ settings.color_primary_color | color_lighten: 4 }};
{% else %}
background-color: {{ settings.color_primary_color | color_darken: 8 }};
{% endif %}
}
</style>

{% if section.settings.announcement_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.announcement_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message site-wrapper">{{ section.settings.announcement_text | escape }}</p>

{% if section.settings.announcement_link == blank %}
</div>
{% else %}
</a>
{% endif %}
{% else %}
<div class="page-border"></div>
{% endif %}

<div class="site-wrapper">
<div class="top-bar grid">

<div class="grid__item medium-up--one-fifth small--one-half">
<div class="top-bar__search">
<a href="{{ routes.search_url }}" class="medium-up--hide">
{% include 'icon-search' %}
</a>
<form action="{{ routes.search_url }}" method="get" class="search-bar small--hide" role="search">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
<button type="submit" class="search-bar__submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
<input type="search" name="q" class="search-bar__input" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
</form>
</div>
</div>

{% if shop.customer_accounts_enabled %}
<div class="grid__item medium-up--two-fifths small--hide">
<span class="customer-links small--hide">
{% if customer %}
{% if customer.first_name != blank %}
{% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
{% else %}
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
{% endif %}
<span class="vertical-divider"></span>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.log_in' | t | customer_login_link }}
<span class="vertical-divider"></span>
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
</span>
</div>
{% endif %}

<div class="grid__item {% if shop.customer_accounts_enabled %} medium-up--two-fifths {% else %} medium-up--four-fifths {% endif %} small--one-half text-right">
<a href="{{ routes.cart_url }}" class="site-header__cart">
{% include 'icon-cart' %}
<span class="small--hide">
{{ 'layout.cart.title' | t }}
(<span id="CartCount">{{ cart.item_count }}</span>)
</span>
</a>
</div>
</div>

<hr class="small--hide hr--border">

<header class="site-header grid medium-up--grid--table" role="banner">
<div class="grid__item small--text-center">
<div itemscope itemtype="http://schema.org/Organization">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name uses `h1` tag on homepage, div on other pages.
{% endcomment %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if section.settings.logo %}
<div id="HeaderLogoWrapper" class="supports-js">
<a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%; display: block;">
<img id="HeaderLogo"
class="lazyload"
src="{{ section.settings.logo | img_url: '150x150' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
</a>
</div>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<a href="{{ routes.root_url }}" itemprop="url">
<img class="site-header__logo" 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="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
</a>
</noscript>
{% if request.page_type == 'index' %}
<h1 class="visually-hidden">{{ shop.name }}</h1>
{% endif %}
{% else %}
{% if request.page_type == 'index' %}
<h1 class="site-header__site-name">
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
</h1>
{% else %}
<a href="{{ routes.root_url }}" class="site-header__site-name h1" itemprop="url">
{{ shop.name }}
</a>
{% if request.page_type == 'index' %}
<h1 class="visually-hidden">{{ shop.name }}</h1>
{% endif %}
{% endif %}
{% endif %}
</div>
</div>
{% unless section.settings.tagline == blank %}
<div class="grid__item medium-up--text-right small--text-center">
<div class="rte tagline">
{{ section.settings.tagline }}
</div>
</div>
{% endunless %}
</header>
</div>

 

I added coding to the bottom of my theme.scss.liquid file to move the search bar to the right (originally on the left side of the Nav bar) I don't know if that'll affect the coding to move the shopping cart to the right side of the search bar.

.top-bar.grid {
display: flex;
}
.top-bar .grid__item.medium-up--one-fifth.small--one-half {
order: 2;

}

 

Thanks in advance!!

0 Likes
dmwwebartisan
Shopify Partner
5873 1341 1724

@AnimeKyashi 

I checked your code but It would need customization to make this perfect, Unfortunately, there is no simple solution otherwise I will be happy to help you.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes