A user successfully implemented a sticky add-to-cart button using a guide but wants to simplify it by removing the price text and background, keeping only the button itself.
Current Implementation:
Created using a custom snippet called sticky-atc-custom
Includes product form markup with error handling
Contains CSS styling for positioning (fixed at bottom, z-index 2) and layout
Desired Modifications:
Remove price display
Remove background styling
Retain only the button functionality
Technical Details:
The snippet uses Liquid templating for Shopify
CSS controls sticky positioning, flexbox layout, and visual styling
Includes variant image display and product info containers
The user is seeking assistance with the CSS/HTML modifications needed to achieve this cleaner appearance while maintaining the sticky functionality.
Summarized with AI on November 11.
AI used: claude-sonnet-4-5-20250929.
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
{%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
{{ 'products.product.sold_out' | t }}
{%- else -%}
{{ 'products.product.add_to_cart' | t }}
{%- endif -%}
{%- render 'loading-spinner' -%}
{%- endform -%}
.options-container.hide-variant-options {
display: none;
}
.mobile-title {
display: flex;
font-size: 11px;
}
.desktop-title {
display: none;
}
@media (min-width: 750px) {
.mobile-title {
display: none;
}
.desktop-title {
display: flex;
font-size: 15px;
}
}
.content-container {
display: flex;
flex-direction: column; /* To stack its children vertically */
flex: 1; /* Allow it to take up the remaining space */
align-items: stretch; /* Make children take full width */
}
.product-details-container {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1; /* Allow it to take up the remaining space */
}
/* Use flexbox for the product form */
.product-form.sticky-atc {
display: flex;
justify-content: space-between; /* Spread children horizontally */
align-items: center; /* Center children vertically */
}
/* The product info and button container will take up the remaining space */
.product-info-container {
flex: 1; /* Take up all available space */
display: flex;
flex-direction: column;
justify-content: center;
}
/* The image container will only take up as much space as it needs */
.selected-variant-image-container {
flex-shrink: 0; /* Prevent shrinking */
height: 64px; Adjust as per your requirement
overflow: hidden;
margin-left: 0px; /* Add some space between product info and image */
margin-right: 10px; /* Space between image and right edge of screen */
display: flex; /* Used to center the image both vertically and horizontally */
align-items: center; /* Vertically center the image */
justify-content: center; /* Horizontally center the image */
}
#selectedVariantImage {
max-height: 100%; /* Ensures image doesn't exceed container height
width: auto; Auto width to maintain aspect ratio */
}
#StickyProductSubmitButton-{{ section_id }} {
margin-bottom: 0px;
}
.sticky-atc {
/* display: none; */
position: fixed;
bottom: -200px;
left: 0;
z-index: 2;
width: 100%;
align-items: center;
background-color: #fff; /* or any desired color */
border: 1px solid #e0e0e0; /* optional */
border-radius: 4px; /* optional */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* optional for a subtle shadow */
padding: 10px 10px; /* Optional: for some spacing */
transition: bottom 0.3s ease-out; /* This adds the smooth slide animation */
}
.sticky-atc.show {
bottom: 0; /* This will make the sticky ATC box slide up */
}
.selected-variant-title {
/* display: block; Makes it take the full width */
padding: 0px 0; /* Adds some spacing above and below the title */
font-weight: bold;
font-size: 12px;
text-align: left; /* Centers the text */
}
.selected-variant-option {
color: #666; /* optional for a subtle color */
font-size: 12px;
}
.selected-variant-details {
display: flex;
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Center them vertically */
align-items: center;
}
.options-container {
width: 100%;
display: grid;
grid-template-columns: 65% 35%;
column-gap: 10px;
align-items: flex-end;
}
.selected-variant-option {
white-space: nowrap; /* Prevent text from wrapping within the element */
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; /* Ensures that the option doesn't overflow its container */
flex-shrink: 0; /* Prevent the option from shrinking */
flex-grow: 0; /* Prevent the option from growing */
align-items: center;
}
.price-container {
display: flex;
justify-content: flex-start; /* Adjust horizontally */
align-items: center;
width: 100%; /* Take up full width */
/* margin-top: 10px; Add some top margin for spacing */
}
.selection-price {
font-size: 12px; /* Adjust font size as needed */
font-weight: bold;
color: #d53600; /* Adjust color as needed */
}
.compared-price {
font-size: 10px; /* Adjust font size as needed */
text-decoration: line-through;
color: #888; /* A lighter color to indicate it's the old price */
margin-right: 10px; /* Space between actual price and compared price */
}
.atc-button-container {
align-items: center !important;
}
/* This media query targets devices with a width of 750px and above (desktops) */
@media (min-width: 750px) {
.sticky-atc {
bottom: auto; /* Reset the bottom property for desktop */
top: -200px; /* Start off-screen */
transition: bottom 0.3s ease-out; /* Transition for desktop */
padding-top: 5px;
padding-bottom: 5px;
}
.sticky-atc.show {
top: auto; /* Reset the bottom property for desktop */
bottom: 0px; /* Or the height of your sticky menubar if you have one */
}
.product-details-container {
gap: 20px;
}
.selected-variant-header-container {
display: flex;
flex: 0 0 40%;
align-items: center;
flex: 1; /* Allow it to take up the remaining space */
}
.selected-variant-image-container {
height: 50px; Adjust as per your requirement */
}
.product-info-container {
flex: 0 0 60%;
flex-direction: row; /* On desktop, layout children horizontally */
}
.selected-variant-details {
flex-direction: row;
flex: 0 0 70%; /* 70% of the parent's width */
justify-content: space-between;
padding: 0px 10px;
}
.selected-variant-option {
justify-content: center;
}
.options-container {
flex: 0 0 50%; /* 55% of the parent's width */
}
.price-container {
flex: 0 0 50%; /* 45% of the parent's width */
justify-content: right;
}
.atc-button-container {
flex: 0 0 30%; /* 30% of the parent's width */
max-width: 40rem;
}
}
@media (min-width: 990px) {
.sticky-atc.show {
bottom: 0px; /* Or the height of your sticky menubar if you have one */
}
}
Instruction Step 2: Now go to global.js and search updatemedia then enter the code given below (follow the video carefully)
// Update the ATC box image
const atcBoxImage = document.querySelector(‘#selectedVariantImage’);
if (newMediaModal && newMediaModal.src && atcBoxImage) {
atcBoxImage.src=newMediaModal.src;
}
Instruction Step 3: In global.js search renderproductinfo and paste the code given below (follow the video carefully)
Instruction Step 6: If you want to keep updating the data of variant when changing them multiple times add this line of code in updateURL() and please follow the video to do it correctly