Increasing Size of Shopping Cart Icon

Highlighted
New Member
10 0 0

My site is using the Launchpad-star theme.  I want to increase the size of the shopping cart icon and am not sure how to do this.  I started out by uploading a new image i wanted to use, deleting the original icon-cart-small.png, and renaming the new file to that.  But only a small part of the new image was shown on my site due to the size. I believe the original cart image was 18px x 18px, and I want the new one to be about twice that size.  

So how do I enlarge the shopping cart icon seen on my site?  I believe that it requires changing the padding size for the image but I am not sure where to find that. 

Thanks

0 Likes
Highlighted
Tourist
6 0 2

Hi Angelia,

Your launchpad-star theme seems to be a bit older than the one I'm working with, so I hope these instructions make sense for your store.

From the Themes editor (https://{yourshop}.myshopify.com/admin/themes), choose Edit HTML/CSS from the ... menu

  1. Expand the Assets folder and click on styles.scss.liquid
  2. Search for the .icon-cart entry, it should look something like this (there may be multiple entries, one possibly with background settings):
    .icon-cart {
        float: left;
        display: block;
        width: 20px;
        height: 16px;
        margin: 21px 10px 0 0;
        opacity: 0.8;
        filter: alpha(opacity=60);
    }

     

  3. Make the following updates to width, height, and if desired the margin:
    .icon-cart {
        float: left;
        display: block;
        width: 25px;
        height: 24px;
        margin: 18px 10px 0 -4px;
        opacity: 0.8;
        filter: alpha(opacity=60);
    }

     

  4. Save your changes and make sure it looks good on your site

Hope that fixes you up. Good luck!

0 Likes
Highlighted
New Member
10 0 0

Thank you so much!  that was exactly what i needed...it worked perfectly.

 

Thanks again

0 Likes
New Member
2 0 0

Hi Brad,

 

i got the same problem but cant find the styles.scss.liquid Asset. 

Any chance you know the answer why that is or have another way of increasing the size?

 

Best,

Jana

0 Likes