Quick add from match outfit

[robertsolcan]

Hi! I would like to transform my match outfit section, to add a quick add button to it, as in the picture. Can you guide me to do this? I'm not exactly sure how can I do this. This is my site: https://bymo.ro/products/colanti-scurti-tarix-1

[DaisyVo]

Hi @robertsolcan 

Adding a "Quick Add" button to your match outfit section in Shopify, similar to what you see in the picture, can be done by modifying the code in your theme. Here’s a step-by-step guide to adding a quick add button to your product listing:

1. Locate the Relevant Theme File

• In your Shopify admin, go to Online Store > Themes.
• Find the theme you’re using and click Actions > Edit Code: https://prnt.sc/d5u0izhtRpQv
• Look for the file responsible for your product grid or collection grid. This is usually located in:
• Sections > collection-template.liquid or collection.liquid, or
• Snippets > product-card.liquid or a similar file that controls how products are displayed.

2. Add a "Quick Add" Button Code

• In the file that controls the product listing, locate the code that generates the product title, image, and price. You’ll typically see {{ product.title }} and {{ product.price }} in this section.
• Just below this section, add the code for a "Quick Add" button. This button should ideally link to your product’s form and add the item to the cart with one click. Here’s a sample code you can insert:

<form method="post" action="/cart/add">

  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

  <button type="submit" class="quick-add-button">Quick Add</button>

</form>

This code assumes that each product has at least one variant. Adjust it if you have multiple variants (e.g., sizes or colors) that need to be selected before adding to the cart.

3. Style the "Quick Add" Button

• After adding the HTML for the button, go to your theme.scss.liquid or theme.css.liquid file (found under Assets) and add custom CSS to style the "Quick Add" button. Here’s an example:

.quick-add-button {

  background-color: #000;

  color: #fff;

  padding: 10px 15px;

  font-size: 14px;

  border: none;

  cursor: pointer;

  transition: background-color 0.3s ease;

}

.quick-add-button:hover {

  background-color: #444;

}

• Adjust the colors, padding, and other styles as needed to match your store’s design.

4. Test the Button

• After saving all changes, go to the live site and check your match outfit section.
• Click on the "Quick Add" button to make sure it adds the product directly to the cart.
• Make any adjustments if you encounter errors or if the button doesn’t work as expected.

5. Optional: Add to All Products in a Collection

• If you want this button on all product collections, add the code to the collection template or product listing template that applies across your store.

If you’re not comfortable with editing the code, you could use a Shopify app that adds quick add or quick buy functionality. Many apps in the Shopify App Store provide customizable "Quick Add" features without needing code modifications.

Let me know if you encounter any issues or need further help with specific section.

Daisy