Taste theme: How do i get the text and shop now button to appear in the image?

Store Design

Topic summary

A user seeks help displaying text and a “Shop Now” button over slider images in the Taste theme, and wants to remove a yellow section appearing after the slider on mobile view.

Two solutions provided:

  1. Settings adjustment: Uncheck specific options in the Image banner or Slideshow settings (screenshot provided showing the relevant checkboxes)

  2. CSS code solution: Add custom CSS to section-image-banner.css file:

    • Navigate to: Online Store → Themes → Actions → Edit Code → Assets → section-image-banner.css
    • Insert provided media query code at the end of the file to adjust mobile banner padding and margins
    • Code targets screens under 749px width

The CSS solution includes a before/after screenshot demonstrating the result. Both approaches aim to resolve the mobile display issues with the banner elements.

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

I also would like to delete the yellow section that comes after the slider image, this is for mobile view. Thanks in advance!

Screenshot 2024-10-15 at 11.59.34 AM.png
Screenshot 2024-10-15 at 11.59.34 AM.png754×1210 340 KB

2

Hi @lisanchem

You can do that by unchecking those options based on Image banner or Slideshow

Screenshot 2024-10-15 at 11.07.11.png
Screenshot 2024-10-15 at 11.07.11.png3748×1704 543 KB

Screenshot 2024-10-15 at 11.07.42.png
Screenshot 2024-10-15 at 11.07.42.png3736×1380 418 KB

3

Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-image-banner.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.banner__box > :first-child {
  margin-top: -16rem !important;
}
.banner--mobile-bottom .banner__box {
  padding: 19px 80px;
}
}

result

1.png
1.png553×680 243 KB

If this was helpful, hit the like button and accept the solution.
Thanks