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

Store Design

Topic summary

A user seeks help making the ‘Shop Collection’ button transparent on their banner image for both desktop and mobile views. They also want to reposition the button to bottom center on mobile.

Site Details:

Solutions Provided:

Two developers offered CSS code solutions:

  1. niraj_patel’s approach: Add custom CSS to theme.liquid file before the </body> tag to change button background to transparent and adjust mobile positioning

  2. Raj-webdesigner’s approach: Insert CSS into base.css file targeting the banner button with transparent background and absolute positioning

Current Status:
The user tested one solution which successfully made the button transparent but unintentionally changed their custom font. Raj-webdesigner updated their code and asked the user to try the revised version. The issue remains unresolved as the user awaits a solution that achieves transparency without affecting other design elements.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

JasSet_0-1717491159301.png
JasSet_0-1717491159301.png1909×640 175 KB

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

2

can you share you site url?

3

www.gojathelabel.com

password: awusau

4

www.gojathelabel.com

password: awusau

5

Hi @JasSet

Could you share your store URL and password?

6

Hello @JasSet
Can you share you store url?

7

updated in message!

8

See original message!

9

I put them in my post!

10

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 on theme.liquid

@media screen and (max-width: 767px){ .banner__buttons a { background: transparent !important; } }

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.

11

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;
}
}
12

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

13

I update This Code Please again Put.