Skip to main content

Kiwi Injection Guide - Palo Alto - Inline with Size Label

Injection settings for the Palo Alto theme to place the Kiwi size chart inline with the size variant label. Requires Custom CSS. Go to Styles & Settings → General Settings → Display.

Paid theme (theme_store_id: 777, v9.1.0). Go to Styles & Settings → General Settings → Display to enter these settings.

Settings

  • Inject: End of

  • Selector type: CSS selector

  • Selector: variant-selects .selector-wrapper[data-option-position="2"]

Targets the second option selector (typically Size). If size is not the second option on your store, adjust the data-option-position value.

Custom CSS

Add to Advanced → Custom CSS:

.ks-chart-container {
    margin-left: auto;
    display: inline;
    width: unset;
}
.ks-chart-container.sizing-chart-container.ks-container-with-modal {
    height: 1.5rem;
}
.radio__fieldset {
    width: 100%;
}
legend.radio__legend {
    display: flex;
    align-items: center;
}
.selector-wrapper[data-option-position="2"] {
    position: relative;
}
.selector-wrapper[data-option-position="2"] .ks-chart-modal-link {
    position: absolute;
    top: -2px;
    right: 0;
}
@media (max-width: 767px) {
    .selector-wrapper[data-option-position="2"] .ks-chart-modal-link {
        top: -5px;
    }
}
Did this answer your question?