Shop Now button on Brooklyn Theme

New Member
3 0 0

Hi! I am trying to move the shop now button a little more to the bottom of my hero picture. I tried a code from a previous forum, but it was out of date lol please help! Thank you in advance :)

0 Likes
Shopify Staff
Shopify Staff
33 0 4

Hi Tiffany!

Parker here from the Guru Team :)

Happy to help you with getting that Shop Now button moved down on the Hero Slider. Before we change anything, let's go to Online Store > Actions > Duplicate
Because it's always good to have a backup!

  1. Let's head over into the code editor! Online Store > Actions > Edit Code
  2. Click on Assets > theme.scss.liquid
  3. Find the code a.hero__cta around line 2282.  Image

There, you'll see margin-bottom is set to 0. Changing this to something like margin-bottom: -300px; will bring it closer to the bottom. Continue to adjust the number to position it exactly where you'd like!

How’s the launch going, Tiffany? Do you need a hand with setting anything up in the backend?
Let me know! :)

1 Like
New Member
3 0 0

yes! it worked! Can you point me in the right direction for the text above it too? I'd like to move that down as well.

Launch is still going, we're working on it! Thanks for asking! :)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
33 0 4

Hello Tiffany!

I'm happy that solution worked for you and that your launch is coming along nicely :) 
In order to move the title and subtitle, it would be just a matter of adjusting the margin-bottom under their respective elements.

As you can see, the .hero__title and the .hero__subtitle are just above the .a.hero__cta we edited last time. Don't forget to go to Online Store > Actions > Duplicate* to backup our working theme first!

Cheers,
Parker

0 Likes
New Member
4 0 0

Hello @Parker, 

I anjoyed reading your reply. Thank you!

By doing so, both mobile and desktop will change. Where can I find the specific code by viewport? 

 

Thank you!

0 Likes
New Member
4 0 0

I actually just spent a bit more time and I found all the @media at the bottom of the page!

There are quite a lot!

0 Likes