Quick Add Button Design Change (Dawn 9.0.0)

Store Design
, , , ,
1

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:

531338b1d106d32f3a0d3d7245bb4327.png
531338b1d106d32f3a0d3d7245bb4327.png628×185 4.93 KB

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

e0940339971fa0a06ccbe248a70880fe.png

Thanks,

Justin

2

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

PageFlyHenry_0-1684840210249.png
PageFlyHenry_0-1684840210249.png1600×794 139 KB

PageFlyHenry_1-1684840210253.png
PageFlyHenry_1-1684840210253.png1600×777 197 KB

Hope this answer helps.

Best regards,

Henry | PageFly

1 Like
3

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 %}
  
    ### {{ product.title }}
    

{{ product.price }}

    
    
    
  

{% endfor %}
4

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

5

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

6

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.