Dawn Theme Quick Add Button Customization

[petandposy]

I have the Dawn theme and I don’t love the clunky look of the quick add buttons under the product cards/featured collections on my website (see attached) and would prefer something smaller/hovers over image or better yet a small cart icon in the corner of the image.

Can someone tell me how I can customize this?

[Sweans]

Hi @petandposy ,

Can you kindly share your store link (with the password protected, if any) with us?

We will check it and suggest you a detailed solution if possible.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[petandposy]

Sure it’s shoppetalandposy.com

[Sweans]

Hi @petandposy ,

Thank you for providing the website URL.
To customize the quick add buttons on your Dawn theme to be smaller, hover over the image, or appear as a small cart icon in the corner of the image, you can follow these steps:

1. Access the Theme Code:

• Go to your Shopify admin panel.
• Navigate to “Online Store” under Sales Channels.
• Click the three dots next to the theme you want to edit, then select “Edit Code”.
  (Refer to screenshot for guidance)

2. Locate the base.css File:

• In the ‘assets’ folder, find or search for the base.css file. (Refer to screenshot)

3. Insert the Code:

• Add the following code to the end of the base.css file:

.card.card--card.card--media {
position: relative;
}
.quick-add {
position: absolute !important;
top: 0;
right: 10px;
}

4. Locate the card-product.liquid File:

• In the ‘snippets’ folder, find or search for the card-product.liquid file. (Refer to screenshot)

5. Insert the code:

• In the card-product.liquid file, find the following code:

(Refer to screenshot)

• Replace the following code:

{{ 'products.product.add_to_cart' | t }}

• With the code of your SVG icon. For example:
  (Refer to screenshot)

6. Save and check for result:

• Save the changes.
• Check your website to see the result. (Refer to screenshot-6)

If you need any further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[petandposy]

Thank you, but how do I find the code for my SVG file?

[petandposy]

I’ve tried with a few SVG codes and no matter what I do the icon doesn’t show? it’s just an empty box.

[petandposy]

Ah ok I got it to work - had to try several different websites for codes. BUT what about when there are variables? Something instead of the giant “choose options” button?

[Sweans]

Hi @petandposy ,

Thank you for your valuable reply.

To change the “Choose option” button, you have to follow the first 4 steps as previously mentioned. Then, do the following:

1. Search for the following code:

{{ 'products.product.choose_options' | t }}

Ensure this code is inside the relevant section (Refer to screenshot).

2. Replace this code:

{{ 'products.product.choose_options' | t }}

With the SVG icon code for the “choose option” button, for example, an eye icon.

For example (Refer to screenshot):

3. Save and check the result (Refer to screenshot)

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[wolverine10]

Hello, this works perfectly! How i can move the button on the right-bottom corner of the image ?