How can I change the 'Default Title' text on my sticky add to cart button?

[Cillouettes]

Hi all,

I have recently added a sticky add to cart button. I have used the guide from https://www.huratips.com/tech-tips/how-to-create-sticky-add-to-cart-button-in-shopify-product-page-w... - Which worked perfect.

However when the product only have 1 variant option it inserts the text "Default Title" as the name of the product in the bottom.

How can i change this text?

Example of "default title" text:

https://www.cillouettes.dk/products/silke-scrunchie-big-pakke-med-4-colorful

Example of product with more variants 

https://www.cillouettes.dk/products/silke-pudebetraek-mulberry-hvid

My code snippet:

{% if template contains 'product' %}
<div id="huratips-addtocart-sticky">
<form action="/cart/add" method="post">
<select name="id">
{% for variant in product.variants %}
<option value="{{variant.id}}">{{variant.title}}</option>
{% endfor %}
</select>

<button type="submit">Tilføj til kurv</button>
</form>
</div>
<style>
#huratips-addtocart-sticky{
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 9999;
background: #fff;
padding-top: 5px;
border-top: 1px solid #e2e2e2;
}
#huratips-addtocart-sticky select,
#huratips-addtocart-sticky input,
#huratips-addtocart-sticky button{
height:40px;
margin:0 5px;
vertical-align: middle;
}
#huratips-addtocart-sticky input{
width: 60px;
text-align: center;
}
#huratips-addtocart-sticky button{
padding:0 10px;
}
</style>
{% endif %}

[SheetalZadfiya]

Hi @Cillouettes, 

I have checked and found that when there is no variant it will display the Default title and you can not change it. In another product, there are multiple variants that's why it's showing the variant names. At least, one single variant is required in the product otherwise it will show the Default tile.

However, you can change the text conditionally. Please check the below code.

<div id="huratips-addtocart-sticky">
<form action="/cart/add" method="post">
<select name="id">
{% for variant in product.variants %}
<option value="{{variant.id}}">{% if variant.title == 'Default Title' %}Your Custom Text{% else %}{{variant.title}}{% endif %}</option>
{% endfor %}
</select>
<input type="number" name="quantity" value="1" min="1">
<button type="submit">Add To Cart</button>
</form>
</div>

In the <option>, you can give conditions and change the text you want to display.

Let me know how it goes.

Thank you.

[huynhmaianhkiet]

Hi @Cillouettes 
I'm Kiet, HuraTips is my blog. Thank you for your attention.
About your issue, you can fix it by 
Replace:

<select name="id">
{% for variant in product.variants %}
<option value="{{variant.id}}">{{variant.title}}</option>
{% endfor %}
</select>

to

{% if product.variants.size > 1 %}
<select name="id">
{% for variant in product.variants %}
<option value="{{variant.id}}">{{variant.title}}</option>
{% endfor %}
</select>
{% else %}
<input type="hidden" name="id" value="{{product.selected_or_first_available_variant.id}}">
{% endif %}

I hope it's helpful to you.

[coderashraf]

Recently, I created this sticky add-to-cart button on the Shopify product page. I hope it will help a lot of Shopify store owners or developers.

How to use: 

1 . Make a snippet

2. Add these code to this snippet

3. Render this snippet bottom of the product page.

Code: 

<div class="product-sticky-add-cart-new custom-sticky-form">
{% form 'product', product, id:'product-form' , novalidate: 'novalidate' %}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
<div class="sticky-cart-custom-wrapper">

{% unless product.has_only_default_variant %}
<variant-selector2 data-url="{{ product.url }}" data-section="{{ section.id }}">
{% for option in product.options_with_values %}

<label for="Option-{{ section.id }}-{{ forloop.index }}"></label>
<div class="select-ption-custom">
<select class="select-variant-options" name="options[{{option.name | escape}}]" id="Option-{{ section.id }}-{{ forloop.index0 }}">
{% for value in option.values %}
<option
{% if option.selected_value == value %}
selected="selected"
{% endif %}
value="{{ value }}">
{{ value }}
</option>
{% endfor %}
</select>
</div>
{% endfor %}
<script type="application/json">
{{product.variants | json}}
</script>
</variant-selector2>
{% endunless %}

<div class="submit-button-custom">
<button
type="submit"
name="add"
class="add-to-cart-custom-button btn"
{%- if product.selected_or_first_available_variant.available == false -%} disabled {% endif %}>
<span>
{%- if product.selected_or_first_available_variant.available -%}

{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>

</button>
</div>
</div>
{% endform %}

</div>

<style>
.sticky-cart-custom-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.select-variant-options {
padding: 15px 30px;
margin-right: 10px;
cursor:pointer;
box-shadow: 0px 1px 6px #0000008a;
border-radius: 10px;
}
span.icon-caret svg {
width: 20px;
height: 20px;
margin-bottom: 0;
padding-bottom: 0;
line-height: 0;
}
.submit-button-custom button {
padding: 15px 30px;
border: none;
background: {{ section.settings.button_background_sticky }};
color:{{section.settings.sticky_text}};
cursor:pointer;
box-shadow: 0px 1px 6px #0000008a;
font-weight: 600;
border-radius: 10px;
}

.product-sticky-add-cart-new.custom-sticky-form {
position: fixed;
padding: 15px 0;
bottom: 0;
z-index: 9999;
width: 100%;
background: {{section.settings.background}};
transform: translateY(1000px);
transition: .4s ease-in-out;
}
.sticky-cart2 .custom-sticky-form {
transform:translateY(0) !important;
}
variant-selector2 {
display: flex;
}
.sticky-cart .product-form__buttons button {
background: {{ section.settings.button_background_sticky }};
color:{{section.settings.sticky_text}};
}
.sticky-cart .product-form__buttons{
background: {{section.settings.background}};
}
@media(max-width:500px){
.sticky-cart-custom-wrapper{
flex-direction:column;
}
variant-selector2 {
display:none;
}
.select-variant-options {
padding: 8px 25px;
}
</style>

<script>

class VariantSelector2 extends HTMLElement {
constructor(){
super();
this.addEventListener('change', this.onVariantChange);
}
onVariantChange(){
this.getSelectedOptions();
this.getSelectedVariant();
if(this.currentVariant){
this.updateURL();
this.updateFormID();
}
}

getSelectedOptions(){
this.options = Array.from(this.querySelectorAll('select'), select => select.value)
console.log(this.options)
}

getVariantJSON(){
this.variantData = this.variantData || JSON.parse(this.querySelector('[type="application/json"]').textContent)
return this.variantData;
}

getSelectedVariant(){
this.currentVariant = this.getVariantJSON().find((variant) =>{
const findings = !variant.options.map((option,index) => {
return this.options[index] === option
}).includes(false);
if(findings) return variant;
})

console.log(this.currentVariant);
}

updateURL(){
if(!this.currentVariant) return
window.history.replaceState({},'', `${this.dataset.url}?variant=${this.currentVariant.id}`);
}

updateFormID(){
const form_input = document.querySelector('#product-form').querySelector('input[name="id"]');
form_input.value = this.currentVariant.id;
}

}
customElements.define('variant-selector2', VariantSelector2);

</script>

<script>

window.addEventListener('scroll', function(){
const pageYOffset = window.pageYOffset;
const buttonOffsetHeight = document.querySelector('.product-form__buttons').offsetTop;
console.log(buttonOffsetHeight)
if (pageYOffset > buttonOffsetHeight) {
document.body.classList.add('sticky-cart2');
}else{
document.body.classList.remove('sticky-cart2');
}
})
</script>

Hass Asraf

Shopify Developer

Spark Cognitive 

[lameczla]

Amazing, thank you!!

Any way to sync when you select different variant on sticky that it is synced automatically on the regular variant selector?

[akaHollyBenson]

Your code works perfect! Anyway to have the cart drawer pop up instead of going to the cart page?

[siisii03]

Can you help me how to have cart drawer? My theme currently doesn't support this and no free app

[huynhmaianhkiet]

Hi there,

I have also written an article to guide you on how to create a cart drawer slide cart manually here: https://www.huratips.com/tech-tips/how-to-create-a-cart-drawer-slide-cart-manually-in-shopify-withou....

I hope it's helpful to you.

[akaHollyBenson]

Hi Hura, your codes work perfectly on my store, however, I'd like it to be direct to the cart drawer instead of  going to the cart page, I've change the cart type to cart drawer in my theme settings, What else should I do to make it right?