i wanna shift add to cart from up to down

Store Design
, , , , , , , , ,

Topic summary

A user wants to reposition the “Add to Cart” button on their Shopify collection page from its current top position to the bottom of product cards, as shown in their reference screenshot.

Initial Issue:

  • The cart icon was initially missing from products
  • User needed to add it back before repositioning could occur

Solution Provided:
A CSS code snippet was shared to achieve the desired layout for mobile devices (screens under 767px):

  • Makes the quick-add button position relative
  • Shifts product card content upward by 59px
  • Results in the cart button appearing at the bottom of product cards

Status: Resolved with working CSS implementation demonstrated in the final screenshot.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

i wanna shift add to cart from up to down

URL: https://occu-com.myshopify.com/collections/aura

PASS: 1

Screenshot 2025-03-07 172610.png
Screenshot 2025-03-07 172610.png402×742 40.3 KB

want like these

Screenshot 2025-03-06 230917.png
Screenshot 2025-03-06 230917.png1314×656 226 KB

2

Hi,

Maybe you have removed cart icon from your products, if you add cart icon I can do as like as you wanted. Thanks

Rony_ShopiDevs_0-1741860129452.png
Rony_ShopiDevs_0-1741860129452.png1564×982 103 KB

3

Done Added

4

Hi,

Please add below css to your theme css file to get attached mobile view.

@media screen and (max-width: 767px) {
    .quick-add {
        position: relative;
    }
    .product-card__content.flex.flex-col.justify-start.text-left {
        position: relative;
        top: -59px;
    }
}

Rony_ShopiDevs_1-1742181217057.png
Rony_ShopiDevs_1-1742181217057.png444×986 122 KB