Ride theme — Mobile & desktop customization issues (cart icon, drawer line, quantity selector, icons & menu size)

Hello,

I am using the Ride theme for my Shopify store and I have several visual issues and customization requests:

  1. Cart icon outline — Sometimes, when I tap on the cart icon, a square outline appears around it. I believe this might be a focus or active state style, but I would like to remove it so the icon looks clean at all times.

  2. Black vertical line in cart drawer — When the cart drawer (side cart) opens on mobile, sometimes there’s a thick black vertical line on the left side of the drawer, but sometimes it’s not there. I would like to remove this line completely so the cart drawer edge looks consistent.

  3. Quantity selector style — Is it possible to make the quantity selector (the box with the “−” and “+” buttons) have rounded corners, so it looks more in line with the store’s theme? Ideally, it would be half-rounded or have a softer corner radius instead of sharp edges.

  4. Icon sizes on mobile — On the mobile version, I would like to increase the size of the “menu” (hamburger) icon, the search icon, and the cart icon to make them more visible and easier to tap.

  5. Icons and menu buttons on desktop — On the desktop version, I would like to increase the size of all header icons (search, my account, cart), as well as enlarge the menu buttons (Home, Catalog, etc.) for better visibility.

Could you please help me adjust the CSS or theme settings to fix these issues and implement the requested customizations?
My store: https://clickraidofficial.com

Thank you!

@ViktorLang please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.header__menu-item span {font-size: 18px;}

.header__icon .icon {height: 3rem; width: 3rem;}

.header__icon:hover .icon{box-shadow: none !important;
    outline: none !important;}

Hello @ViktorLang

Please send me the collaborator code. I will send you a store access request and give you a proper update.

@suyash1 The menu and search have increased, while the cart icon has become smaller.

Hello! @devcoders Tell me please will you do these fixes for free or is this a paid service? Sorry if it’s not correct question :slight_smile:

Hi @ViktorLang ,
I am from Mageplaza - Shopify solution expert.

If you could provide me with the collaborator code, I would be glad to assist you with customizing those parts. Please note that I will provide this support free of charge.

Best regards!

Hello @ViktorLang
Please send me the collaborator code. I will send you a store access request and give you a proper update.

Yes, here is the collaborator code: 2237

write me here please when you will send a store request

I have sent a collaborator request to access your store.

Thank you, accepted!

Tell me please how many time do you need for that?

It will be quick — I’ll get back to you in a few minutes.

@ViktorLang ,
I have implemented the customizations mentioned in the above list. Kindly review your website and let me know the outcome.

Everything is great, thank you. It’s only left to make the quantity selector (the box with the “−” and “+” buttons) have rounded corners, so it looks more in line with the store’s theme? Ideally, it would be half-rounded or have a softer corner radius instead of sharp edges. Is it possible?
And also, could you please show me exactly where you inserted all the code related to the changes you made? So that I can delete or edit it.

And also, the outline of the quantity selector needs to be the same thickness as the Add to Cart button.

@ViktorLang ,

You can see the edits in the screenshot below:


In addition, the border of the quantity button has been slightly rounded and made thicker.

Great! Thank you soo much for your time and efforts!