Help! Change Position of Shop Now button on banner

Highlighted
Tourist
10 0 2

Hi 

I am using Brooklyn theme that has a hero slideshow on the home page. There is a 'Shop Now' call to action button right at the center which is right now interfering with the banners I am using. 

Is there any way to move the position of the CTA button? If yes, I can share a picture of where I want the CTA button to be...

0 Likes
Highlighted
Shopify Staff
Shopify Staff
45 0 12

Hi Sq_peg,

From your store admin, go to Online Store > Themes > click "..." button > Edit HTML/CSS. Open theme.scss.liquid in the Assets folder. Use CMD+F or CTRL+F to search .hero__slide a.hero__cta

There, you'll see margin-bottom is set to 0. You can change this to something like margin-bottom: -240px; to bring it closer to the bottom. You can adjust the number to position it exactly where you like. :)

All the best!
Justin

Highlighted
Tourist
10 0 2

Hey! Thanks SO MUCH. I was able to move it to the bottom. Any idea how I can move it to the right corner too? And I would also like to change the font on the text of the button, is that possible?

0 Likes
Highlighted
Tourist
10 0 2

Hi Justin,

I added margin-right: -800px and was able to move it to right bottom. Yay!! :) I just need some help with the font now. Right now the text is all in capitals and not consistent with the banner... 

Thanks,

Gunjan

0 Likes
Highlighted
New Member
3 0 0

Hi there!

I would like to change the "shop" button position for the mobile website. I was able to do it for the desktop version but the mobile version still has the shop button centered. Does any one know how to do it?

Thanks

0 Likes
Highlighted
Shopify Partner
67 0 7

Hi Rafaela,

There is an error in your code. 

.hero__slide a.hero__cta {
    margin-bottom: 10;
}

margin-bottom needs a number followed by a unit (e.g. 100px or 10% or 1em etc..)

Regards

AM

0 Likes
Highlighted
Tourist
7 0 1

Hi Justin, I tried to search for " .hero__slide a.hero__cta"  in  theme.scss.liquid  as you directed, but nothing came up.  Any idea why this is the case?

0 Likes
Highlighted
Astronaut
1890 1 442

@Christopher Lai -- Try searching for just "a.hero__cta".  You should find multiple instances.  I think you're looking for the section that looks like:

/*================ Extra specificity to override Timber defaults ================*/
.hero__slide {
  .hero__title {
    margin-bottom: 20px;
    line-height: 1.25;
  }

  .hero__subtitle {
    @include accentFontStack;
    margin-bottom: 15px;
  }

  a.hero__cta {
    margin-bottom: 0;
  }
}

 

0 Likes
Highlighted
New Member
3 0 0

Hi there

 

is there anyone knows how to size down the shop now button for tablets and mobiles? the button is not seen on smaller devices when you  move the buton from center. please help. 

0 Likes
Highlighted
Shopify Partner
2 0 0

I'm trying to do something similiar. Except I am using the Ella theme from Theme Forest. I have played with all of the given designs to try to get what I want but it's not working. I basically need 1 of 3 options.

1. Make the "page break" or Line that divides the sections, with text in it be a part of another section.

2. Change the orientation of the "Shop Now" button on the block banner homepage.

3. #1 but then also need an image and youtube video beside each other. The video with a linkable button so I can add "Subscribe" and "Shop Now" under the image.

I am complicated I know. But I know how I want it to look but I dont really know how to explain it - so I hope this makes sense.

0 Likes