I am trying to have it so that the product variant that is chosen shows up in the cart. its not currently working, what do i need to do to fix this?

Online Store and Theme Development
1

We are new to editing shopify, and have run into an issue where the product variant selected when choosing the product to purchase is always showing up as the main product. We have been using Chatgpt to try and get some help to solve this, but every solution it provides has not resulted in the cart working properly.

2

Do you possibly have any code you can show us so we can see what exactly is going on?

3

Also, since you said you are using chatgpt, you can ask it to “Create you a post for the shopify dev community going over what we worked on to see if they can help” and it should give you a really good detailed post that you can then post here.

4

oh great idea, please see below notes based on the chatgpt help:

I’m customizing the Dawn theme and have added a section at the bottom of the product page to display each variant as its own card. The idea is to show:

  • Variant image
  • Variant title
  • Pricing (with compare-at if applicable)
  • An “Add to Cart” button for each variant

Everything is rendering correctly, but the Add to Cart buttons are not working as expected.

:hammer_and_wrench: What I’ve Implemented:

Here’s the simplified Liquid snippet I’m using inside main-product.liquid:

liquid

CopyEdit

<div class="variant-cards-wrapper">
  {% for variant in product.variants %}
    <div class="variant-card">
      {% if variant.featured_image %}
        <img src="{{ variant.featured_image | image_url: width: 400 }}" alt="{{ variant.title }}">
      {% endif %}

      <h3>{{ variant.title }}</h3>

      <p class="price">
        {% if variant.compare_at_price > variant.price %}
          <span class="old-price">{{ variant.compare_at_price | money }}</span>
        {% endif %}
        <span class="current-price">{{ variant.price | money }}</span>
      </p>

      {% if variant.available %}
        <form method="post" action="/cart/add">
          <input type="hidden" name="id" value="{{ variant.id }}">
          <button type="submit">Add to Cart</button>
        </form>
      {% else %}
        <p class="sold-out">Sold out</p>
      {% endif %}
    </div>
  {% endfor %}
</div>

:construction: The Problem:

  • The form submits, but the product doesn’t get added to the cart consistently.
  • No errors show in the console related to the form.
  • I’m not sure if this conflicts with Shopify’s AJAX cart behavior or if something is missing in the form setup.

:magnifying_glass_tilted_left: What I’m Hoping to Understand:

  • Is it okay to use POST /cart/add like this in Dawn?
  • Do I need to manually trigger or integrate with Shopify’s product-form.js or other scripts for it to work properly?
  • Is there a better way to let users add variants directly to the cart from a custom layout like this?

Any insight would be greatly appreciated — I want to make sure I’m building this in a clean, Shopify-friendly way.

If there is any additional code i can post, please let me know so i can add it!

Thanks in advance!

5

The main goal is to have the products added to the cart based on the variant selected. the above adjustments didint work. in addition, these are the apps we are using.

image
image550×437 28.9 KB

6

Hey @kre-a-tiv_COLLECTION it could be that some apps might be clashing.

Also you have a good point of that product-form.js thing. You can definitely like create a new post api request to cart/add endpoint with the variant id of the variant currently selected.

If you are not getting errors, please check network tabs if the endpoint is being hit or not may be there’s an error in the request or something. I believe the network will actually prove the point if you are hitting the endpoint.

Best
Shadab