How can I make a product button transparent on the main page?

Store Design
1

I want to make product buttom only have a white board, no color inside (transparent) in main page(gallery). What should I do? Thanks

https://phantomgogo.com/

1 Like
2

Hi @Kathy518 ,

Thank you for providing your website. Can you explain which part of the website do you want the color to be transparent?

3

Hi,

I want to make the gallery bottom become transparent and get a white frame. Thanks

4

Hi @Kathy518

Sorry, I still don’t understand. Is the footer section is what you mean?

made4Uo_0-1679357886400.png
made4Uo_0-1679357886400.png1896×953 135 KB

5

No, it’s only gallery part.

截屏2023-03-20 下午5.19.27.png
截屏2023-03-20 下午5.19.27.png1811×639 88.8 KB

6

Hi @Kathy518 ,

I think you mean the button? If so, please follow the instructions below

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the styles.css file
  3. Add the code below at the very end of the file
span.overlay-text__button.btn.btn--primary {
    background: transparent;
    outline: 1px solid #ffff;
}

See result here:

made4Uo_0-1679358243426.png
made4Uo_0-1679358243426.png1896×976 164 KB

7

It works! How about also in main page slideshow bottom?

截屏2023-03-20 下午5.30.18.png
截屏2023-03-20 下午5.30.18.png689×428 222 KB

1 Like
8

Hi @Kathy518 ,

Please add the code below to adjust the main banner buttons

  1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
  2. Find the Asset folder, and open the styles.css file
  3. Add the code below at the very end of the file
.slide a.overlay-text__button.button.altcolour {
    background: transparent;
    outline: 1px solid #fff;
    color: #fff;
}
9

Thanks a lot!!