Add Your Icons to Collapsible Row Shopify | No Apps

Introduction

In this article, we'll walk you through a simple, step-by-step process to add your own icons to a collapsible row on your Shopify store. This method doesn't require any apps and is an easy way to enhance your store's appearance and functionality.

Step 1: Create Icons

First, you need to create the icons you want to use. For this, you can use a graphic design tool like Canva. Here’s how to do it:

Open Canva: Create a new design with dimensions 512 by 512 pixels.
Design Icons: Create icons such as currency symbols, trucks, and return symbols. Keep them in black for a clean look.
Download Icons: Download the icons with a transparent background.

Step 2: Upload Icons to Shopify

Once you have your icons, the next step is to upload them to your Shopify store.

Access Shopify Backend: Log in to your Shopify store and go to the Content section.
Upload Files: Click on Files, and upload the icons you downloaded from Canva.
Naming: Ensure that you name the uploaded files for easy identification in the future.

Step 3: Add jQuery

Next, we’ll add jQuery to help manipulate the icons easily.

Open Theme Liquid: Go to Online Store > Themes and find your active theme. Click on the three dots and select Edit Code.
Add jQuery Link: In the theme.liquid file, paste the jQuery CDN link just below the <head> tag.

Step 4: Create Code to Display Icons

After adding jQuery, you need to write some code to display the icons next to your text.

Find the Class: Inspect the collapsible row section on your store's front end to find the class of the elements you want to modify.
Add Script: Underneath the earlier jQuery link, insert a <script> section that uses jQuery to target the desired classes. For every text line (like "Cash on Delivery"), check for matches to insert the respective icons.

Here’s a simple structure:

$(document).ready(function() (
    $('.your-class-selector').each(function() {
        var text = $(this).text().trim();
        
        if (text === "Cash on Delivery") {
            $(this).prepend('<img src="URL-to-your-cash-icon" alt="Cash Icon" style="width:20px;height:20px;">');
        )
        // Repeat for other text items
    });
});

Style the Icons: Make sure to add CSS styles for alignment and spacing.

Step 5: Testing and Customizing

Once you’ve added the code:

Test Functionality: Refresh your Shopify store and check if the icons are displaying correctly.
Customize Appearance: You can adjust sizes, borders, and spacing through CSS.

By applying these steps, you'll be able to effectively add and manage custom icons in your Shopify collapsible rows, making your store look more professional and visually appealing.

Keyword

Keywords: Shopify, icons, collapsible row, jQuery, Canva, theme liquid, styling, upload, custom icons, online store.

FAQ

Q1: What is the purpose of using icons in a Shopify store? A1: Icons help convey information visually, enhancing user experience and making the store look more professional.

Q2: Do I need to use an app to add icons on Shopify? A2: No, this method allows you to add icons without using any external apps.

Q3: Can I use any graphic design tool to create the icons? A3: Yes, while this guide uses Canva, you can use any graphic design tool that allows for transparent image downloads.

Q4: How do I ensure that my icons align properly? A4: You can use CSS flex properties to align the icons with the text correctly.

Q5: What should I do if the icons are not displaying? A5: Check that the file URLs are correct and that your jQuery code is properly set up to target the elements in question.

Add Your Icons to Collapsible Row Shopify | No Apps | Free Method