Removing the extra line on the checkout page

Store Design
, ,
1

Hi All,

I have 3 requests that i just cannot find the answer to myself.

  1. I would love to remove the bar in light green, above ‘‘Your Cart’’. Is it possible to replace it with a grey line like under ‘‘product’’?

  2. the special request box and the quabtity box, can we give that a different colour code? Preferably white but i can change that later.

  3. Is it possible to add another one of those grey devider lines above ‘‘subscribe to our club’’ with about 20 pixels distance

KiavusPetstore_1-1721717871011.png
KiavusPetstore_1-1721717871011.png996×787 53.6 KB

Thank you so much in advance! You would be a lifesaver :slightly_smiling_face:

2

Ah ofcourse, the website is www.kiavuspetstore.com

3

Hey @KiavusPetstore

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1721718514004.png
Moeed_0-1721718514004.png780×851 48.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
4

HEllo @KiavusPetstore
Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 2319
search this code

.header-wrapper {
display: block;
position: relative;
background-color: rgb(var(--color-background));
}

and replace with this code

.header-wrapper {
display: block;
position: relative;
background-color: rgb(var(--color-background));
margin: -8px;
}

and the result will be

12.png
12.png1318×919 103 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

2 Likes
5

Hi there,

To address your requests:

  1. In order to remove the green bar above “Your Cart” and replace it with a grey line, you would need to navigate to your theme’s CSS file and look for the code related to that bar. It might be under a class or ID like ‘.cart-title’ or ‘#cart-title’. Find the background-color property and change its value to the grey color you want. For example, if you found ‘.cart-title’, your code might look like this:

.cart-title {

background-color: #D3D3D3; /*This color code represents light grey*/

}

  1. For changing the color of the special request and quantity box, you would need to find the CSS selectors for these elements and modify their background-color property as well, similar to the above step.

  2. To add a grey divider line above “Subscribe to our club” with about 20 pixels distance, you would need to add a border to the element above it or a pseudo-element (::before or ::after) with a grey border. It would look something like this:


.element {

border-top: 1px solid #D3D3D3; /*This adds the grey line*/

padding-top: 20px; /*This adds the 20px distance*/

}

Please replace ‘.element’ with the correct class or ID of the element above “Subscribe to our club”.

These changes will require

1 Like