How to change shape of slideshow in Dawn theme

Store Design
, ,

Topic summary

Goal: reshape the Dawn theme slideshow area to an irregular “liquid pool” (or oval) instead of a rectangle. Images were shared to indicate the target area, which are central to understanding.

Key solution proposed:

  • Add CSS in Assets > base.css: .slideshow__text.banner__box { clip-path: polygon(var(--shape--blob-3)); }
  • clip-path is a CSS property that masks an element to a custom shape; here it uses a theme variable for a blob shape.

Outcomes so far:

  • User confirmed the CSS worked at one point.
  • A later attempt showed no change (still rectangular), and the user noted they’re editing an unpublished theme.
  • Another reply asked for the store URL to inspect; one post suggested adding code before in theme.liquid but provided no actual code snippet.

Current status:

  • Partial success; behavior inconsistent across themes/instances, possibly due to working in an unpublished theme or targeting a different element than intended.

Next steps noted in thread:

  • Share the website URL (or accessible preview) for troubleshooting. Issue remains open.
Summarized with AI on December 19. AI used: gpt-5.
3

Hi @thesummeracai ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.slideshow__text.banner__box {
    clip-path: polygon(var(--shape--blob-3));
}