How to add “add to cart” to the products on home page

Shopify Discussion
1

my store is aromaticaparfums@gmai.com and I want the add to cart option on the left image on the right image (my store)

IMG_9066.jpeg
IMG_9066.jpeg1125×1192 89.1 KB

IMG_9067.jpeg
IMG_9067.jpeg1125×1421 112 KB

2
  1. Login to admin > Online Store > Actions > Click Edit code.
  2. Search for the file product-card.liquid
  3. Open that file
  4. Go to the bottom of the file and look for
  5. Insert the below code just above the tag and hit save.
{%- if product_card_product.variants.size == 1 -%}
<form method="post" action="/cart/add" class="ContactForm center">
  <input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
  <input min="1" type="hidden" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="button" style="margin-top:7px;" />
</form>
{%- else -%}
  <div class="center">
  <input type="button" class="button" style="margin-top:7px;" onclick="location.href='{{ product_card_product.url | default: '#' }}'" value="View Options" />
  </div>
{%- endif -%}
3

Unable to locate product-card.liquid

4

Hey @aromaticaparfum ,

If you’re unable to find product-card.liquid it’s likely that your theme uses a different structure. Here’s a more specific way to locate the correct file for your product layout:

Follow these steps:

  1. Online Store > Themes > Edit code.

  2. In the Sections folder, look for files like:

product-template.liquid

main-product.liquid

featured-product.liquid

These files usually control the product page layout.

For Product Lisitings (like collection pages):

Check the snippets folder for files like:

product-grid-items.liquid

collection-product-item.liquid

These handle how products are displayed in collection grids.

Search for add to cart button:

In the code editor, use the search bar to look for keywords like add to cart or {{ product.featured_image}}. This can help locate where the button and image are within the theme.

Here’s the code you can use to place the “Add to Cart” button on the left and the product image on the right:

CSS for layout:

.product-container {
  display: flex;
  justify-content: space-between;
}

.left-container {
  flex-basis: 40%;
}

.right-container {
  flex-basis: 60%;
}

This will place the “Add to Cart” button on the left and the product image on the right.

If you’re still having trouble locating the file, let me know your specific theme, and I can assist further!

Best Regard,

Rajat Sharma