Change location of Button (Collection Name)

Modestly
New Member
5 0 0

Hi,

I'm wondering how to move the name of collection (Shop Best Sellers) to something like in the screenshot with buttons inside the pictures?

Questions for SHopify.png

I have it like this currently:

Questions for SHopify 1.png

Thanks in Advance!

0 Likes
Pallavi
Shopify Expert
1118 146 178

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Modestly
New Member
5 0 0

Hi Pallavi,

My website is https://modestly-clothing-inc.myshopify.com/ and password is 'glewly'.

0 Likes
Pallavi
Shopify Expert
1118 146 178

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.


.grid__item.medium-up--one-third.text-center a.btn.btn--secondary.btn--small {
position: absolute;
top: 50%;
left: 46%;
}

.grid__item.medium-up--one-third.text-center {
position: relative;
}

Screenshot :- https://prnt.sc/10b2xyi

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Modestly
New Member
5 0 0

Thanks Pallavi!

The button now shows up within the image on mobile but not on desktop. Also, how can I change the button fill color and font color? I am looking to match it the same way as shown in the screenshot

 

0 Likes
Modestly
New Member
5 0 0

I was able to figure out and fix it for mobile view but desktop is still showing at the bottom.

Desktop View:

Modestly_0-1614706140900.png

Mobile View:

Modestly_1-1614706161385.png

Can you help me with one other thing?

I would like the same type of button on the following instead of a link in the middle of the image:

Modestly_0-1614706038402.png

Thanks in advance!

0 Likes
Pallavi
Shopify Expert
1118 146 178

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (min-width:768px){
.grid--flush-bottom .grid__item.medium-up--one-third .btn--secondary {
position: relative;
bottom: 65px;
width: 59%;
background: white;
border: none;
}
}
@media screen and (max-width:767px){
.grid__item.medium-up--one-third.text-center a.btn.btn--secondary.btn--small {
position: relative;
top: -70px;
left: 0;
}
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Modestly
New Member
5 0 0

I input this code but nothing has changed. It remained as is.

0 Likes