Dwell Theme: Always Show Your "Quick Add" Button (No More Hover!)

Making Your "Quick Add" Button a Permanent Fixture on Your Shopify Dwell Theme

Hey everyone! So, I was browsing the Shopify Community the other day, and I saw a really interesting question from a store owner, Bmac87, using the Dwell theme. They wanted to know how to make the "Quick Add" button always visible on their product cards, instead of only showing up when you hover over the image. It's a great question because that little bit of extra visibility can really boost conversions!

Think about it: customers are scrolling through your products, and a clear "Quick Add" button instantly invites them to, well, quickly add the item to their cart. No hover, no delay, just straight to purchase potential. Let's dive into the solutions the community offered.

The CSS Snippet Solution

Dan from Ryviu jumped in with a straightforward CSS solution. He suggested adding the following code to the "Custom CSS" section in your Theme settings. Here's the code:

.quick-add__button {
    opacity: 1 !important;
}

Here's a screenshot Dan shared to show where to add the CSS:

Essentially, this CSS code forces the "Quick Add" button to always have an opacity of 1, meaning it's fully visible. The !important tag ensures that this rule overrides any other conflicting styles in the theme.

Alternative: Editing the base.css File

Shadab_dev proposed a slightly different approach, suggesting to add the following CSS at the very bottom of the base.css file in your theme's code editor:

product-card-link .product-card .quick-add__button{

  opacity: 1;

}

This code targets the "Quick Add" button more specifically within the product card structure. Shadab_dev also wisely cautioned to keep a note of this change, as theme updates might potentially overwrite it. It's always a good idea to keep track of any code customizations you make!

A Note on Theme Families

tim_1 added a helpful piece of context: The Dwell theme is part of the Horizon family of themes. This means that solutions that work for Horizon, Vessel, Atelier, etc., might also work for Dwell. He even linked to another thread discussing a similar issue with the Horizon theme. It's a great reminder that sometimes the answer to your question might already exist in a slightly different context!

Putting it All Together: How to Make Your "Quick Add" Button Always Visible

Okay, so here's a step-by-step guide to making that "Quick Add" button permanently visible on your Dwell theme (or any of its Horizon family cousins!). I recommend starting with the Custom CSS approach, as it's generally the easiest and safest.

1. Go to your Shopify Admin: Log in to your Shopify store.
2. Navigate to Themes: Click on "Online Store" then "Themes."
3. Customize Your Theme: Find the Dwell theme and click on "Customize."
4. Access Custom CSS: Look for a "Theme settings" or "Custom CSS" section (it might be under "Edit code").
5. Add the CSS Code: Paste the following code into the Custom CSS area:

   .quick-add__button {
       opacity: 1 !important;
   }
   

6. Save Your Changes: Click "Save" to apply the changes.
7. Check Your Store: Visit your store and see if the "Quick Add" button is now always visible on your product cards.

If the Custom CSS approach doesn't work, or if you prefer to edit the theme files directly, you can try the second solution:

1. Go to your Shopify Admin: Log in to your Shopify store.
2. Navigate to Themes: Click on "Online Store" then "Themes."
3. Edit Code: Click the "..." button and select "Edit code."
4. Find base.css: In the "Assets" folder, locate the base.css file.
5. Add the CSS Code: Scroll to the very bottom of the file and paste the following code:

   product-card-link .product-card .quick-add__button{
   
     opacity: 1;
   
   }
   

6. Save Your Changes: Click "Save" to apply the changes.
7. Check Your Store: Visit your store and see if the "Quick Add" button is now always visible on your product cards.

Remember to back up your theme before making any code changes, just in case anything goes wrong. You can do this by duplicating the theme.

And that's it! By implementing one of these solutions, you can make your "Quick Add" button a permanent fixture on your Dwell theme, potentially leading to a better shopping experience and increased sales. It’s awesome how the community comes together to help each other out, right?