How to Add Buttons To Collection Images On Dawn 7.0 Theme

Store Design
, , , , ,

Topic summary

A user wants to add semi-transparent buttons overlaying collection images on their Dawn 7.0 theme homepage, replacing the standard text-below-image layout.

Solution Provided:
Multiple respondents offered CSS code solutions involving:

  • Editing the base.css or theme.css file via Online Store → Edit Code → Assets
  • Adding CSS to position .card__content absolutely within .collection-card-wrapper
  • Styling the button with properties like background color, padding, font size, and centered alignment
  • Setting top positioning (typically 38-42%) to overlay the button on images

Outcome:
The issue was resolved successfully. The original poster confirmed the solution worked perfectly and thanked the contributors. Multiple vendors (MandasaTech, PageFly-Richard, Cedcommerce) provided similar CSS approaches with slight variations in selectors and styling values.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi, On my homepage section I want to add buttons to my collection images rather than the standard text below the image. Additionally, I would like for the button to be semi-transparent so the full product may be viewed. Can this be done?

52c0749dc8283db8fb35aa9bba4d8991.png
52c0749dc8283db8fb35aa9bba4d8991.png1292×586 536 KB

Warmly,

Thank you

KawaiiForUs.com

2

Hello @KawaiiForUs ,

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file.

.collection-card-wrapper .card{
position: relative;
}
.collection-card-wrapper .card__content {
position: absolute;
top: 42%;
}
.collection-card-wrapper .card__heading {
text-align: center;
background-color: rgb(253 247 247 / 50%);
max-width: 309px;
font-size: 22px;
font-weight: bold;
margin: auto;
padding: 10px 15px;
}

1 Like
3

Hi @KawaiiForUs .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code and add this code on file base.css

.collection-card-wrapper .card__content{
position: absolute !important;
top: 40% !important;
}
.card__heading {
text-align: center;
background: beige;
width: 350px;
}
.card__information{
display: flex;
justify-content: center;
}

Hope this answer helps.

Best regards,

Richard | PageFly

1 Like
4

This is perfect! Thank you very much!!!

1 Like
5

Thank you kindly!

6

Hi @KawaiiForUs ,

You’re most welcome! :blush:

I’m really glad to hear that.

7

Hello @KawaiiForUs ,

This issue can be fixed with the help of a custom code. You can add the below code at the end of your theme.css file and check if this resolves your issue.

Find the code below.

.collection-list-wrapper .card__content {

position: absolute;

top: 38%;

}

.collection-list-wrapper .card–media{

position: relative;

}

.collection-list-wrapper .card__heading {

text-align: center;

background-color: #e7dfdf42;

max-width: 309px;

font-size: 22px;

margin: auto;

padding: 10px 15px;

}

Hope this helps, let us know if you need any further assistance.

All the best,

CedCommerce