Solved

Craft - How to make the button on banner image transparant?

JasSet
New Member
7 0 0

JasSet_0-1717491159301.png

Hi, 

 

I want the 'shop collection' button to be transparant (desktop and mobile) and ideally also move the button to the bottom centre (on mobile). How can I do this?

 

Using Craft theme.

 

URL: www.gojathelabel.com

password: awusau

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
268 60 65

This is an accepted solution.

Add This css in your edit code > base.css File

 

@media screen and (max-width:750px){
.banner .banner__box.content-container.content-container--full-width-mobile.color-scheme-2.gradient {
    position: absolute;
    bottom: 0;
}


/*If you want to keep the button like that then delete the below code*/
.banner a.button.button--primary {
    background: transparent;
}
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 12 (12)

Raj-webdesigner
Shopify Partner
268 60 65

can you share you site url?

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


JasSet
New Member
7 0 0

www.gojathelabel.com

password: awusau

JasSet
New Member
7 0 0

www.gojathelabel.com

password: awusau

JasSet
New Member
7 0 0

updated in message!

Raj-webdesigner
Shopify Partner
268 60 65

This is an accepted solution.

Add This css in your edit code > base.css File

 

@media screen and (max-width:750px){
.banner .banner__box.content-container.content-container--full-width-mobile.color-scheme-2.gradient {
    position: absolute;
    bottom: 0;
}


/*If you want to keep the button like that then delete the below code*/
.banner a.button.button--primary {
    background: transparent;
}
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Raj-webdesigner
Shopify Partner
268 60 65

I update This Code Please again Put.

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Dan-From-Ryviu
Shopify Partner
7892 1533 1562

Hi @JasSet 

Could you share your store URL and password?

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

JasSet
New Member
7 0 0

See original message!

techlyser_web
Shopify Partner
1611 299 322

Hello @JasSet 
Can you share you store url?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
JasSet
New Member
7 0 0

I put them in my post!

techlyser_web
Shopify Partner
1611 299 322

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
 .banner__buttons a {
      background: transparent !important;
  }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

you can change position of button through the customizer.

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
JasSet
New Member
7 0 0

Hi, this did help with the transparancy but it did change my custom font.