Changing shipping selection widget design (UI) in cart view.

Created by Erik, Modified on Wed, 01 Sep 2021 at 10:26 AM by Erik

It is possible to change the shipping selection widget UI, but we would recommend asking for help from a Shopify expert or your developer if you are not one yourself. 


Depending on your template you should make needed CSS changes theme.scss.liquid or styles.scss.liquid or other files. 


Here is an example of changes made to Brooklyn theme files. As Brooklyn is using theme.scss.liquid file then the following changes were made to it. 



/*================ Parcely app ================*/
[class=”prs-cart__delivery-item active”] {
border: 3px solid #000000 !important;
background-color: #fc0;
color: black;
}

[class=”prs-cart__delivery-item  active”] {
border: 3px solid #000000 !important;
background-color: #fc0;
color: black;

}
[class=”prs-cart__delivery-item “] {
border-color: #fff9f9 !important;
background-color: #fff9f9;
color: black;

}
[class=”prs-cart__delivery-item”] {
border-color: #fff9f9 !important;
background-color: #fff9f9;
color: black;

}
[class=”prs-cart__banner-item active”] {
border: 3px solid #000000 !important;
background-color: #fc0;
color: black; } [class=”prs-cart__banner-item”] { border-color: #fff9f9 !important; background-color: #fff9f9; color: black; } [class=”prs-cart__radios”] { border-color: #fff9f9 !important; background-color: #fff9f9; color: black; }

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article