How can I reposition the Shop Now button on the Brooklyn theme slide show?

Aakanksha88
Tourist
6 0 1

Hi, 

 

I use the Brooklyn theme, and on the Slides, there is a Shop Now button; please check it here https://www.lashfactor.com/. I want to move it to the bottom of the slide show, not on the slides. It sits nicely on the Mobile but not on the Desktop. Please help.

 

Thanks

Akanksha

Replies 5 (5)

DelightCart
Shopify Partner
1238 82 157

@Aakanksha88 Go to assets/theme.css and paste below css at bottom of file.

 

.hero__slide a.hero__cta, .hero--adapt a.hero__cta
{
margin-top: 520px;
}
Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.

Aakanksha88
Tourist
6 0 1
Hi,

The solution wasn’t that helpful. As when I used the code, for the desktop version the mobile version CTA goes way down.

They aren’t in conjunction. Second, I want CTA button to come right below the slide show not within the slide itself.

I want it exactly, the way it appears on the mobile phone.

Let me know.

Thanks
Akanksha

iCart_App
Shopify Partner
479 57 103

Hello @Aakanksha88!
Hope you are doing well.

Please remove this CSS from theme.scss.css theme file:

@media screen and (min-width: 769px){
.hero__adapt-text-wrap {
    display: none!important;
}
}


And add 0 opacity to this Class (.slick-initialized .hero__text-content) in theme.scss.css theme file:

.slick-initialized .hero__text-content {
    opacity: 0;
}

 

Hope this will help you out.

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
Aakanksha88
Tourist
6 0 1

Thank you so much. This worked. Finally!!!

PageFly-Victor
Shopify Partner
7865 1785 3058

Hi @Aakanksha88

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

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

-Asset-> theme.scss  paste the below code at the bottom of the file.

#shopify-section-slideshow #HeroWrapper-slideshow .hero__adapt-text-wrap.wrapper{

display:block !important

}

#shopify-section-slideshow #HeroWrapper-slideshow .hero-slideshow .hero__slide .hero__text-wrap{

    display:none !important

}

   

Best Regards;

PageFly