Add message to cart screen when empty

Solved
Highlighted
Tourist
12 0 0

Hello,

 

I am using the Turbo theme. We're having an issue that is being looked at by Shopify & the Theme developer & Facebook, where a customer designs an item, adds to cart, later returns to the store and their cart has emptied.

 

While we are fixing, I would like to add a message to the cart page only when the cart is empty. In between "There are no items in your cart" and "Continue Shopping", I would like to insert a message which includes a link to contact us (either our contact page or email us). Also very important it displays properly on mobile (we're about 90% mobile users).

 

Screen Shot 2020-01-15 at 10.31.47 AM.png

 

 

I assume this is the code I need to change. Where exactly do I put the message? And do I include the message in "cart.general.continue_browsing_html" or on its own?

 

{% if cart.item_count == 0 %}
<div class="sixteen columns">
<div class="section clearfix">
<div class="six columns offset-by-five medium-down--one-whole">
<p class="quote">{{ 'cart.general.continue_browsing_html' | t }}</p>

<a href="{% if cart.items.first.product.collections != blank %}{{ cart.items.first.product.collections.last.url }}{% else %}/{% endif %}" class="action_button continue-button add_to_cart">{{ 'cart.general.continue_shopping_link_html' | t }}</a>
</div>
<br class="clear" />
</div>
</div>
{% else %}

 

Thank you!

0 Likes
Highlighted
Shopify Partner
1445 195 523

This is an accepted solution.

That's probably the right spot, just add a div underneath it with a link to your contact page and whatever text you want:

 

{% if cart.item_count == 0 %}
<div class="sixteen columns">
<div class="section clearfix">
<div class="six columns offset-by-five medium-down--one-whole">
<p class="quote">{{ 'cart.general.continue_browsing_html' | t }}</p>
<div>Please <a href="/pages/contact">contact</div> us if you are having issues placing your custom order. </div>
<a href="{% if cart.items.first.product.collections != blank %}{{ cart.items.first.product.collections.last.url }}{% else %}/{% endif %}" class="action_button continue-button add_to_cart">{{ 'cart.general.continue_shopping_link_html' | t }}</a>
</div>
<br class="clear" />
</div>
</div>
{% else %}

Where the "href" would be a link to whatever your contact page is.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Highlighted
Tourist
12 0 0

Perfect, thank you Ninthony! 

 

Now I just need to figure out the actual bug that is forcing me to include a message in the first place! :)

0 Likes
Highlighted
New Member
3 0 0

Is there a way to change the text color on this empty cart page. My text is showing up white on a white background. I need to change the text to black. 

 

 

Screen Shot 2020-10-23 at 12.12.28 AM.png

 

Please help! Thank you

0 Likes