Monthly
Every 3 Months
I tried everything from inspect element, putting the z-index as important, putting the toggle-slider class outside of the variant picker and it won’t show up on Shopify whatsoever. Do you guys know why that may be?
Topic summary
Issue: A custom HTML/CSS toggle slider renders locally but does not appear in the Shopify theme editor or in the storefront browser.
Implementation details: The component wraps two hidden radio inputs (#monthly, #every3months) and labels inside a #variant-picker container (position: relative). A .toggle-slider div is absolutely positioned, has a background color (#c5b538), rounded corners, width: 38%, and z-index: 1, intended to animate under the labels. CSS includes keyframe animations (shrinkSlider, growSlider) triggered by the checked state of the radios to adjust width/translateX.
Troubleshooting attempted: Used browser inspect tools, set z-index with !important, and moved the .toggle-slider outside #variant-picker. None of these changes made the slider visible in Shopify.
Context notes: The post includes the full HTML/CSS snippet, which is central to understanding the issue. No references to JavaScript or Shopify-specific settings were provided.
Status: Unresolved; the author requests explanations for why the slider fails to display in Shopify.
#variant-picker {
position: relative;
display: flex;
justify-content: center; /* Centers the labels horizontally */
align-items: center; /* Centers the labels vertically */
border-radius: 20px; /* Rounded corners for the toggle group */
border: 4px solid #c5b538; /* Border color similar to the selected label */
box-sizing: border-box; /* Ensures padding is included in width/height calculations */
margin: 20px auto; /* Adds margin to the top/bottom and auto to left/right */
font-size: 0; /* Removes space between inline elements */
flex-wrap: nowrap; /* Prevents wrapping of child items */
width: max-content;
white-space: nowrap;
padding: 8px 0px;
}
.toggle-slider {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #c5b538;
transition: transform 0.5s; /* removed width from transition */
border-radius: 15px;
width: 38%;
z-index: 1 !important;
}
@keyframes shrinkSlider {
0% {
width: 65%;
transform: translateX(55%);
}
100% {
width: 38%;
transform: translateX(0);
}
}
/* Animation when going from smaller to larger width */
@keyframes growSlider {
0% {
width: 38%;
transform: translateX(0);
}
100% {
width: 65%;
transform: translateX(55%);
}
}
#monthly:checked + label[for="monthly"],
#every3months:checked + label[for="every3months"] {
color: #002040; /* This will change the text color when the label is selected */
}
#monthly:checked ~ .toggle-slider {
animation: shrinkSlider 0.5s forwards; /* Use the shrink animation */
}
#every3months:checked ~ .toggle-slider {
animation: growSlider 0.5s forwards; /* Use the grow animation */
}
.subscription-option {
flex: 1;
display: flex;
align-items: center; /* Vertically center the content */
justify-content: center; /* Horizontally center the content */
font-size: 32px;
cursor: pointer;
transition: color 0.5s;
position: relative;
color: #c5b538;
background-color: transparent;
z-index: 2 !important;
font-family: "BasicCommercial LT Roman";
padding: 8px 24px; /* Padding can affect the centering, ensure it's appropriate */
margin: 0; /* Reset any default margins that may affect centering */
text-align: center; /* Ensure text is centered */
}
input[type="radio"] {
display: none; /* existing style */
}