Solved

Put the link inside the button ( Shopify Dawn Theme)

dreamtechzone_5
Shopify Partner
164 1 20

Hello Everyone!

I am using the Shopify Dawn Theme. I want to put the link inside the button. Please help me. Thank you.

Store: https://puppies-paws-shop.myshopify.com/

Password: Admin

PUPPIES-PAWS-–-PUPPIES-PAWS (2).png

Accepted Solutions (3)

Developer-G
Shopify Partner
3069 602 855

This is an accepted solution.

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your section-multicolumn.css file and paste the following code at the bottom:

.multicolumn-card__info .link {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px 10px 20px;
}
.multicolumn-card__info .link:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Developer-G
Shopify Partner
3069 602 855

This is an accepted solution.

remove previous one and use this css 

.multicolumn-card__info .link {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    border: solid 1px;
}
.multicolumn-card__info .link:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}
.multicolumn-card__info .link .icon-wrap {
    display: none !important;
}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Developer-G
Shopify Partner
3069 602 855

This is an accepted solution.

Update the css with this one 

.multicolumn-card__info .link, .card__heading a {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    border: solid 1px;
}
.multicolumn-card__info .link:hover, .card__heading a:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}
.multicolumn-card__info .link .icon-wrap, .card__heading a .icon-wrap{
    display: none !important;
}
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 7 (7)

Developer-G
Shopify Partner
3069 602 855

This is an accepted solution.

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your section-multicolumn.css file and paste the following code at the bottom:

.multicolumn-card__info .link {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px 10px 20px;
}
.multicolumn-card__info .link:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
dreamtechzone_5
Shopify Partner
164 1 20

Thanks, It worked.

I want to remove this arrow.

PUPPIES-PAWS-–-PUPPIES-PAWS (3).png

Developer-G
Shopify Partner
3069 602 855

This is an accepted solution.

remove previous one and use this css 

.multicolumn-card__info .link {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    border: solid 1px;
}
.multicolumn-card__info .link:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}
.multicolumn-card__info .link .icon-wrap {
    display: none !important;
}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
dreamtechzone_5
Shopify Partner
164 1 20

Thank you so much. One more thing, I want to put the link of the collection title in the button too. Also want to remove the Arrow.

Screenshot 2024-02-24 223650.png

Developer-G
Shopify Partner
3069 602 855

This is an accepted solution.

Update the css with this one 

.multicolumn-card__info .link, .card__heading a {
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    border: solid 1px;
}
.multicolumn-card__info .link:hover, .card__heading a:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}
.multicolumn-card__info .link .icon-wrap, .card__heading a .icon-wrap{
    display: none !important;
}
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
dreamtechzone_5
Shopify Partner
164 1 20

It worked but it is a collections list section.

dreamtechzone_5
Shopify Partner
164 1 20

No separate coding is needed to fix the buttons in the collection list section?

And the button size looks bigger in mobile mode. Can it be kept small? Thank you.

Screenshot 2024-02-24 232438.png