Skip to main content

Embedding a Switcher in Your Shopify Theme's Header Cart Icon: Placing it Before or After?

This guide will walk you through embedding HTML code for a switcher and positioning it either before or after your cart icon.

Step 1: Access your Theme code​

  1. From your Shopify admin, go to Sales Channels -> Online Store -> Themes.
  2. Select the theme you want to edit, click the three dots (⋮) -> Edit Code.

Step 2: Locating the Header file​

Locate the HTML element that represents your cart icon in your theme's code (e.g., <div class="header__cart">...</div>)

To place switcher(s) after the cart icon: Insert the switcher HTML (<div id="ts-switcher-manual-desktop"></div> and/or <div id="ts-switcher-manual-mobile"></div>) immediately after the closing tag of the cart icon's container.

To place switcher(s) before the cart icon: Insert the switcher HTML immediately before the opening tag of the cart icon's container.

<div id="ts-switcher-manual-desktop"></div>
// insert before the cart icon
<div class="header__cart">
  <a href="/cart" class="header__cart-link">
    <svg class="icon icon-cart">...</svg>
    <span class="cart-count"
      >{% if cart.item_count > 0 %}{{ cart.item_count }}{% endif %}</span
    >
  </a>
</div>
<div id="ts-switcher-manual-desktop"></div>
// insert after the cart icon

Remember to use CSS (e.g., display: flex, align-items: center, and margin properties) to position and space the switcher as desired.

Note​

It's crucial to understand that the specific class names like header__cart, header__cart-link, and the file names such as header.liquid are examples and might not be the same in your particular Shopify theme.

To find the correct location in your theme's code:

  • Use the theme's search function (within the "Edit code" section) and search for keywords like cart, header, or icon. This can help you identify the relevant files.
  • Inspect the theme's structure. Look for files in the Sections and Snippets folders that seem related to the header or navigation.
  • Examine the HTML structure. Once you've found a potential file, look for the HTML elements that visually represent your cart icon on the storefront. Pay attention to the surrounding <div>, <a>, and other container tags and their associated classes.

Should you need any further assistance, please do not hesitate to contact us directly at [email protected]