Shopify themes, liquid, logos, and UX
I am trying to add a responsive shipping date to my atc button, but everytime I select another variant, it keeps going away
Buy buttons liquid with code:
{%- if product != blank -%}
{%- assign variant_picker_block = section.blocks | where: 'type', 'variant_picker' | first -%}
{%- assign recipient_feature_active = false -%}
{%- if product.gift_card? and show_gift_card_recipient -%}
{%- assign recipient_feature_active = true -%}
{%- assign show_payment_button = false -%}
{%- endif -%}
{%- form 'product', product, is: 'product-form', id: form_id -%}
<input type="hidden" {% if variant_picker_block != blank %}disabled{% endif %} name="id" value="{{ product.selected_or_first_available_variant.id }}">
{% liquid
assign button_disabled = false
if product.selected_or_first_available_variant.available == false
assign button_disabled = true
assign button_content = 'product.general.sold_out_button' | t
else
if product.template_suffix contains 'pre-order'
assign button_content = 'product.general.pre_order_button' | t
else
assign button_content = 'product.general.add_to_cart_button' | t
endif
endif
%}
<div class="v-stack gap-4">
{%- if recipient_feature_active -%}
<gift-card-recipient class="gift-card-recipient v-stack gap-3">
{%- assign checkbox_label = 'gift_card.recipient.checkbox' | t -%}
{%- render 'checkbox', label: checkbox_label, name: 'properties[__shopify_send_gift_card_to_recipient]' -%}
<div class="gift-card-recipient__fields js:hidden">
<div class="fieldset">
{%- liquid
assign recipient_email_label = 'gift_card.recipient.email_label' | t
render 'input', type: 'email', label: recipient_email_label, name: 'properties[Recipient email]', value: form.email, required: true
assign recipient_name_label = 'gift_card.recipient.name_label' | t
render 'input', label: recipient_name_label, name: 'properties[Recipient name]', value: form.name
assign send_on_label = 'gift_card.recipient.send_on_label' | t
render 'input', type: 'date', label: send_on_label, name: 'properties[Send on]', value: form.send_on, pattern: '\d{4}-\d{2}-\d{2}'
render 'input', type: 'hidden', name: 'properties[__shopify_offset]'
assign message_label = 'gift_card.recipient.message_label' | t
render 'input', label: message_label, name: 'properties[Message]', value: form.message, multiline: 3, maxlength: 200, show_max_characters_count: true
-%}
</div>
</div>
</gift-card-recipient>
{%- endif -%}
<buy-buttons class="buy-buttons {% if show_payment_button %}buy-buttons--has-dynamic{% endif %}" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
{%- if show_payment_button and atc_button_background == blank and atc_button_text_color == blank -%}
{%- assign atc_button_style = 'outline' -%}
{%- else -%}
{%- assign atc_button_style = 'solid' -%}
{%- endif -%}
{%- capture current_date %}
{{ 'now' | date: "%s" | plus: 86400 | date: "%d %B" }}
{%- endcapture %}
{%- assign shipping_text = "Ships <b>" | append: current_date | append: "</b>" -%}
{%- assign button_content_with_date = "<div style='display: flex; justify-content: center; align-items: center;'><span style='font-size: 1em; margin-right: 10px;'>" | append: button_content | append: "</span><span style='font-size: 0.75em;'>" | append: shipping_text | append: "</span></div>" -%}
{%- render 'button', content: button_content_with_date | escape, type: 'submit', disabled: button_disabled, style: atc_button_style, background: atc_button_background, text_color: atc_button_text_color, stretch: true -%}
{%- if show_payment_button -%}
{{- form | payment_button -}}
<style>
#shopify-section-{{ section.id }} .shopify-payment-button {
{%- if payment_button_background != blank and payment_button_background != 'rgba(0,0,0,0)' -%}
--button-background: {{ payment_button_background.rgb }};
{%- endif -%}
{%- if payment_button_text_color != blank and payment_button_text_color != 'rgba(0,0,0,0)' -%}
--button-text-color: {{ payment_button_text_color.rgb }};
{%- endif -%}
{%- unless product.selected_or_first_available_variant.available -%}
display: none;
{%- endunless -%}
}
</style>
{%- endif -%}
</buy-buttons>
</div>
{%- endform -%}
{%- else -%}
<buy-buttons class="buy-buttons" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
{%- capture current_date %}
{{ 'now' | date: "%s" | plus: 86400 | date: "%d %B" }}
{%- endcapture %}
{%- assign shipping_text = "Ships <b>" | append: current_date | append: "</b>" -%}
{%- assign button_content = 'product.general.add_to_cart_button' | t -%}
{%- assign button_content_with_date = "<div style='display: flex; justify-content: center; align-items: center;'><span style='font-size: 1em; margin-right: 10px;'>" | append: button_content | append: "</span><span style='font-size: 0.75em;'>" | append: shipping_text | append: "</span></div>" -%}
{%- render 'button', content: button_content_with_date | escape, type: 'submit', background: variant_picker_block.settings.atc_button_background, text_color: variant_picker.settings.atc_button_text_color, stretch: true -%}
</buy-buttons>
{%- endif -%}
It looks like your shipping date isn't updating when you select different variants. This is because the variant change doesn't trigger the re-render of the shipping date. You can fix this by using JavaScript to update the shipping date dynamically when the variant changes.
Here's a quick way to add that functionality:
document.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
var dateSpan = document.querySelector('#shipping-date'); // Add an id to your date span
var updateDate = function() {
var date = new Date();
date.setDate(date.getDate() + 1);
var options = { day: '2-digit', month: 'long' };
dateSpan.innerHTML = `Ships <b>${date.toLocaleDateString('en-US', options)}</b>`;
};
form.addEventListener('change', function(event) {
if (event.target.name === 'id') {
updateDate();
}
});
updateDate(); // Initial call
});
Update your HTML to include an id for the date span
This script updates the shipping date whenever a variant is selected
If this fixed your issue, likes and accepting as a solution are highly appreciated
| Build an online presence with our custom-built Shopify Theme: EcomifyTheme
| Check out our reviews: Trustpilot Reviews
| We are Shopify Partners: EcomGraduates Shopify Partner
I can't seem to get it to work, where do I need to integrate it in the code?
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025