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

Store Design
1

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-without-app.html - 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’ %}

Tilføj til kurv

#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; } {% endif %}
1 Like
2

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.

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

Let me know how it goes.

Thank you.

3

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

to

{% if product.variants.size > 1 %}

{% else %}

{% endif %}

I hope it’s helpful to you.

4

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

  1. Add these code to this snippet

  2. Render this snippet bottom of the product page.

Code:


{% form 'product', product, id:'product-form' , novalidate: 'novalidate' %}

{% unless product.has_only_default_variant %}

{% endunless %}

{% endform %}

Hass Asraf

Shopify Developer

Spark Cognitive

1 Like
5

Amazing, thank you!!

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

6

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?

7

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

8

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

9

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-without-shopify-apps.html.

I hope it’s helpful to you.