Quick Add Button Design Change (Dawn 9.0.0)

[WholesomeBoy]

Hello,

I am looking for some code to help me customize the "choose options" / "add to cart" quick add button underneath products on the collection pages.

Website: Wholesome Boy

What it looks like now:

 

I would like to change it from the default button style to a simple icon button next to the title, similar to this:

 

Thanks,

Justin

[PageFly-Henry · Accepted solution]

Hi @WholesomeBoy ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag </body>

<style>
.card__content.aos-init.aos-animate {

    display: flex;

}

.quick-add.no-js-hidden {

    visibility: hidden;

    position: relative;

}

.quick-add.no-js-hidden::before {

    content: '';

    visibility: visible;

    width: 20px;

    height: 20px;

    background-image: url("https://cdn-icons-png.flaticon.com/128/7244/7244661.png");

    display: inline-block;

    background-size: cover;

    margin-top: 30px;

pointer-events: none;

}

.card-information {

    text-align: left;

}

h3#title-template--16135796490410__16582996915f1a3385-7610410598570 {}

.card__information {

    text-align: left;

    text-decoration: underline;

}

</style>

Hope this answer helps.

Best regards,

Henry | PageFly

[WholesomeBoy]

Hey Henry,

This is awesome, but a few things...

I want it to be center aligned with the product images

AND

I want the icon to open the same window that the quick add button would of.

Thanks,

Justin

[PageFly-Henry]

About this you need to find a developer so they can fix this issue or contact the theme, they can directly adjust in theme. 

[Nyud]

Hi Henry,

Appreciate your suggestion. This isn't working for me - I'm essentially looking to do the exact same thing (Quick Add button changing to an icon) but on the Homepage Featured Collection section. 

Any guidance is greatly appreciated.

[NomtechSolution]

Certainly! To customize the "Choose Options" / "Add to Cart" quick add button on collection pages in Shopify, you'll need to modify the theme's liquid files. Here's a general guideline to get you started:

1. From your Shopify admin panel, go to "Online Store" and click on "Themes."
2. Locate the theme you're using and click on "Actions" > "Edit code."

Note: It's always recommended to create a backup of your theme before making any changes.

1. In the "Sections" or "Snippets" directory, locate the file that corresponds to the collection page (e.g., collection-template.liquid, collection.liquid, or similar).

2. Look for the code that generates the "Choose Options" / "Add to Cart" button. It will likely be within a loop that outputs the product details.

3. Customize the button's HTML markup and styling to meet your requirements. You can modify the button text, add classes, change the appearance, or incorporate additional functionality. For example, you can use JavaScript/jQuery to enhance the button behavior.

Here's an example of how the modified button code might look:

{% for product in collection.products %}
  <div class="product">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price }}</p>
    
    <!-- Customize the "Choose Options" / "Add to Cart" button -->
    <button class="custom-button" data-product-id="{{ product.id }}">Custom Button Text</button>
  </div>
{% endfor %}