Create listing

First, make your selection

Select the marketplaces you want to list on

>

); })} Manage marketplace visibility

))}

Add or drag photo

</Field>
                  <Field label="Category">
                    <CategoryPicker} />
                  </Field>
                  <Field label="Price">
                    <div class="p-inputgroup" data-fluid="">
                      <div class="p-inputgroupaddon">£</div>
                      <input type="text" inputMode="decimal" class="p-inputtext p-component p-filled p-inputtext-fluid" />
                    </div>
                  </Field>
                  
                  
                  <Field label="Brand" helper="Leave blank if unsure / no brand">
                    <PSelect options= placeholder="Search a brand" onAdd=, body: JSON.stringify() });
                      const j = (await r.json()) as  };
                      if (j.data) 
                    }} />
                  </Field>
                  <Field label="Condition" helper="Optional">
                    <PSelect options= placeholder="Select a condition" />
                  </Field>
                  <Field label="Quantity">
                    <div class="p-inputgroup" data-fluid="">
                      <input type="text" inputMode="numeric" class="p-inputtext p-component p-filled p-inputtext-fluid" />
                      <div class="p-inputgroupaddon">pcs</div>
                    </div>
                  </Field>
                   placeholder="Select color" swatches />
                    </Field>
                  )}
                   />
                    </Field>
                  )}

<div class="p-card-caption">
                    <div class="p-card-title">
                      <div class="flex justify-between">
                        <h2 class="text-xl">Shipping</h2>
                        <button class="p-button p-component p-button-link !w-fit !mt-1 !pt-0 !text-sm">
                          <Settings size= /> Set shipping profiles
                        </button>
                      </div>
                    </div>
                  </div>
                  <Field label="Shipping weight" helper="This can be an approximation">
                    <div class="flex flex-wrap items-center gap-4">
                      <div class="p-inputgroup flex-1 min-w-[150px]" data-fluid="">
                        <input type="text" inputMode="decimal" class="p-inputtext p-component p-filled p-inputtext-fluid" />
                        <div class="p-inputgroupaddon">kg</div>
                      </div>
                      <div class="p-inputgroup flex-1 min-w-[150px]" data-fluid="">
                        <input type="text" inputMode="decimal" class="p-inputtext p-component p-inputtext-fluid" />
                        <div class="p-inputgroupaddon">g</div>
                      </div>
                    </div>
                  </Field>
                  <div class="p-message p-component p-message-info p-message-sm" role="alert">
                    <div class="p-message-content-wrapper">
                      <div class="p-message-content">
                        <Info size= />
                        <div class="p-message-text"> You can set default packaging details and pricing in your shipping profiles </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

<div class="basis-1/4">
            <div class="p-card p-component">
              <div class="p-card-body">
                <div class="p-card-content">
                  <Field label="Labels">
                    <div class="flex flex-wrap gap-2 items-center">
                       onRemove= />)}
                      <LabelPicker />
                    </div>
                  </Field>
                  <Field label="SKU" helper="Optional">
                    <input type="text" class="p-inputtext p-component p-inputtext-fluid" />
                  </Field>
                  <Field label="Cost of goods" helper="Optional">
                    <div class="p-inputgroup" data-fluid="">
                      <div class="p-inputgroupaddon">£</div>
                      <input type="text" inputMode="decimal" class="p-inputtext p-component p-filled p-inputtext-fluid" />
                    </div>
                  </Field>
                  <Field label="Internal note">
                    <textarea class="p-textarea p-component p-textarea-fluid" maxLength= rows= />
                  </Field>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<div class="flex justify-end gap-2 w-full py-4 md:backdrop-blur-sm mt-2 bg-clip-padding z-100 md:justify-between md:flex-row md:items-center md:mt-2 md:fixed md:bottom-0 md:left-0 md:right-0 md:px-4 md:[box-shadow:0_1px_5px_rgba(0,0,0,0.2)]">
        <div class="flex gap-2 md:justify-between justify-end w-full">
          <div class="flex gap-2">
            <button class="p-button p-component p-button-secondary">
              <ArrowLeft size= /> Go back to overview
            </button>
          </div>
          <div class="flex gap-2 flex-wrap-reverse sm:flex-nowrap w-full sm:w-auto">
            <button class="p-button p-component p-button-accent w-full sm:w-auto" aria-label="Delist everywhere">
              <Eraser size= />
              <span class="p-button-label">Delist everywhere</span>
            </button>
            <div class="flex w-full sm:w-fit gap-2">
              <div class="flex-1 sm:flex-auto">
                <button class="p-button p-component w-full" type="button" aria-label="Save">
                  <Save size= />
                  <span class="p-button-label"></span>
                </button>
              </div>
              <div class="flex-1 sm:flex-auto">
                <button class="p-button p-component w-full sm:w-auto" aria-label="Post">
                  <Send size= />
                  <span class="p-button-label">Post</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    <footer class="footer">
      <span>Gentelella — free admin dashboard template by <a href="https://colorlib.com">Colorlib</a></span>
      <span>v4.1.1 · <a href="https://github.com/ColorlibHQ/gentelella/blob/master/LICENSE.txt" target="_blank" rel="noopener">MIT</a></span>
    </footer>
  
</main>
  
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gridstack@10.3.1/dist/gridstack-all.min.js"></script>
</body>
</html>