Modify color of quick shop icons

Store Design

Topic summary

A user seeks to modify quick shop icons on their product page from solid white to semi-transparent white.

Solution Provided:

  • Custom CSS code targets .quick-shop__trigger elements
  • Removes background color and box shadows
  • Adds white border (1px solid)
  • Sets icon stroke color to white

Outcome:

  • Solution successfully implemented
  • User confirmed the styling looks as desired
  • Visual reference image included showing the modified appearance
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

hello,

I am looking to change the white quick shop icons/buttons on my product page to be semi transparent white.

site is sipstruck.com

password is “thifli”

many thanks, Michael

2

Hi @M_fenwick

You can use this custom CSS code:

.quick-shop__trigger:before{
    background-color: transparent! important;
    box-shadow: none !important;
    -webkit-box-shadow: none!important;
    border: 1px solid #fff;
}
.quick-shop__trigger .icon.icon--theme svg{
    stroke: #fff!important;
}

1.png
1.png1320×912 215 KB

I hope it’s helpful to you.

1 Like
3

Many thanks! Looks great!