Add line in between products in cards

Shopify Discussion
,

Topic summary

A user is attempting to add horizontal divider lines between products in their Shopify cart drawer. Their initial code snippet only produced a red dot instead of a full-width line.

Problem Details:

  • The original markup code created a red dot rather than the desired horizontal line separator
  • The user wants lines between items but not after the last item (to avoid duplication with the existing footer line)

Solutions Offered:

Multiple community members provided CSS-based approaches:

  1. First suggestion: Use width: 100vw instead of percentage-based width

    • User rejected this as it caused unwanted horizontal scrolling

  2. Alternative approach: Add CSS targeting .cart-drawer .cart-item with border-bottom property

    • Initial version added lines under all items including the last one

  3. Final solution: CSS code that adds borders between items while excluding the last item using :last-child selector with border-bottom: none

    • Includes !important flags to ensure style precedence
    • Addresses both requirements: lines between items and no line after the final item

The discussion includes screenshots demonstrating the visual results of each solution.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m trying to add a horizontal line in between products in my card drawer, so I added this code:

{%- unless forloop.last -%}

  
    

---

  

{%- endunless -%}

But it just adds a red . in between the products and not a full line like the default top and bottom horizontal line. Does anyone know how I can show a horizontal line there?

1 Like
2

Hi @TrendBlend , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hi @TrendBlend

Please share your store URL

Best,

Daisy

4

@DaisyVo @websensepro URL: Wall Art – Transform Your Space with Style and Elegance – InteriorGlows

5

Hey @TrendBlend

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find password.liquid file

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

RESULT:

Moeed_0-1736168523414.png
Moeed_0-1736168523414.png412×915 43.1 KB

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

Best Regards,
Moeed

6

@TrendBlend Give the width in vw instead of %. For example, width:100vw;

websensepro_0-1736168476338.png
websensepro_0-1736168476338.png1366×608 232 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

7

Hi @TrendBlend

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file
.cart-drawer .cart-item {
    border-bottom: 1px solid gray;
    padding-bottom: 22px;
}

Result:

websensepro_0-1736169242834.png
websensepro_0-1736169242834.png889×507 59 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

8

Hello @websensepro , this code makes my card horizontally scrollable which I absolutely do not want.
Hello @Moeed the code you provided also adds a horizontal line under the last cart item which I do not want since there is already a horizontal line under it aswell for the footer.

9

@TrendBlend

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.cart-drawer .cart-item {
    border-bottom: 1px solid gray !important;
    padding-bottom: 20px !important;
}
.cart-drawer .cart-item:last-child {
    border-bottom: none !important;
}

Result:

websensepro_0-1736170951733.png
websensepro_0-1736170951733.png317×498 19.8 KB

websensepro_1-1736170964163.png
websensepro_1-1736170964163.png318×509 19.8 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!