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 

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 support@transtore.app