Moving the CTA button Shop now

Solved
dmwwebartisan
Shopify Partner
9165 2124 2891

@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 →
0 Likes
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 

0 Likes
dmwwebartisan
Shopify Partner
9165 2124 2891

@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 →
0 Likes
GMco
Tourist
5 0 3

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

Thanks!

0 Likes
Grab_The_Brand
New Member
2 0 1

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
9165 2124 2891

@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 →
0 Likes
Grab_The_Brand
New Member
2 0 1
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.
0 Likes