Moving the CTA button Shop now

Solved
Asifkhan
Excursionist
18 0 5

Hello,

I am using the debut theme. In a slideshow, I would want to move the Shop now button on the bottom left of the slideshow image and not in the middle of the image only on desktop view. I want it to remain unchanged on mobile view.

Image for reference- https://ibb.co/WnpHKDY

Thank you!

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
10710 2339 3326

This is an accepted solution.

@Asifkhan 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 750px) {
.slideshow__btn-wrapper {
    border: none;
    background-color: transparent;
    top: -144px;
    position: relative;
    text-align: center;
    display: inline;
    justify-content: center;
    margin: 0 auto;
    margin-right: -600px;
}
}

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 17 (17)
dmwwebartisan
Shopify Partner
10710 2339 3326

@Asifkhan 

Please share your webshop URL

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Asifkhan
Excursionist
18 0 5

@dmwwebartisan 

Hi, please find the shop URL below

URL- phone-space-in.myshopify.com

Password- qwerty

dmwwebartisan
Shopify Partner
10710 2339 3326

This is an accepted solution.

@Asifkhan 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 750px) {
.slideshow__btn-wrapper {
    border: none;
    background-color: transparent;
    top: -144px;
    position: relative;
    text-align: center;
    display: inline;
    justify-content: center;
    margin: 0 auto;
    margin-right: -600px;
}
}

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Asifkhan
Excursionist
18 0 5

Thank you so much! @dmwwebartisan 

Kroppi
New Member
1 0 1

Hello,

Currently i am facing identical issue. I need to move CTA button to the bottom of the banner.

 

Web- www.ailin.lt

 

Could you please help me. Thank you!

20210707_212756.jpg

dmwwebartisan
Shopify Partner
10710 2339 3326

@Kroppi 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
.hero__inner{
position: absolute !important;
top: 80%;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Ailin
Tourist
4 0 4

Hi,

It doesn't work.

I have dublicated theme, tried to copy paste it on theme.css. Nothing.

Could you suggest another code?

URL - www.ailin.lt

dmwwebartisan
Shopify Partner
10710 2339 3326

@Ailin 

Are you sure. I just tried with inspect element and it worked on mobile.

Please check below.

button-below.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Ailin
Tourist
4 0 4

Okay, on mobile it worked out, but on desktop version not. Do you know why?

dmwwebartisan
Shopify Partner
10710 2339 3326

@Ailin 

Do you want that button at the bottom of the desktop as well?

I thought you want this only for mobile as per your given screenshot.

Let me know.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Ailin
Tourist
4 0 4

Sorry for the misunderstanding. Yes, i would like to move this button on the desktop version as well. Thanks 🙂

GMco
Tourist
5 0 3

Running Debut Theme - I have also been trying to find a solution to move the Heading, Subheading and CTA button to the BOTTOM LEFT corner of the image in the Slideshow option on my Homepage.Any help would be greatly appreciated.

https://gratefulmerchantco.com 

dmwwebartisan
Shopify Partner
10710 2339 3326

@Ailin 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 750px){
#shopify-section-hero-2 .hero__inner{
    position: absolute !important;
	top: 89%;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
GMco
Tourist
5 0 3

I just tried this and it did not work. Any other ideas?

Thanks!

Grab_The_Brand
Tourist
9 0 2

I would also like to move the Shop Now button on the homepage. 

1AC433B3-DC8C-440C-B87E-5FE2A531001F.jpeg

On mobile it looks like this but I want the shop now button and “all products” to be on top of the slide show in the middle and smaller text. This will save a lot of space on the homepage. How do I do this please?

My website URL is https://grabthebrand.co.uk

dmwwebartisan
Shopify Partner
10710 2339 3326

@Grab_The_Brand 

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 (max-width: 768px){
.hero__adapt-text-wrap {
    color: #1f2021;
    position: absolute !important;
    top: 150px !important;
    text-align: center  !important;
    color: #fff  !important;
   width:100% !important;
}
}

 

 Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Grab_The_Brand
Tourist
9 0 2
Thank you so much for the help it's worked. Do you know how to change the featured collection on the home page on mobile so that it only shows a few items then you can press a 'view all' button to view the rest of the collection? It's currently showing the full collection on the homepage which is too long. Would be good to have two items in a row next to each other and maybe show 6 products. Also, do you know how to make the products on mobile be side by side. So showing 2 items next to each other in a row when viewing items so customers can see products quicker. Really appreciate your time helping the community it really helps as I am terrible with technology.