> For the complete documentation index, see [llms.txt](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/developer-reference/code-flow-and-customisation.md).

# Shopify Code Flow and Customisation

The following data is provided to assist developers that want to customise The Wishlist Shopify App standard workflows. Please take care when customising existing flows, as we cannot guarantee outcomes, and creating and fixing custom workflows is not included in our standard support offering.

Also, our code is constantly being updated, and we cannot guarantee that the specific code shown below has not been changed or upgraded. Please use this information as a guide only.

## App Installation

After installing, 2 new pages are automatically created:

## Sample wishlist page code

```
<style><!--
    @charset "UTF-8";
    body {
        background-color: #eeee;
    }

    @keyframes modal_show {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }
    @keyframes modal_hide {
        0% {
            opacity: 1;
            transform: translateY(0px);
        }
        100% {
            opacity: 0;
            transform: translateY(-40px);
        }
    }
    @keyframes loadingCircle {
        100% {
            transform: rotate(1turn);
        }
    }
    @-webkit-keyframes fadeinLeft {
        from {
            left: -100px;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }
    @keyframes fadeinLeft {
        from {
            left: -100px;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }
    @-webkit-keyframes fadeoutLeft {
        from {
            left: 0;
            opacity: 1;
        }
        to {
            left: -100px;
            opacity: 0;
        }
    }
    @keyframes fadeoutLeft {
        from {
            left: 0;
            opacity: 1;
        }
        to {
            left: -100px;
            opacity: 0;
        }
    }
    @-webkit-keyframes wlFadeinRight {
        from {
            right: -100px;
            opacity: 0;
        }
        to {
            right: 0;
            opacity: 1;
        }
    }
    @keyframes wlFadeinRight {
        from {
            right: -100px;
            opacity: 0;
        }
        to {
            right: 0;
            opacity: 1;
        }
    }
    @-webkit-keyframes wlFadeoutRight {
        from {
            right: 0;
            opacity: 1;
        }
        to {
            right: -100px;
            opacity: 0;
        }
    }
    @keyframes wlFadeoutRight {
        from {
            right: 0;
            opacity: 1;
        }
        to {
            right: -100px;
            opacity: 0;
        }
    }
    @-webkit-keyframes wlFadeInOutRight {
        0% {
            opacity: 0;
            right: -100px;
        }
        10% {
            opacity: 1;
            right: 0;
        }
        90% {
            opacity: 1;
            right: 0;
        }
        100% {
            opacity: 0;
            right: -100px;
        }
    }
    @keyframes wlFadeInOutRight {
        0% {
            opacity: 0;
            right: -100px;
        }
        10% {
            opacity: 1;
            right: 0;
        }
        90% {
            opacity: 1;
            right: 0;
        }
        100% {
            opacity: 0;
            right: -100px;
        }
    }
    .ucwl-osc-css * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        outline: none;
    }
    .ucwl-osc-css *::-webkit-scrollbar-track {
        /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
        background-color: white;
    }
    .ucwl-osc-css *::-webkit-scrollbar {
        width: 5px;
        background-color: white;
        height: 5px;
    }
    .ucwl-osc-css *::-webkit-scrollbar-thumb {
        background-color: black;
    }

    .ucwl-osc-css.page-container {
        background-color: white;
        min-height: 80vh;
        padding: 33px;
        overflow: hidden;
    }
    @media (max-width: 576px) {
        .ucwl-osc-css.page-container {
            padding: 24px 18px;
        }
    }
    .ucwl-osc-css .d-none {
        display: none;
    }
    .ucwl-osc-css .container {
        margin: 24px;
        padding: 24px;
    }
    .ucwl-osc-css .p-24 {
        padding: 24px;
    }
    .ucwl-osc-css .p-15 {
        padding: 15px;
    }
    .ucwl-osc-css .pr-0 {
        padding-right: 0;
    }
    .ucwl-osc-css .m-24 {
        margin: 24px;
    }
    .ucwl-osc-css .w-200 {
        width: 200px;
    }
    .ucwl-osc-css .ml-24 {
        margin-left: 24px;
    }
    .ucwl-osc-css .p-12 {
        padding: 12px;
    }
    .ucwl-osc-css .m-12 {
        margin: 12px;
    }
    .ucwl-osc-css .d-flex {
        display: flex;
    }
    .ucwl-osc-css .space-between {
        justify-content: space-between;
    }
    .ucwl-osc-css .justify-center {
        justify-content: center;
    }
    .ucwl-osc-css .align-center {
        align-items: center;
    }
    .ucwl-osc-css .vertical-align {
        line-height: 1;
        vertical-align: middle;
    }
    .ucwl-osc-css .h-48 {
        line-height: 48px;
    }
    .ucwl-osc-css .w-fc {
        min-width: fit-content;
    }
    .ucwl-osc-css .fd-c {
        flex-direction: column;
    }
    .ucwl-osc-css .ai-c {
        align-items: center;
    }
    .ucwl-osc-css .jc-sb {
        justify-content: space-between;
    }
    .ucwl-osc-css .jc-fe {
        justify-content: flex-end;
    }
    .ucwl-osc-css .jc-c {
        justify-content: center;
    }
    .ucwl-osc-css .df-1 {
        flex: 1;
    }

    .osc-css.btn-view {
        cursor: pointer;
    }
    .osc-css.toast {
        width: 250px;
        position: fixed;
        background-color: white;
        border-radius: 2px;
        z-index: 9999;
        visibility: hidden;
        max-height: 100px;
        overflow: hidden;
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
        margin-bottom: 0.5rem;
    }
    .osc-css.toast.showLeft {
        visibility: visible;
        -webkit-animation: fadeinLeft 0.5s, fadeoutLeft 0.5s 2.5s;
        animation: fadeinLeft 0.5s, fadeoutLeft 0.5s 2.5s;
    }
    .osc-css.toast.showRight {
        visibility: visible;
        animation-name: wlFadeInOutRight; /* name of the keyframes */
        animation-duration: 3s; /* total duration of the animation */
        animation-timing-function: ease-in-out; /* smooth acceleration and deceleration */
        animation-iteration-count: 1; /* run the animation once */
        animation-delay: 0s; /* Delay the animation by 1 second */
    }
    .osc-css.toast .toast__title-container {
        display: flex;
        padding: 0.8rem;
    }
    .osc-css.toast .toast__title-container .content__title {
        margin: 0;
    }
    .osc-css.toast .toast__title-container .title__content {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .osc-css.toast .toast__title-container .title__content .content__logo {
        display: inline-block;
        margin-right: 5px;
    }
    .osc-css.toast .toast__title-container .title__content .content__title {
        display: inline-block;
    }
    .osc-css.toast .toast__title-container .title__btn-close:hover, .osc-css.toast .toast__title-container .title__btn-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .osc-css.toast .toast__body {
        background-color: white;
        padding: 10px;
    }
    .osc-css.toast .toast__body .body__product-detail {
        flex: 1;
    }
    .osc-css.toast .toast__body .body__product-image {
        width: 96px;
    }
    .osc-css.toast .toast__body .body__product-image > img {
        width: 100%;
    }
    .osc-css.toast__title-container .title__btn-close {
        color: #aaaaaa;
        font-size: 28px;
        font-weight: bold;
    }

    .ucwl-osc-css .container--share-and-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ucwl-osc-css .container--share-and-search .search-container input {
        padding: 5px 30px 5px 8px;
        width: 200px;
        font-size: 12px;
        color: black;
        border: 1px solid #d6d6d6;
        border-radius: 2px;
        /*search icon*/
        background-color: transparent;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 18px 18px;
        background-position: 97% center;
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }
    @media (max-width: 576px) {
        .ucwl-osc-css .container--share-and-search {
            display: block;
            padding: 10px 0;
        }
        .ucwl-osc-css .container--share-and-search .search-container {
            justify-content: flex-start;
            margin-top: 10px;
        }
    }

    .ucwl-osc-css .container--wishlist-tab-and-action {
        display: flex;
        justify-content: space-between;
    }
    .ucwl-osc-css .wishlist-item {
        padding: 0;
        font-size: 14px;
        min-width: fit-content;
        color: #9d9b9b;
    }
    .ucwl-osc-css .wishlist-item.wishlist-tab__selected-wishlist {
        color: black;
    }
    .ucwl-osc-css .hide-button {
        border: none;
        background: none;
        height: 100%;
    }
    .ucwl-osc-css .share-button {
        border: 1px solid black;
        font-size: 12px;
        background: white;
        padding: 5px 10px;
        line-height: normal;
    }
    .ucwl-osc-css .icon {
        width: 25px;
        cursor: pointer;
        margin-left: 12px;
        margin-top: 12px;
    }
    .ucwl-osc-css .btn-wishlist {
        cursor: pointer;
    }
    .ucwl-osc-css .btn-wishlist:focus, .ucwl-osc-css .btn-wishlist:hover {
        cursor: pointer;
    }
    .ucwl-osc-css .share {
        min-width: fit-content;
        cursor: pointer;
    }
    .ucwl-osc-css .wishlist-tab {
        height: fit-content;
        vertical-align: baseline;
        /*overflow: hidden;*/
        overflow: auto;
        width: 100%;
    }
    .ucwl-osc-css .wishlist-tab:hover {
        overflow: auto;
        overflow-y: hidden;
    }
    .ucwl-osc-css .wishlist-tab:hover::-webkit-scrollbar-thumb {
        background-color: #000;
    }
    .ucwl-osc-css .wishlist-tab .wishlist-item:not(:last-child) {
        margin-right: 43px;
    }
    .ucwl-osc-css .container__wishlist-action {
        overflow: auto;
        overflow-y: hidden;
    }
    .ucwl-osc-css .container__wishlist-action .container__create-wishlist,
    .ucwl-osc-css .container__wishlist-action .container__wishlist-action-edit,
    .ucwl-osc-css .container__wishlist-action .container__wishlist-action-delete {
        height: fit-content;
    }
    .ucwl-osc-css .container__wishlist-action button {
        color: #707070;
        font-size: 12px;
    }
    .ucwl-osc-css .container__wishlist-action .icon {
        margin-top: 0;
        width: 12px;
        height: 1.5em;
    }
    @media (max-width: 576px) {
        .ucwl-osc-css .container--wishlist-tab-and-action {
            display: block;
        }
        .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action {
            justify-content: flex-start;
            margin-top: 10px;
        }
        .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action button {
            margin-left: 0;
            margin-right: 12px;
        }
        .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action .icon {
            margin-left: 0;
        }
    }

    .osc-css.modal-root {
        display: none;
    }
    .osc-css.modal-root.open {
        display: block;
    }
    .osc-css.modal__share .icon {
        margin: 0 6px 0 0;
        width: unset;
        height: unset;
    }
    .osc-css.modal__share .btn-copy {
        display: flex;
        align-items: center;
        border: 0;
        background: white;
        cursor: pointer;
        font-size: 12px;
    }
    .osc-css .icon {
        width: 25px;
        cursor: pointer;
        margin: 0 0 0 12px;
    }
    .osc-css .uc-btn {
        border: 1px solid black;
        padding: 6px;
        background: white;
        cursor: pointer;
    }
    .osc-css .input__checkbox {
        display: none;
    }
    .osc-css .input__checkbox:checked ~ .container__checkbox {
        background-color: black;
    }
    .osc-css .container__checkbox {
        margin: 0 10px 0 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #dad1d1;
        display: inline-block;
    }
    .osc-css .modal-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        outline: 0;
        z-index: 1000;
    }
    .osc-css .modal-mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.45);
    }
    .osc-css .modal-loading {
        position: absolute;
        background: rgba(0, 0, 0, 0.1);
        z-index: 1001;
        width: 100%;
        height: 100%;
        display: none;
    }
    .osc-css .modal-loading.open {
        display: block;
    }
    .osc-css .loading-container {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .osc-css .modal-document {
        width: 512px;
        top: 100px;
        position: relative;
        margin: 0 auto;
    }
    .osc-css .modal-document.open {
        animation: modal_show 500ms linear;
    }
    .osc-css .modal-document.close {
        animation: modal_hide 500ms linear;
    }
    .osc-css .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        padding: 0;
        color: rgba(0, 0, 0, 0.45);
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        background: 0 0;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: color 0.3s;
    }
    .osc-css .modal-close:hover {
        color: rgba(0, 0, 0, 0.75);
    }
    .osc-css .modal-close > .modal-close-x {
        display: block;
        width: 56px;
        height: 56px;
        font-size: 16px;
        font-style: normal;
        line-height: 56px;
        text-align: center;
        text-transform: none;
        text-rendering: auto;
    }
    .osc-css .modal-content {
        position: relative;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        pointer-events: auto;
    }
    .osc-css .modal-content > .modal-header {
        padding: 16px 24px;
        color: rgba(0, 0, 0, 0.85);
        background: #fff;
        border-radius: 2px 2px 0 0;
    }
    .osc-css .modal-content > .modal-body {
        padding: 0 24px;
        font-size: 14px;
        line-height: 1.5715;
        max-height: 350px;
        overflow: visible;
    }
    .osc-css .modal-content > .modal-body label {
        flex: 1;
        overflow-wrap: break-word;
        padding: 5px;
        font-weight: bold;
    }
    .osc-css .modal-content > .modal-body input {
        width: 100%;
        padding: 4px 10px;
        max-width: 300px;
        font-size: 12px;
    }
    .osc-css .modal-content > .modal-footer {
        padding: 10px 16px;
        text-align: right;
        background: 0 0;
        border-radius: 0 0 2px 2px;
    }
    .osc-css .modal-header > .modal-title {
        margin: 0;
        color: black;
        font-size: 14px;
        line-height: 22px;
        width: 90%;
    }
    .osc-css .modal-body .modal__title {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #d8d8d8;
        padding-bottom: 6px;
        margin-bottom: 18px;
    }
    .osc-css .modal-footer button {
        margin-left: 12px;
        font-size: 12px;
        text-transform: uppercase;
        border: none;
        text-align: center;
        color: white;
        background-color: black;
        cursor: pointer;
        padding: 4px 20px;
    }
    @media (max-width: 576px) {
        .osc-css .modal-document {
            width: 80vw;
        }
        .osc-css .modal-content > .modal-body input {
            max-width: 45vw;
        }
    }

    .osc-css .d-flex {
        display: flex;
    }
    .osc-css .ai-c {
        align-items: center;
    }
    .osc-css .w-300 {
        width: 300px;
    }
    .osc-css .jc-sa {
        justify-content: space-around;
    }
    .osc-css .jc-sb {
        justify-content: space-between;
    }
    .osc-css .text {
        font-size: 12px;
    }

    .osc-css.container__loading {
        position: fixed;
        background: transparent;
        z-index: 1001;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    .osc-css.container__loading .loading-container {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .osc-css.container__loading .btn-add-to-wishlist .button-loading-icon {
        transition: all 0.3s;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
    }

    .ucwl-osc-css.disable-move .card-function .move-to {
        display: none;
    }
    .ucwl-osc-css.disable-remove .card-function .remove {
        display: none;
    }
    .ucwl-osc-css .btn-d {
        cursor: pointer;
        font-size: 12px;
        margin: 5px;
    }
    .ucwl-osc-css .btn-d:hover {
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    }
    .ucwl-osc-css .img-responsive {
        width: 100%;
    }
    .ucwl-osc-css .card-body-container {
        margin: 12px 0 2px 0;
    }
    .ucwl-osc-css .card-body-container .product-variant > p {
        font-size: 12px;
    }
    .ucwl-osc-css .card-body-container .product-price {
        font-size: 12px;
    }
    .ucwl-osc-css .card-body-container .product-code {
        font-size: 12px;
        margin: 6px 0;
    }
    .ucwl-osc-css .card-body-container .product-vendor {
        font-size: 12px;
    }
    .ucwl-osc-css .card-body-container .container__product-description {
        height: 48px;
        overflow: hidden;
    }
    .ucwl-osc-css .view-detail {
        width: 100%;
        border: 1px solid #707070;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        margin: 3px 0;
    }
    .ucwl-osc-css .view-detail > a {
        text-decoration: none;
        color: #707070;
        border: none;
        width: 100%;
        text-align: center;
        padding: 3px;
    }
    .ucwl-osc-css .add-to-cart {
        width: 100%;
        border: unset;
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: all 200ms ease-in-out;
        user-select: none;
        font-size: 12px;
        margin: 3px 0;
    }
    .ucwl-osc-css .add-to-cart.uc-wl {
        padding: 3px;
    }
    .ucwl-osc-css .product-variant {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: 6px;
    }
    .ucwl-osc-css .product-variant > .product-variant-label {
        text-align: left;
        width: 50%;
    }
    .ucwl-osc-css .product-variant > .product-variant-value {
        text-align: right;
        width: 50%;
    }
    .ucwl-osc-css .product-category {
        margin-bottom: 7px;
    }
    .ucwl-osc-css .product-title {
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: black;
    }
    .ucwl-osc-css .product-title > p {
        height: 48px;
        width: 100%;
        display: block;
        display: -webkit-box;
        line-height: 1.2;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ucwl-osc-css .column-product {
        display: flex;
        justify-content: center;
        margin: 0;
    }
    .ucwl-osc-css .card-head {
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        height: 230px;
    }
    .ucwl-osc-css .product-card {
        position: relative;
        background-color: #fff;
        border-radius: 0.25rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 250px;
        transition: box-shadow 200ms ease-in-out;
        transition: all 200ms forwards;
    }
    .ucwl-osc-css .product-card:hover .card-function {
        opacity: 1;
    }
    .ucwl-osc-css .product-card:hover .move-to,
    .ucwl-osc-css .product-card:hover .remove {
        opacity: 1;
        transform: translateX(0px);
    }
    .ucwl-osc-css .product-card:hover .add-to-cart {
        opacity: 1;
    }
    .ucwl-osc-css .product-card .card-body {
        position: relative;
    }
    .ucwl-osc-css .product-card .add-to-cart .button-icon {
        margin-right: 4px;
        display: flex;
        align-items: center;
    }
    .ucwl-osc-css .container-product-list {
        grid-template-columns: repeat(4, 1fr);
        display: grid;
        grid-gap: 27px;
    }
    .ucwl-osc-css .container-product-list div:nth-child(4n+1) .column-product {
        justify-content: flex-start;
    }
    .ucwl-osc-css .container-product-list div:nth-child(4n+4) .column-product {
        justify-content: flex-end;
    }
    @media (max-width: 1079.9px) {
        .ucwl-osc-css .container-product-list {
            grid-template-columns: repeat(3, 1fr);
        }
        .ucwl-osc-css .container-product-list div:nth-child(3n+1) .column-product {
            justify-content: flex-start;
        }
        .ucwl-osc-css .container-product-list div:nth-child(3n+3) .column-product {
            justify-content: flex-end;
        }
    }
    @media (max-width: 900px) {
        .ucwl-osc-css .container-product-list {
            grid-template-columns: repeat(2, 1fr);
        }
        .ucwl-osc-css .container-product-list div:nth-child(2n+1) .column-product {
            justify-content: flex-start;
        }
        .ucwl-osc-css .container-product-list div:nth-child(2n+2) .column-product {
            justify-content: flex-end;
        }
    }
    @media (max-width: 576px) {
        .ucwl-osc-css .product-list {
            padding: 0;
        }
        .ucwl-osc-css .product-list .container-product-list {
            display: flex;
            flex-direction: column;
        }
        .ucwl-osc-css .product-list .container-product-list > div:not(:first-child) {
            margin-top: 24px;
        }
        .ucwl-osc-css .product-list .container-product-list > div > .column-product {
            display: block;
        }
        .ucwl-osc-css .product-list .container-product-list > div > .column-product .product-card {
            margin: auto;
        }
    }

    .ucwl-osc-css .container__pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list input {
        width: 25px;
        background: none;
        cursor: pointer;
        font-size: 12px;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list button {
        height: 25px;
        min-width: fit-content;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 12px;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list span {
        font-size: 18px;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list .button__active-page {
        cursor: default;
        color: #d6d6d6;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list .button__current-page {
        cursor: default;
        color: #59c3b8;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list input:not(:last-child),
    .ucwl-osc-css .container__pagination .pagination__page-list button:not(:last-child),
    .ucwl-osc-css .container__pagination .pagination__page-list span {
        border: 0;
        margin-right: 12px;
        height: fit-content;
    }
    .ucwl-osc-css .container__pagination .pagination__page-list input:not(:last-child),
    .ucwl-osc-css .container__pagination .pagination__page-list button:first-child {
        padding-right: 12px;
        border-right: 1px solid black;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size.container__select {
        border: 1px solid;
        border-radius: 2px;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__label {
        padding: 2px 0 2px 4px;
        font-size: 12px;
        display: flex;
        align-items: center;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__content-container {
        position: relative;
        display: flex;
        width: 2.5em;
        height: 2em;
        line-height: 2;
        background: white;
        overflow: hidden;
        font-size: 12px;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__content-container:hover::after {
        color: #000000;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__content-container::after {
        content: "▼";
        position: absolute;
        color: #d6d6d6;
        top: 0;
        right: 0;
        padding: 0 1em;
        background: white;
        cursor: pointer;
        pointer-events: none;
        -webkit-transition: 0.25s all ease;
        -o-transition: 0.25s all ease;
        transition: 0.25s all ease;
        font-size: 12px;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size .select__content-container select {
        flex: 1;
        color: black;
        cursor: pointer;
        padding: 0 0 0 1em;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        outline: 0;
        box-shadow: none;
        border: 0 !important;
        background: white;
        background-image: none;
    }
    .ucwl-osc-css .container__pagination .pagination__page-size select::-ms-expand {
        display: none;
    }
    @media (max-width: 576px) {
        .ucwl-osc-css .container__pagination {
            display: block;
            padding: 10px 0;
        }
        .ucwl-osc-css .container__pagination .pagination__page-list {
            width: fit-content;
            margin: 6px auto;
        }
        .ucwl-osc-css .container__pagination .pagination__page-size.container__select {
            max-width: fit-content;
            margin: auto;
        }
    }

    .ucwl-osc-css *,
    .osc-css * {
        overflow-wrap: break-word;
    }

    .ucwl-osc-css .wishlist-tab .wishlist-item-share {
        font-size: 16px;
        font-weight: bold;
    }

    #ucwl-page-container button {
        cursor: pointer;
    }

    #ucwl-page-container input {
        display: inline-block;
    }
    
    [create_wishlist_wrapper] button {
        padding: 0.5rem 1rem;
    }

    /*# sourceMappingURL=index.css.map */
--></style>
<div class="ucwl-osc-css page-container container disable-move" id="ucwl-page-container">
<div class="container--wishlist-tab-and-action">
<div class="d-flex wishlist-tab"></div>
<div class="container__wishlist-action w-fc d-flex jc-fe">
<div class="d-flex">
<div class="container__create-wishlist"></div>
<div class="container__wishlist-action-edit"></div>
<div class="container__wishlist-action-delete d-flex"></div>
</div>
</div>
</div>
<div class="p-15 pr-0 container--share-and-search">
<div class="container__share-wishlist"></div>
<div class="d-flex justify-center search-container"></div>
</div>
<div class="p-15 pr-0 product-list"></div>
<div class="p-15 container__pagination">
<div class="pagination__page-size"></div>
<div class="pagination__page-list"></div>
</div>
</div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: "703172307014776",
            autoLogAppEvents: true,
            xfbml: true,
            version: "v9.0",
        });
    };
</script> <script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
```

## Sample Share Wishlist page code

```
<style><!--
    @charset "UTF-8";
    body {
        background-color: #eeee;
    }

    @keyframes modal_show {
        0% {
            opacity: 0;
            transform: translateY(-40px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    @keyframes modal_hide {
        0% {
            opacity: 1;
            transform: translateY(0px);
        }
        100% {
            opacity: 0;
            transform: translateY(-40px);
        }
    }

    @keyframes loadingCircle {
        100% {
            transform: rotate(1turn);
        }
    }

    @-webkit-keyframes fadeinLeft {
        from {
            left: -100px;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }

    @keyframes fadeinLeft {
        from {
            left: -100px;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeoutLeft {
        from {
            left: 0;
            opacity: 1;
        }
        to {
            left: -100px;
            opacity: 0;
        }
    }

    @keyframes fadeoutLeft {
        from {
            left: 0;
            opacity: 1;
        }
        to {
            left: -100px;
            opacity: 0;
        }
    }

    @-webkit-keyframes fadeinRight {
        from {
            right: -100px;
            opacity: 0;
        }
        to {
            right: 0;
            opacity: 1;
        }
    }

    @keyframes fadeinRight {
        from {
            right: -100px;
            opacity: 0;
        }
        to {
            right: 0;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeoutRight {
        from {
            right: 0;
            opacity: 1;
        }
        to {
            right: -100px;
            opacity: 0;
        }
    }

    @keyframes fadeoutRight {
        from {
            right: 0;
            opacity: 1;
        }
        to {
            right: -100px;
            opacity: 0;
        }
    }

    .ucwl-osc-css * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        outline: none;
    }

    .ucwl-osc-css *::-webkit-scrollbar-track {
        /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
        background-color: white;
    }

    .ucwl-osc-css *::-webkit-scrollbar {
        width: 5px;
        background-color: white;
        height: 5px;
    }

    .ucwl-osc-css *::-webkit-scrollbar-thumb {
        background-color: black;
    }

    .ucwl-osc-css.page-container {
        background-color: white;
        min-height: 80vh;
        padding: 33px;
        overflow: hidden;
    }

    @media (max-width: 576px) {
        .ucwl-osc-css.page-container {
            padding: 24px 18px;
        }
    }

    .ucwl-osc-css .d-none {
        display: none;
    }

    .ucwl-osc-css .container {
        margin: 24px;
        padding: 24px;
    }

    .ucwl-osc-css .p-24 {
        padding: 24px;
    }

    .ucwl-osc-css .p-15 {
        padding: 15px;
    }

    .ucwl-osc-css .pr-0 {
        padding-right: 0;
    }

    .ucwl-osc-css .m-24 {
        margin: 24px;
    }

    .ucwl-osc-css .w-200 {
        width: 200px;
    }

    .ucwl-osc-css .ml-24 {
        margin-left: 24px;
    }

    .ucwl-osc-css .p-12 {
        padding: 12px;
    }

    .ucwl-osc-css .m-12 {
        margin: 12px;
    }

    .ucwl-osc-css .d-flex {
        display: flex;
    }

    .ucwl-osc-css .space-between {
        justify-content: space-between;
    }

    .ucwl-osc-css .justify-center {
        justify-content: center;
    }

    .ucwl-osc-css .align-center {
        align-items: center;
    }

    .ucwl-osc-css .vertical-align {
        line-height: 1;
        vertical-align: middle;
    }

    .ucwl-osc-css .h-48 {
        line-height: 48px;
    }

    .ucwl-osc-css .w-fc {
        min-width: fit-content;
    }

    .ucwl-osc-css .fd-c {
        flex-direction: column;
    }

    .ucwl-osc-css .ai-c {
        align-items: center;
    }

    .ucwl-osc-css .jc-sb {
        justify-content: space-between;
    }

    .ucwl-osc-css .jc-fe {
        justify-content: flex-end;
    }

    .ucwl-osc-css .jc-c {
        justify-content: center;
    }

    .ucwl-osc-css .df-1 {
        flex: 1;
    }

    .osc-css.btn-view {
        cursor: pointer;
    }

    .osc-css.toast {
        width: 250px;
        position: fixed;
        background-color: white;
        border-radius: 2px;
        z-index: 200;
        visibility: hidden;
        max-height: 100px;
        overflow: hidden;
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
        margin-bottom: 0.5rem;
    }

    .osc-css.toast.showLeft {
        visibility: visible;
        -webkit-animation: fadeinLeft 0.5s, fadeoutLeft 0.5s 2.5s;
        animation: fadeinLeft 0.5s, fadeoutLeft 0.5s 2.5s;
    }

    .osc-css.toast.showRight {
        visibility: visible;
        -webkit-animation: fadeinRight 0.5s, fadeoutRight 0.5s 2.5s;
        animation: fadeinRight 0.5s, fadeoutRight 0.5s 2.5s;
    }

    .osc-css.toast .toast__title-container {
        display: flex;
        padding: 0.8rem;
    }

    .osc-css.toast .toast__title-container .content__title {
        margin: 0;
    }

    .osc-css.toast .toast__title-container .title__content {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .osc-css.toast .toast__title-container .title__content .content__logo {
        display: inline-block;
        margin-right: 5px;
    }

    .osc-css.toast .toast__title-container .title__content .content__title {
        display: inline-block;
    }

    .osc-css.toast .toast__title-container .title__btn-close:hover, .osc-css.toast .toast__title-container .title__btn-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .osc-css.toast .toast__body {
        background-color: white;
        padding: 10px;
    }

    .osc-css.toast .toast__body .body__product-detail {
        flex: 1;
    }

    .osc-css.toast .toast__body .body__product-image {
        width: 96px;
    }

    .osc-css.toast .toast__body .body__product-image > img {
        width: 100%;
    }

    .osc-css.toast__title-container .title__btn-close {
        color: #aaaaaa;
        font-size: 28px;
        font-weight: bold;
    }

    .ucwl-osc-css .container--share-and-search {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ucwl-osc-css .container--share-and-search .search-container input {
        padding: 5px 30px 5px 8px;
        width: 200px;
        font-size: 12px;
        color: black;
        border: 1px solid #d6d6d6;
        border-radius: 2px;
        /*search icon*/
        background-color: transparent;
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 18px 18px;
        background-position: 97% center;
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }

    @media (max-width: 576px) {
        .ucwl-osc-css .container--share-and-search {
            display: block;
            padding: 10px 0;
        }

        .ucwl-osc-css .container--share-and-search .search-container {
            justify-content: flex-start;
            margin-top: 10px;
        }
    }

    .ucwl-osc-css .container--wishlist-tab-and-action {
        display: flex;
        justify-content: space-between;
    }

    .ucwl-osc-css .wishlist-item {
        padding: 0;
        font-size: 14px;
        min-width: fit-content;
        color: #9d9b9b;
    }

    .ucwl-osc-css .wishlist-item.wishlist-tab__selected-wishlist {
        color: black;
    }

    .ucwl-osc-css .hide-button {
        border: none;
        background: none;
        height: 100%;
    }

    .ucwl-osc-css .share-button {
        border: 1px solid black;
        font-size: 12px;
        background: white;
        padding: 5px 10px;
        line-height: normal;
    }

    .ucwl-osc-css .icon {
        width: 25px;
        cursor: pointer;
        margin-left: 12px;
        margin-top: 12px;
    }

    .ucwl-osc-css .btn-wishlist {
        cursor: pointer;
    }

    .ucwl-osc-css .btn-wishlist:focus, .ucwl-osc-css .btn-wishlist:hover {
        cursor: pointer;
    }

    .ucwl-osc-css .share {
        min-width: fit-content;
        cursor: pointer;
    }

    .ucwl-osc-css .wishlist-tab {
        height: fit-content;
        vertical-align: baseline;
        /*overflow: hidden;*/
        overflow: auto;
        width: 100%;
    }

    .ucwl-osc-css .wishlist-tab:hover {
        overflow: auto;
        overflow-y: hidden;
    }

    .ucwl-osc-css .wishlist-tab:hover::-webkit-scrollbar-thumb {
        background-color: #000;
    }

    .ucwl-osc-css .wishlist-tab .wishlist-item:not(:last-child) {
        margin-right: 43px;
    }

    .ucwl-osc-css .container__wishlist-action {
        overflow: auto;
        overflow-y: hidden;
    }

    .ucwl-osc-css .container__wishlist-action .container__create-wishlist,
    .ucwl-osc-css .container__wishlist-action .container__wishlist-action-edit,
    .ucwl-osc-css .container__wishlist-action .container__wishlist-action-delete {
        height: fit-content;
    }

    .ucwl-osc-css .container__wishlist-action button {
        color: #707070;
        font-size: 12px;
    }

    .ucwl-osc-css .container__wishlist-action .icon {
        margin-top: 0;
        width: 12px;
        height: 1.5em;
    }

    @media (max-width: 576px) {
        .ucwl-osc-css .container--wishlist-tab-and-action {
            display: block;
        }

        .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action {
            justify-content: flex-start;
            margin-top: 10px;
        }

        .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action button {
            margin-left: 0;
            margin-right: 12px;
        }

        .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action .icon {
            margin-left: 0;
        }
    }

    .osc-css.modal-root {
        display: none;
    }

    .osc-css.modal-root.open {
        display: block;
    }

    .osc-css.modal__share .icon {
        margin: 0 6px 0 0;
        width: unset;
        height: unset;
    }

    .osc-css.modal__share .btn-copy {
        display: flex;
        align-items: center;
        border: 0;
        background: white;
        cursor: pointer;
        font-size: 12px;
    }

    .osc-css .icon {
        width: 25px;
        cursor: pointer;
        margin: 0 0 0 12px;
    }

    .osc-css .uc-btn {
        border: 1px solid black;
        padding: 6px;
        background: white;
        cursor: pointer;
    }

    .osc-css .input__checkbox {
        display: none;
    }

    .osc-css .input__checkbox:checked ~ .container__checkbox {
        background-color: black;
    }

    .osc-css .container__checkbox {
        margin: 0 10px 0 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #dad1d1;
        display: inline-block;
    }

    .osc-css .modal-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        outline: 0;
        z-index: 1000;
    }

    .osc-css .modal-mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.45);
    }

    .osc-css .modal-loading {
        position: absolute;
        background: rgba(0, 0, 0, 0.1);
        z-index: 1001;
        width: 100%;
        height: 100%;
        display: none;
    }

    .osc-css .modal-loading.open {
        display: block;
    }

    .osc-css .loading-container {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .osc-css .modal-document {
        width: 512px;
        top: 100px;
        position: relative;
        margin: 0 auto;
    }

    .osc-css .modal-document.open {
        animation: modal_show 500ms linear;
    }

    .osc-css .modal-document.close {
        animation: modal_hide 500ms linear;
    }

    .osc-css .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        padding: 0;
        color: rgba(0, 0, 0, 0.45);
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        background: 0 0;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: color 0.3s;
    }

    .osc-css .modal-close:hover {
        color: rgba(0, 0, 0, 0.75);
    }

    .osc-css .modal-close > .modal-close-x {
        display: block;
        width: 56px;
        height: 56px;
        font-size: 16px;
        font-style: normal;
        line-height: 56px;
        text-align: center;
        text-transform: none;
        text-rendering: auto;
    }

    .osc-css .modal-content {
        position: relative;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        pointer-events: auto;
    }

    .osc-css .modal-content > .modal-header {
        padding: 16px 24px;
        color: rgba(0, 0, 0, 0.85);
        background: #fff;
        border-radius: 2px 2px 0 0;
    }

    .osc-css .modal-content > .modal-body {
        padding: 0 24px;
        font-size: 14px;
        line-height: 1.5715;
        max-height: 350px;
        overflow: auto;
    }

    .osc-css .modal-content > .modal-body label {
        width: 90%;
        overflow-wrap: break-word;
        padding: 5px;
        font-weight: bold;
    }

    .osc-css .modal-content > .modal-body input {
        width: 100%;
        padding: 4px 10px;
        max-width: 300px;
        font-size: 12px;
    }

    .osc-css .modal-content > .modal-footer {
        padding: 10px 16px;
        text-align: right;
        background: 0 0;
        border-radius: 0 0 2px 2px;
    }

    .osc-css .modal-header > .modal-title {
        margin: 0;
        color: black;
        font-size: 14px;
        line-height: 22px;
        width: 90%;
    }

    .osc-css .modal-body .modal__title {
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #d8d8d8;
        padding-bottom: 6px;
        margin-bottom: 18px;
    }

    .osc-css .modal-footer button {
        margin-left: 12px;
        font-size: 12px;
        text-transform: uppercase;
        border: none;
        text-align: center;
        color: white;
        background-color: black;
        cursor: pointer;
        padding: 4px 20px;
    }

    @media (max-width: 576px) {
        .osc-css .modal-document {
            width: 80vw;
        }

        .osc-css .modal-content > .modal-body input {
            max-width: 45vw;
        }
    }

    .osc-css .d-flex {
        display: flex;
    }

    .osc-css .ai-c {
        align-items: center;
    }

    .osc-css .w-300 {
        width: 300px;
    }

    .osc-css .jc-sa {
        justify-content: space-around;
    }

    .osc-css .jc-sb {
        justify-content: space-between;
    }

    .osc-css .text {
        font-size: 12px;
    }

    .osc-css.container__loading {
        position: fixed;
        background: transparent;
        z-index: 1001;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }

    .osc-css.container__loading .loading-container {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .osc-css.container__loading .btn-add-to-wishlist .button-loading-icon {
        transition: all 0.3s;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
    }

    .ucwl-osc-css.disable-move .card-function .move-to {
        display: none;
    }

    .ucwl-osc-css.disable-remove .card-function .remove {
        display: none;
    }

    .ucwl-osc-css .btn-d {
        cursor: pointer;
        font-size: 12px;
        margin: 5px 10px;
    }

    .ucwl-osc-css .btn-d:hover {
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    }

    .ucwl-osc-css .img-responsive {
        width: 100%;
    }

    .ucwl-osc-css .card-body-container {
        margin: 12px 0 2px 0;
    }

    .ucwl-osc-css .card-body-container .product-variant > p {
        font-size: 12px;
    }

    .ucwl-osc-css .card-body-container .product-price {
        font-size: 12px;
    }

    .ucwl-osc-css .card-body-container .product-code {
        font-size: 12px;
        margin: 6px 0;
    }

    .ucwl-osc-css .card-body-container .container__product-description {
        height: 48px;
        overflow: hidden;
    }

    .ucwl-osc-css .view-detail {
        width: 100%;
        border: 1px solid #707070;
        background-color: white;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        margin: 3px 0;
    }

    .ucwl-osc-css .view-detail > a {
        text-decoration: none;
        color: #707070;
        border: none;
        width: 100%;
        text-align: center;
        padding: 3px;
    }

    .ucwl-osc-css .add-to-cart {
        width: 100%;
        border: unset;
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: all 200ms ease-in-out;
        user-select: none;
        font-size: 12px;
        margin: 3px 0;
    }

    .ucwl-osc-css .add-to-cart.uc-wl {
        padding: 3px;
    }

    .ucwl-osc-css .product-variant {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: 6px;
    }

    .ucwl-osc-css .product-variant > .product-variant-label {
        text-align: left;
        width: 50%;
    }

    .ucwl-osc-css .product-variant > .product-variant-value {
        text-align: right;
        width: 50%;
    }

    .ucwl-osc-css .product-category {
        margin-bottom: 7px;
    }

    .ucwl-osc-css .product-title {
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: black;
    }

    .ucwl-osc-css .product-title > p {
        height: 48px;
        width: 100%;
        display: block;
        display: -webkit-box;
        line-height: 1.2;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ucwl-osc-css .column-product {
        display: flex;
        justify-content: center;
        margin: 0;
    }

    .ucwl-osc-css .card-head {
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        height: 230px;
    }

    .ucwl-osc-css .product-card {
        position: relative;
        background-color: #fff;
        border-radius: 0.25rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 250px;
        transition: box-shadow 200ms ease-in-out;
        transition: all 200ms forwards;
    }

    .ucwl-osc-css .product-card:hover .card-function {
        opacity: 1;
    }

    .ucwl-osc-css .product-card:hover .move-to,
    .ucwl-osc-css .product-card:hover .remove {
        opacity: 1;
        transform: translateX(0px);
    }

    .ucwl-osc-css .product-card:hover .add-to-cart {
        opacity: 1;
    }

    .ucwl-osc-css .product-card .card-body {
        position: relative;
    }

    .ucwl-osc-css .product-card .add-to-cart .button-icon {
        margin-right: 4px;
        display: flex;
        align-items: center;
    }

    .ucwl-osc-css .container-product-list {
        grid-template-columns: repeat(4, 1fr);
        display: grid;
        grid-gap: 27px;
    }

    .ucwl-osc-css .container-product-list div:nth-child(4n+1) .column-product {
        justify-content: flex-start;
    }

    .ucwl-osc-css .container-product-list div:nth-child(4n+4) .column-product {
        justify-content: flex-end;
    }

    @media (max-width: 1079.9px) {
        .ucwl-osc-css .container-product-list {
            grid-template-columns: repeat(3, 1fr);
        }

        .ucwl-osc-css .container-product-list div:nth-child(3n+1) .column-product {
            justify-content: flex-start;
        }

        .ucwl-osc-css .container-product-list div:nth-child(3n+3) .column-product {
            justify-content: flex-end;
        }
    }

    @media (max-width: 900px) {
        .ucwl-osc-css .container-product-list {
            grid-template-columns: repeat(2, 1fr);
        }

        .ucwl-osc-css .container-product-list div:nth-child(2n+1) .column-product {
            justify-content: flex-start;
        }

        .ucwl-osc-css .container-product-list div:nth-child(2n+2) .column-product {
            justify-content: flex-end;
        }
    }

    @media (max-width: 576px) {
        .ucwl-osc-css .product-list {
            padding: 0;
        }

        .ucwl-osc-css .product-list .container-product-list {
            display: flex;
            flex-direction: column;
        }

        .ucwl-osc-css .product-list .container-product-list > div:not(:first-child) {
            margin-top: 24px;
        }

        .ucwl-osc-css .product-list .container-product-list > div > .column-product {
            display: block;
        }

        .ucwl-osc-css .product-list .container-product-list > div > .column-product .product-card {
            margin: auto;
        }
    }

    .ucwl-osc-css .container__pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list input {
        width: 25px;
        background: none;
        cursor: pointer;
        font-size: 12px;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list button {
        height: 25px;
        min-width: fit-content;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 12px;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list span {
        font-size: 18px;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list .button__active-page {
        cursor: default;
        color: #d6d6d6;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list .button__current-page {
        cursor: default;
        color: #59c3b8;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list input:not(:last-child),
    .ucwl-osc-css .container__pagination .pagination__page-list button:not(:last-child),
    .ucwl-osc-css .container__pagination .pagination__page-list span {
        border: 0;
        margin-right: 12px;
        height: fit-content;
    }

    .ucwl-osc-css .container__pagination .pagination__page-list input:not(:last-child),
    .ucwl-osc-css .container__pagination .pagination__page-list button:first-child {
        padding-right: 12px;
        border-right: 1px solid black;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size.container__select {
        border: 1px solid;
        border-radius: 2px;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__label {
        padding: 2px 0 2px 4px;
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__content-container {
        position: relative;
        display: flex;
        width: 2.5em;
        height: 2em;
        line-height: 2;
        background: white;
        overflow: hidden;
        font-size: 12px;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__content-container:hover::after {
        color: #000000;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size.container__select .select__content-container::after {
        content: "▼";
        position: absolute;
        color: #d6d6d6;
        top: 0;
        right: 0;
        padding: 0 1em;
        background: white;
        cursor: pointer;
        pointer-events: none;
        -webkit-transition: 0.25s all ease;
        -o-transition: 0.25s all ease;
        transition: 0.25s all ease;
        font-size: 12px;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size .select__content-container select {
        flex: 1;
        color: black;
        cursor: pointer;
        padding: 0 0 0 1em;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        outline: 0;
        box-shadow: none;
        border: 0 !important;
        background: white;
        background-image: none;
    }

    .ucwl-osc-css .container__pagination .pagination__page-size select::-ms-expand {
        display: none;
    }

    @media (max-width: 576px) {
        .ucwl-osc-css .container__pagination {
            display: block;
            padding: 10px 0;
        }

        .ucwl-osc-css .container__pagination .pagination__page-list {
            width: fit-content;
            margin: 6px auto;
        }

        .ucwl-osc-css .container__pagination .pagination__page-size.container__select {
            max-width: fit-content;
            margin: auto;
        }
    }

    .ucwl-osc-css *,
    .osc-css * {
        overflow-wrap: break-word;
    }

    .ucwl-osc-css .wishlist-tab .wishlist-item-share {
        font-size: 16px;
        font-weight: bold;
    }

    /*# sourceMappingURL=index.css.map */
--></style>
<div class="ucwl-osc-css page-container container disable-move disable-remove" id="ucwl-page-container">
<div class="container--wishlist-tab-and-action">
<div class="d-flex wishlist-tab jc-c"></div>
<div class="container__wishlist-action w-fc d-flex jc-fe">
<div class="d-flex">
<div class="container__create-wishlist"></div>
<div class="container__wishlist-action-edit"></div>
<div class="container__wishlist-action-delete d-flex"></div>
</div>
</div>
</div>
<div style="display: none !important;" class="p-15 pr-0 container--share-and-search">
<div style="display: none !important;" class="container__share-wishlist"></div>
<div class="d-flex justify-center search-container"></div>
</div>
<div class="p-15 pr-0 product-list"></div>
<div class="p-15 container__pagination">
<div class="pagination__page-size"></div>
<div class="pagination__page-list"></div>
</div>
</div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: "703172307014776",
            autoLogAppEvents: true,
            xfbml: true,
            version: "v9.0",
        });
    };
</script> <script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

```

### Sample Script automatically added to front-end

```
<script>(function() {
  function asyncLoad() {
    var urls = ["https:\/\/wh-fe.au-aws.thewishlist.io\/assets\/wishlist\/wishlist.js?shop=app-code.myshopify.com"];
    for (var i = 0; i < urls.length; i++) {
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = urls[i];
      var x = document.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    }
  };
  if(window.attachEvent) {
    window.attachEvent('onload', asyncLoad);
  } else {
    window.addEventListener('load', asyncLoad, false);
  }
})();</script>
```

## Sample Theme.liquid

### Update wishlist count without page refresh

Before the end of < body > add

```
<!-- Update the wishlist count without page refresh -->
  <script>
    document.addEventListener("wishlistAddToCartEvent", (e) => {
      console.log("Add to cart done: ", e.detail);
      document.dispatchEvent(new CustomEvent('ajaxProduct:added'));
    });
  </script> 
```

### Within a 'recommended' section

```
   <script>
    document.addEventListener('DOMContentLoaded', function () {
      const recommendations = document.querySelector('product-recommendations');
      if (!recommendations) return;

      const observer = new MutationObserver(function (mutationsList, observer) {
        for (const mutation of mutationsList) {
          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
            document.body.dispatchEvent(new CustomEvent('initTheWishlist'));
            observer.disconnect(); // stop watching after it's fired once
            break;
          }
        }
      });

      observer.observe(recommendations, { childList: true, subtree: true });
    });
  </script>
```

### Manual Configuration of launch point

Create snippets on theme wishlist-launch-point.liquid

```
<div class="wishlist__launch-point">
 <!-- Link to page wishlist -->
 <a href="/pages/wishlist">
   <!-- Icon wishlist -->
   <svg viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg>
   <!-- Count wishlist -->
   <span class="count-item"></span>
 </a>
</div>
<!-- JS to get and update count item wishlist -->
<script>
 document.body.addEventListener("initTheWishlist", () => {
 const getCountItem = theWishlist.countItemWishlist();
 const elCountItemWishlist = document.querySelector('.wishlist__launch-point .count-item');
 if (elCountItemWishlist) {
   elCountItemWishlist.textContent = getCountItem;
 } else { 
   console.log('Element with the specified class not found.');
 } 
 });
</script>
<!--
 CSS style
 The following code support well on default theme, For other themes may 
need a different style. Because each theme has a different HTML structure.
-->
<style>
 .wishlist__launch-point {
 height: 4.4rem; 
 width: 4.4rem; 
 padding: 0; 
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative; 
 } 
 .wishlist__launch-point a { 
 display: flex;
 } 
 .wishlist__launch-point svg { 
 height: 24px; 
 width: auto;
 padding: 0; 
 } 
 .wishlist__launch-point .count-item {
 position: absolute;
 background-color: rgb(var(--color-button));
 color: rgb(var(--color-button-text));
 height: 1.7rem; 
 width: 1.7rem; 
 border-radius: 100%; 
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: .9rem; 
 bottom: 0.8rem;
 left: 2.2rem; 
 line-height: calc(1 + .1 / var(--font-body-scale));
 } 
</style>
```

Render snippets in sections header.liquid to add the wishlist icon in the header section

```
{% render 'wishlist-launch-point' %}
```

### Wishlist button detail

Create snippets wishlist-button-detail.liquid for product page

```
<div class="detail-add-wishlist-wrapper">
 <a type="button" id="btn-detail-wishlist" class="btn-wishlist disable" data-productId="{{ product.id }}">
   <div class="button-icon">
     <svg class="icon-add-wishlist" viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true" style="width: 20px; height: 20px;"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"></path></svg>
    </div>
   <span class="button-text">Add To Wishlist</span>
 </a>
</div>

<!-- JS to get and update count item wishlist -->
<script>
 let initPage = false;
 const buttonWishlistDetail = document.querySelector('#btn-detail-wishlist');
 const buttonType = {
   LOADING: 'LOADING',
   TEXT: 'TEXT'
 }
 const iconLoading = '<svg class="icon-loading-wishlist" aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" width="1.25em" height="1.25em" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" strokewidth="6" cx="33" cy="33" r="30" style="stroke: #FFF;"></circle></svg>';
 const iconAddedWishlist = '<svg class="icon-added-wishlist" viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg>'; 
 const iconAddWishlist = '<svg class="icon-add-wishlist" viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1.25em" height="1.25em" fill="currentColor" aria-hidden="true" style="width: 20px; height: 20px;"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"></path></svg>';
 function getVariantId () {
   let hiddenInput = null;
    hiddenInput = document.querySelector('.product-form select[name="id"]');

    if (!hiddenInput) {
      hiddenInput = document.querySelector('.product-form input[name="id"]');
    }

    if (!hiddenInput) {
      console.log('Please, contact developer theme to querySelector exactly the input of variant');
      return;
    }    

    const variantId = hiddenInput.value;

    if (variantId) {
      console.log('variant selected ' + variantId);
      return variantId;
    } else {
      console.log('Can not get variant id');
      return null;
    }
 }
  
 function removeDisableButton() {
  const elButton = document.querySelector('.detail-add-wishlist-wrapper .btn-wishlist.disable');
   if (elButton) {
     elButton.classList.remove('disable');
   }
 }

 function renderButton(type) {
   const buttonIcon = document.querySelector('.button-icon');
   const buttonText = document.querySelector('.button-text');
   const buttonclass = document.querySelector('.btn-wishlist');
   if (type === buttonType.LOADING) {
     buttonIcon.innerHTML = iconLoading;
   } else {
   const variantId = getVariantId();
   const checkItemInWishlist = theWishlist.checkVariantInWishlist(variantId);
     if (checkItemInWishlist) {
       buttonIcon.innerHTML = iconAddedWishlist;
       buttonText.innerHTML = 'Added To Wishlist';
       buttonclass.classList.add('added-wishlist');
     } else {
       buttonIcon.innerHTML = iconAddWishlist;
       buttonText.innerHTML = 'Add To Wishlist'
     }
   }
}
function actionButtonWishlist() { 
  buttonWishlistDetail.addEventListener('click', function() {
   const variantId = getVariantId();
   const checkItemInWishlist = theWishlist.checkVariantInWishlist(variantId);
   if (variantId) {
     renderButton(buttonType.LOADING);
     if (checkItemInWishlist) { 
       theWishlist.removeWishlistGeneral(variantId, 'DETAIL_PAGE', function (res) {
         console.log(res);
       });
     } else { 
       theWishlist.addWishlistGeneral(variantId, 'DETAIL_PAGE', function(res) {
         console.log(res);
       });
     }
   }
 });
}
  
function handleChangeVariant () {
    let hiddenInput = null;
    hiddenInput = document.querySelector('.product-form select[name="id"]');

    if (!hiddenInput) {
       hiddenInput = document.querySelector('.product-form input[name="id"]');
    }
    hiddenInput.addEventListener('change', function (event) {
      renderButton(buttonType.TEXT);
    });
}
document.body.addEventListener("initTheWishlist", () => {
 console.log('initTheWishlist ... ');
   if (!initPage) {
     initPage = true;
     removeDisableButton();
     actionButtonWishlist();
     handleChangeVariant();
   }
   renderButton(buttonType.TEXT);
 });
</script>

<!-- CSS style -->
<!--
 The following code support well on default theme, For other themes may
need a different style. Because each theme has a different HTML structure.
-->
<style>
.detail-add-wishlist-wrapper .btn-wishlist {
   background-color: #fff;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    padding: 13px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1px;
    box-sizing: border-box;
    transition: all 0.3s linear;
    letter-spacing: 0.3em;
    line-height: 1.42;
    font-size: max(calc(var(--typeBaseSize) - 4px), 13px);
    text-transform: uppercase;
    border-radius: var(--buttonRadius);
    width: 100%;
    margin-bottom: 15px;
    font-weight: 700;
}
.detail-add-wishlist-wrapper .btn-wishlist.disable {
 cursor: none;
 opacity: 0.6;
} 
.detail-add-wishlist-wrapper .button-icon {
   margin-right: 10px;
  line-height: 1;
}

.detail-add-wishlist-wrapper .btn-wishlist.added-wishlist,
.detail-add-wishlist-wrapper .btn-wishlist:hover{
  background: #ffa400;
  border-color: #ffa400;
  color: #fff;
  
}
  
</style>

```

Render snippets in sections main-product.liquid

```
 {% render 'wishlist-button-detail', product: product %}
```

### Collection Page

Code for cart-product.liquid snippet

```
<div class="osc-css wrapper-button-collection">
                      <div class= "button-collection-wishlist button-{{ card_product.id }}" 
                        data-product-id='{{ card_product.id }}' 
                        data-has-only-variant='{{ card_product.has_only_default_variant }}'
                        data-product-title='{{ card_product.title }}'
                      >
                          <span class="button-icon"></span>
                          <span class="button-text"></span>
                      </div>
             </div>
              {% unless product == empty %}
              <script type="application/json" id="ProductJson-{{ card_product.id }}">
                {{ card_product | json }}
              </script>
              <script type="application/json" id="OptionJson-{{ card_product.id }}">
                {{ card_product.options_with_values | json }}
              </script>
            {% endunless %}

```

### Hide the floating wishlist icon

In your css file or theme custom.css add this css

```
.floating-button.cr {
  display: none;
}
```

### Customising The Wishlist page Styles

Add this code on the (live theme) theme.liquid *custom\_template\_{{ page\_title | handleize }}* to the body class

Open or create the custom.css and add the css below

```
/*Wishlist styles*/
.custom_template_wishlist .page__header{
  display: none;
}

.custom_template_wishlist .page__content{
  background-color: #fff;
  padding: 33px 0 0;
  margin: 50px auto;
  border: 1px solid var(--border-color);
  border-radius: 5px;
}

.custom_template_wishlist .page__content h1 {
  padding: 0 33px;
}

.custom_template_wishlist .container--wishlist-tab-and-action {
   border-bottom: 1px solid var(--border-color);
}

.custom_template_wishlist .page__content .ucwl-osc-css.page-container {
  padding: 0;
}

.card-information .card-information__wrapper,
.card__content .card__information {
  position: relative;
}

.product-item .osc-css.wrapper-button-collection {
    top: 10px;
    right: 10px;
    position: absolute;
    z-index: 94;
}

.custom_template_wishlist .container--narrow {
  max-width: 1480px;
}

.custom_template_wishlist .ucwl-osc-css .container-product-list{
  width: 100%;
}

.custom_template_wishlist .product-list:before{
  border: 0;
}

.custom_template_wishlist .ucwl-osc-css .product-vendor,
.custom_template_wishlist .ucwl-osc-css .product-code,
.custom_template_wishlist .ucwl-osc-css .product-variant
  display: none;  
}

.custom_template_wishlist .ucwl-osc-css .product-title > p{
  font-weight: var(--text-font-bolder-weight);
  color: var(--heading-color);
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 14px));
  height: 95px;
  line-height: 1.55;
}

.custom_template_wishlist .ucwl-osc-css .card-body-container .product-price{
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
  color: var(--accent-color);
}

.custom_template_wishlist .product-card{
  max-width: 100%; 
}

.custom_template_wishlist .column-product {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 15px 15px 10px;
  justify-content: center !important;
}

.custom_template_wishlist .ucwl-osc-css .img-responsive{
  width: auto;
  margin: 0;
}

.custom_template_wishlist .ucwl-osc-css .card-head{
  height: auto;
}

.custom_template_wishlist .ucwl-osc-css .card-body-container .container__product-description{
  height: auto;
  flex-direction: column;
}

.custom_template_wishlist .ucwl-osc-css .product-variant{
    align-items: center;
    margin-left: 6px;
    width: 100%;
}

.custom_template_wishlist .ucwl-osc-css .card-body-container .product-variant > p{
    margin: 0;
}

.custom_template_wishlist .ucwl-osc-css .add-to-cart{
  background-color: #31c331!important;
  border-color: #31c331!important;
  color: #fff!important;
  font-size: 15px;
  padding: 0.3rem 1rem;
  border-radius: 3px;
}

.custom_template_wishlist .ucwl-osc-css .view-detail > a{
  background-color: #f1f4f5;
  color: var(--heading-color);
  font-size: 14px;
  padding: 0.5rem 1rem;
  border-radius: 3px;
}

.custom_template_wishlist .ucwl-osc-css .card-function{
  flex-direction: row;
}

.custom_template_wishlist .ucwl-osc-css .view-detaill{
  border: 0;
}

/*
.custom_template_wishlist .ucwl-osc-css .view-detail > a {
  position: absolute;
  top: 0;
  height: 80%;
  text-indent: -9999px;
}
*/

.custom_template_wishlist .ucwl-osc-css .container--wishlist-tab-and-action{
  justify-content: space-between;
  align-items: flex-end;
}

.custom_template_wishlist .ucwl-osc-css .wishlist-tab .wishlist-item:not(:last-child){
  margin-right: 0;
}

.custom_template_wishlist .ucwl-osc-css .wishlist-item{
  font-size: 16px;
}

.custom_template_wishlist .ucwl-osc-css .wishlist-tab{
  width: auto;
}

.custom_template_wishlist .ucwl-osc-css .btn-wishlist{
  padding: 0 33px 10px;
  border-bottom: 2px solid transparent;
}

.custom_template_wishlist .ucwl-osc-css .wishlist-item.wishlist-tab__selected-wishlist{
  border-color: var(--header-accent-color);
}

.custom_template_wishlist .ucwl-osc-css .wishlist-item.wishlist-tab__selected-wishlist {
  color: #9d9b9b;
}

.custom_template_wishlist .ucwl-osc-css .container__wishlist-action .icon{
  margin: 0 5px;
}

.custom_template_wishlist .ucwl-osc-css .btn-d:hover {
  box-shadow: unset;
}

.custom_template_wishlist .ucwl-osc-css .container-product-list {
  gap: 0;
}

.custom_template_wishlist .ucwl-osc-css .container__wishlist-action .d-flex{
  align-items: center;
}

.custom_template_wishlist .ucwl-osc-css .container-product-list div:nth-child(3n+1) .column-product {
  justify-content: center;
}

.custom_template_wishlist .container__wishlist-action .container__create-wishlist button::before{
    content: "+";
    display: inline-block;
    position: relative;
    padding-right: 3px;
}

.custom_template_wishlist .container__wishlist-action .container__create-wishlist button{
    color: #fff;
    font-size: 14px;
    background-color: #31c331;
    font-weight: 400;
    letter-spacing: 1px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.custom_template_wishlist .ucwl-osc-css .container__wishlist-action{
  padding-right: 33px;
}

.custom_template_wishlist .ucwl-osc-css .container--share-and-search{
  padding-left: 33px;
  padding-right: 33px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.custom_template_wishlist .ucwl-osc-css .share-button{
  color: var(--heading-color);
  border-color: var(--heading-color);
  border-radius: 3px;
  padding: .7rem 1.8rem;
  font-size: 15px;
}

.custom_template_wishlist .ucwl-osc-css .container--share-and-search .search-container input {
    border-color: var(--border-color);
    color: #9d9b9b;
    padding: 0.7rem 2.8rem 0.7em 1.8rem;
    font-size: 15px;
    width: auto;
    border-radius: 3px;
}

.custom_template_wishlist .ucwl-osc-css .product-list{
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--border-color);
  padding-top: 0;
}

.custom_template_wishlist .ucwl-osc-css .add-to-cart.uc-wl{
  padding: 0;
}

@media screen and (max-width: 767.98px) {
    .custom_template_wishlist .d-flex{
        flex-direction: row;
    }

    .custom_template_wishlist .container__share-wishlist{
      text-align: center;
    }

    .custom_template_wishlist .osc-css .jc-sb {
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }

  .custom_template_wishlist .osc-css .modal-content{
    padding: 0;
  }
}

@media screen and (min-width: 1100px) {
  .custom_template_wishlist .ucwl-osc-css .container-product-list{
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0;
  }

  .osc-css .modal-document {
    width: 767px!Important;
  }

  .osc-css .modal-content > .modal-body,
  .osc-css .modal-content>.modal-footer{
      padding-left: 44px!Important;
      padding-right: 44px!Important;
  }

 .osc-css .modal-footer {
    padding-bottom: 33px!important;
  }
}

.osc-css .modal-body .modal__title,
.card-select .wishlist-form [wishlist_title]{
  color: var(--heading-color)!important;
  background-color: transparent!important;
  font-size: 16px!important;
}

.osc-css .modal-content > .modal-body input {
  border: 1px solid var(--border-color)!important;
  max-width: 100%!important;
  padding: 0.8rem!important;
  font-size: 14px!important;
  min-width: 100%!important;
}

.osc-css .modal-content > .modal-footer {
  text-align: left!important;
}

.wishlist-form button.create-wl, 
.osc-css .modal-footer .btn-save, 
.osc-css .modal-footer .btn-close {
  background-color: #31c331!important;
  font-size: 15px!important;
  text-transform: capitalize!important;
  border-radius: 3px!important;
}

.osc-css .modal-content > .modal-body input {
  padding: 10px 10px!important;
}

.osc-css .modal-body .modal__title {
  text-align: left!important;
    border: 0!important;
}

.wishlist-form .wishlist-list .type-check {
  width: 20px!important;
  height: 20px!important;
  border-radius: 20px!important;
  border: 1px solid #dad1d1!important;
  background-color: transparent!important;
}

.wishlist-list .wishlist-list-input:checked~.type-check {
  background-color: #31c331!important
}

.osc-css .wishlist-list label>span.title-wishlist {
  font-weight: 400!important;
}

.button-collection-wishlist {
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="20" height="20" fill="%2300badb"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg>');
}

.button-collection-wishlist.added-to-wishlist {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="20" height="20" fill="%2300badb" ><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"></path></svg>');
}

@media screen and (max-width: 767px) {
  .custom_template_wishlist .ucwl-osc-css .wishlist-tab {
    flex-direction: row;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    margin-top: 10px;
  }

  .custom_template_wishlist .ucwl-osc-css .wishlist-tab::-webkit-scrollbar {
    display: none;
  }

  .custom_template_wishlist .container--narrow {
    background-color: #fff;
    padding: 0;
  }

  .custom_template_wishlist .page__content h1,
  .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action,
  .custom_template_wishlist .ucwl-osc-css .container--share-and-search{
    padding-left: 15px;
    padding-right: 15px;
  }

  .custom_template_wishlist .page__content {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    border: 0;
  }

  .custom_template_wishlist .ucwl-osc-css .container--wishlist-tab-and-action {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
  }

  .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action,
  .custom_template_wishlist .ucwl-osc-css .wishlist-tab{
    width: 100%;
  }

  .ucwl-osc-css .container--wishlist-tab-and-action .container__wishlist-action {
    align-items: center;
  }  

  .custom_template_wishlist .container__share-wishlist {
    display: none;
  }

  .custom_template_wishlist .ucwl-osc-css .container--share-and-search .search-container input {
    width: 100%;
  }

  .custom_template_wishlist .ucwl-osc-css .product-card {
    max-width: 100%;
    background-color: transparent;
  }

  .custom_template_wishlist .ucwl-osc-css .container-product-list {
      grid-template-columns: repeat(2, 1fr);
      display: grid!important;
      grid-gap: 0;
  }

  .custom_template_wishlist .ucwl-osc-css .product-list .container-product-list > div > .column-product {
    height: 100%;
  }

  .ucwl-osc-css .product-list .container-product-list > div:not(:first-child) {
      margin-top: 0!important;
  }

  .custom_template_wishlist .ucwl-osc-css .product-title>p {
    height: 100px;
  }

  .custom_template_wishlist .ucwl-osc-css .card-body-container .product-price {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
  }

  .custom_template_wishlist .ucwl-osc-css .add-to-cart {
    padding: 0rem 1rem;
  }

  .custom_template_wishlist .ucwl-osc-css .view-detail>a {
    padding: 0.25rem 1rem;
  }

}


/*Wishlist styles- End*/
```

### Open mini-cart in wishlist

Add this js code to custom.js under Assets folder

```
/* Custom Handler to Refresh and Open Mini-cart in the Wishlist */
document.addEventListener("DOMContentLoaded", () => {
  const wishlistBodyNode = document.querySelector("body");
  wishlistBodyNode.addEventListener("wishlistAddToCartEvent", (e) => {
    document.documentElement.dispatchEvent(new CustomEvent('product:added', {
      bubbles: true,
      detail: {
        quantity: 1
      }
    }));
  });
});
```