Shopify themes, liquid, logos, and UX
Hi there! I'm trying to add custom text to my drawer cart but I'm not sure where to put the code. Please see the pictures for reference.
Would also like to add the payment option logos to the bottom in the drawer cart. Where in the cart code should I put it and how should it be structured?
Any possible help is greatly appreciated!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
yes please share CartDrawer code so i will update code
Hello @ccmannen,
Would you like to try an app (with 60 Days FREE Trial - BFCM Deal) that helps you to fully customize your cart drawer?
With iCart, you can not only offer various discounts to your customers but also you can show upsell, cross-sell in your cart drawer. Please check the reference images.
<div class="page-width page-content">
{% include 'breadcrumbs' %}
<div class="grid">
<div class="grid__item">
{% if cart.item_count > 0 %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</header>
<form action="/cart" method="post" novalidate class="cart">
<div class="cart__row small--hide cart__header-labels">
<div class="grid grid--full">
<div class="grid__item medium-up--two-fifths medium-up--push-three-fifths">
<div class="grid grid--full">
<div class="grid__item one-third small--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item two-thirds small--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>
{% for item in cart.items %}
<div class="cart__row">
<div class="grid grid--full cart__row--table-large">
<div class="grid__item medium-up--three-fifths">
<div class="grid">
<div class="grid__item one-quarter">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{%- assign img_url = item | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ item.aspect_ratio }}"
data-sizes="auto"
alt="{{ item.title | escape }}">
</a>
</div>
<div class="grid__item three-quarters">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<p class="cart__product-meta">
{{ item.variant.title }}
</p>
{% endunless %}
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
<p class="cart__product-meta">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" class="btn btn--small">
{{ 'cart.general.remove' | t }}
</a>
</p>
</div>
</div>
</div>
<div class="grid__item medium-up--two-fifths">
<div class="grid grid--full cart__row--table">
<div class="grid__item one-third text-center">
<label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
<input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">
</div>
<div class="grid__item two-thirds text-right">
{% if item.original_line_price != item.line_price %}
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
{% endif %}
<span class="cart__price">{{ item.price | money }}</span>
{% assign discounts_size = item.discounts | size %}
{% if discounts_size > 0 %}
{% for discount in item.discounts %}
<small class="cart__discount">{{ discount.title }}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row">
<div class="grid grid--full cart__row--table-large">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--seven-twelfths">
<div class="cart__note">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<div class="grid__item medium-up--five-twelfths text-center medium-up--text-right{% unless settings.cart_notes_enable %} medium-up--push-seven-twelfths{% endunless %}">
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--two-thirds medium-up--text-center">
<p class="h4 cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half medium-up--one-third">
<p class="h4 cart__subtotal">{{ cart.total_price | money }}</p>
</div>
</div>
{% if cart.total_discounts > 0 %}
{% assign cartTotalDiscounts = cart.total_discounts | money %}
<p class="cart__savings">{{ 'cart.general.savings_html' | t: savings: cartTotalDiscounts }}</p>
{% endif %}
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
{% if settings.enable_currencies %}
{{ 'cart.general.orders_processed_in_currency_html' | t: currency: shop.currency }}
{% endif %}
</small>
{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartPageAgree" />
<label for="CartPageAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
<button type="submit" name="update" class="btn btn--no-animate update-cart">
{{ 'cart.general.update' | t }}
</button>
<button type="submit" name="checkout" class="btn btn--no-animate cart__checkout{% if settings.cart_terms_conditions_enable %} cart__checkout--page{% endif %}">
{{ 'cart.general.checkout' | t }}
</button>
</div>
</div>
</div>
<div class="ultimate-badges"></div>
</form>
{% else %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<p>{{ 'cart.general.empty' | t }}</p>
<p class="rte">{{ 'cart.general.continue_browsing_html' | t }}</p>
</header>
{% endif %}
</div>
</div>
</div>
yes please try this
<div class="page-width page-content">
{% include 'breadcrumbs' %}
<div class="grid">
<div class="grid__item">
{% if cart.item_count > 0 %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</header>
<form action="/cart" method="post" novalidate class="cart">
<div class="cart__row small--hide cart__header-labels">
<div class="grid grid--full">
<div class="grid__item medium-up--two-fifths medium-up--push-three-fifths">
<div class="grid grid--full">
<div class="grid__item one-third small--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item two-thirds small--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>
{% for item in cart.items %}
<div class="cart__row">
<div class="grid grid--full cart__row--table-large">
<div class="grid__item medium-up--three-fifths">
<div class="grid">
<div class="grid__item one-quarter">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{%- assign img_url = item | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ item.aspect_ratio }}"
data-sizes="auto"
alt="{{ item.title | escape }}">
</a>
</div>
<div class="grid__item three-quarters">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<p class="cart__product-meta">
{{ item.variant.title }}
</p>
{% endunless %}
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
<p class="cart__product-meta">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" class="btn btn--small">
{{ 'cart.general.remove' | t }}
</a>
</p>
</div>
</div>
</div>
<div class="grid__item medium-up--two-fifths">
<div class="grid grid--full cart__row--table">
<div class="grid__item one-third text-center">
<label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
<input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">
</div>
<div class="grid__item two-thirds text-right">
{% if item.original_line_price != item.line_price %}
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
{% endif %}
<span class="cart__price">{{ item.price | money }}</span>
{% assign discounts_size = item.discounts | size %}
{% if discounts_size > 0 %}
{% for discount in item.discounts %}
<small class="cart__discount">{{ discount.title }}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row">
<div class="grid grid--full cart__row--table-large">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--seven-twelfths">
<div class="cart__note">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<p class="freetext">free Text here...</p>
<div class="grid__item medium-up--five-twelfths text-center medium-up--text-right{% unless settings.cart_notes_enable %} medium-up--push-seven-twelfths{% endunless %}">
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--two-thirds medium-up--text-center">
<p class="h4 cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half medium-up--one-third">
<p class="h4 cart__subtotal">{{ cart.total_price | money }}</p>
</div>
</div>
{% if cart.total_discounts > 0 %}
{% assign cartTotalDiscounts = cart.total_discounts | money %}
<p class="cart__savings">{{ 'cart.general.savings_html' | t: savings: cartTotalDiscounts }}</p>
{% endif %}
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
{% if settings.enable_currencies %}
{{ 'cart.general.orders_processed_in_currency_html' | t: currency: shop.currency }}
{% endif %}
</small>
{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartPageAgree" />
<label for="CartPageAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
<button type="submit" name="update" class="btn btn--no-animate update-cart">
{{ 'cart.general.update' | t }}
</button>
<button type="submit" name="checkout" class="btn btn--no-animate cart__checkout{% if settings.cart_terms_conditions_enable %} cart__checkout--page{% endif %}">
{{ 'cart.general.checkout' | t }}
</button>
</div>
</div>
</div>
<div class="ultimate-badges"></div>
</form>
{% else %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<p>{{ 'cart.general.empty' | t }}</p>
<p class="rte">{{ 'cart.general.continue_browsing_html' | t }}</p>
</header>
{% endif %}
</div>
</div>
</div>
yes please find this text
free Text here..
and update as you like
that is demo test not dynamic or sent theme zip code
Where else should I add code to make it work?
yes please sent theme download and sent me
User | RANK |
---|---|
226 | |
158 | |
61 | |
55 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023