Goal: Make Shopify product cards resemble Amazon’s, including showing all same-color products together on a product page and listing them separately in search results (image provided is central to the request).
Update: A suggested CSS snippet changes visual styling (background color, border, padding; removes margins for images/titles) on .product-card.
Response: The original poster notes this only affects appearance and does not add products to the card or replicate Amazon-like variant grouping/search behavior.
Status: No functional solution provided. The core question—whether Amazon-style product grouping and search separation is possible in Shopify—remains unanswered and the discussion is open.
Key terms:
Outcome: No decisions or action items beyond a basic CSS styling example; functional requirements are still unmet.
Im about to change to Shopify but i realy would like to change the default style of the product card to something more similar to Amazon product card.
For example to have all products with the same color on the same product page (see image)as well as having them separatly when searching for them.
Is this possible?
Use this code in css file
/* Add custom styles to product card */
.product-card {
background-color: #f1f1f1; /* Replace with your desired background color */
border: 1px solid #ccc; /* Add a border for better separation */
padding: 20px; /* Adjust padding as needed */
}
/* Remove default padding and margin from product images and titles */
.product-card img, .product-card h3 {
margin: 0;
padding: 0;
}
It seems like this will only change background colors and some boarders. It does not add products to the product card or creates a similar look as amazon. Perhaps that is not possible?