Shopify themes, liquid, logos, and UX
Hi there,
I would like to add "Express Checkout" in form of text above the dynamic checkout buttons (which should only show if the dynamic checkout buttons show), so that users are not confused why these buttons are bigger than the others. I know my way around coding only a little bit (I made small customizations myself), but with this, I can't even figure out where in the cart.liquid the right place would be to add this customization, nor if I can actually add this to a liquid file. Do I need to create a snippet for this? Is this a quick fix or is it rather complicated and should I put this too on my long list for a fiverr developer? 😄
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 cart.liquid code
@KetanKumar here's my code:
<!-- /templates/cart.liquid -->
{% comment %}
For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments
{% endcomment %}
<div class="grid">
<div class="grid__item large--five-sixths push--large--one-twelfth">
{% if cart.item_count > 0 %}
<header class="section-header text-center">
<h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
<hr class="hr--small">
</header>
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
<div class="cart__row medium-down--hide cart__header-labels">
<div class="grid--full">
<div class="grid__item large--two-fifths push--large--three-fifths">
<div class="grid--full">
<div class="grid__item one-third medium-down--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item two-thirds medium-down--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>
{% comment %}
Loop through products in the cart
{% endcomment %}
{% for item in cart.items %}
<div class="cart__row">
<div class="grid--full cart__row--table-large">
<div class="grid__item large--three-fifths">
<div class="grid">
<div class="grid__item one-third">
<a href="{{ item.url }}" class="cart__image">
{% comment %}
More image size options at:
- http://docs.shopify.com/themes/filters/product-img-url
{% endcomment %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="grid__item two-thirds">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
</a>
{% unless item.product.has_only_default_variant %}
<p class="cart__product-meta">
{{ item.variant.title }}
</p>
{% endunless %}
{% if settings.product_vendor_enable %}
<p class="cart__product-meta">{{ item.vendor }}</p>
{% endif %}
{% unless item.selling_plan_allocation == nil %}
<p class="cart__product-meta">{{ item.selling_plan_allocation.selling_plan.name }}</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="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">
{{ 'cart.general.remove' | t }}
</a>
</p>
</div>
</div>
</div>
<div class="grid__item large--two-fifths cart__pricing">
<div class="grid--full cart__row--table{% if item.line_level_discount_allocations != blank %} cart__row--table-with-discount{% endif %}">
<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.final_line_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del class="cart__price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.unit_price_measurement -%}
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span class="cart__unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart-list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
<span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row cart__row--last">
<div class="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 large--seven-twelfths cart__note-container">
<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 large--five-twelfths text-center large--text-right{% if settings.cart_notes_enable %} cart__subtotal-container{% else %} push--large--seven-twelfths{% endif %}">
{%- if cart.cart_level_discount_applications != blank -%}
<div class="grid--full cart__row--table">
<div class="cart__discounts">
{%- for discount_application in cart.cart_level_discount_applications -%}
<span class="order-discount order-discount--title order-discount--cart">
<span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
</span>
<span class="order-discount order-discount--cart">-{{ discount_application.total_allocated_amount | money }}</span>
{%- endfor -%}
</div>
</div>
{%- endif -%}
<div class="grid--full cart__row--table">
<div class="grid__item one-half large--two-thirds large--text-center">
<p class="cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half large--one-third">
<p class="cart__subtotal">{{ cart.total_price | money }}</p>
</div>
</div>
{%- capture taxes_shipping_checkout -%}
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<p class="rte"><em>{{ taxes_shipping_checkout }}</em></p>
<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
<button type="submit" name="checkout" class="btn cart__checkout">
{{ 'cart.general.checkout' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span>
</button>
{% if additional_checkout_buttons and settings.cart_type != 'drawer' %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</form>
{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<header class="section-header text-center">
<h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
<hr class="hr--small">
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<p class="cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t: link: routes.all_products_collection_url }}</p>
<p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
</header>
{% endif %}
</div>
</div>
thanks please update this code
also, find this text "New Text here..."
<!-- /templates/cart.liquid -->
{% comment %}
For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments
{% endcomment %}
<div class="grid">
<div class="grid__item large--five-sixths push--large--one-twelfth">
{% if cart.item_count > 0 %}
<header class="section-header text-center">
<h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
<hr class="hr--small">
</header>
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
<div class="cart__row medium-down--hide cart__header-labels">
<div class="grid--full">
<div class="grid__item large--two-fifths push--large--three-fifths">
<div class="grid--full">
<div class="grid__item one-third medium-down--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item two-thirds medium-down--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>
{% comment %}
Loop through products in the cart
{% endcomment %}
{% for item in cart.items %}
<div class="cart__row">
<div class="grid--full cart__row--table-large">
<div class="grid__item large--three-fifths">
<div class="grid">
<div class="grid__item one-third">
<a href="{{ item.url }}" class="cart__image">
{% comment %}
More image size options at:
- http://docs.shopify.com/themes/filters/product-img-url
{% endcomment %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="grid__item two-thirds">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
</a>
{% unless item.product.has_only_default_variant %}
<p class="cart__product-meta">
{{ item.variant.title }}
</p>
{% endunless %}
{% if settings.product_vendor_enable %}
<p class="cart__product-meta">{{ item.vendor }}</p>
{% endif %}
{% unless item.selling_plan_allocation == nil %}
<p class="cart__product-meta">{{ item.selling_plan_allocation.selling_plan.name }}</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="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0">
{{ 'cart.general.remove' | t }}
</a>
</p>
</div>
</div>
</div>
<div class="grid__item large--two-fifths cart__pricing">
<div class="grid--full cart__row--table{% if item.line_level_discount_allocations != blank %} cart__row--table-with-discount{% endif %}">
<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.final_line_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del class="cart__price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.unit_price_measurement -%}
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span class="cart__unit-price">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart-list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
<span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row cart__row--last">
<div class="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 large--seven-twelfths cart__note-container">
<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 large--five-twelfths text-center large--text-right{% if settings.cart_notes_enable %} cart__subtotal-container{% else %} push--large--seven-twelfths{% endif %}">
{%- if cart.cart_level_discount_applications != blank -%}
<div class="grid--full cart__row--table">
<div class="cart__discounts">
{%- for discount_application in cart.cart_level_discount_applications -%}
<span class="order-discount order-discount--title order-discount--cart">
<span class="icon icon-saletag" aria-hidden="true"></span><span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
</span>
<span class="order-discount order-discount--cart">-{{ discount_application.total_allocated_amount | money }}</span>
{%- endfor -%}
</div>
</div>
{%- endif -%}
<div class="grid--full cart__row--table">
<div class="grid__item one-half large--two-thirds large--text-center">
<p class="cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half large--one-third">
<p class="cart__subtotal">{{ cart.total_price | money }}</p>
</div>
</div>
{%- capture taxes_shipping_checkout -%}
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<p class="rte"><em>{{ taxes_shipping_checkout }}</em></p>
<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
<button type="submit" name="checkout" class="btn cart__checkout">
{{ 'cart.general.checkout' | t }} <span class="icon icon-arrow-right" aria-hidden="true"></span>
</button>
<p class="new-text">New Text here...</p>
{% if additional_checkout_buttons and settings.cart_type != 'drawer' %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</form>
{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<header class="section-header text-center">
<h1 class="text-center">{{ 'cart.general.title' | t }}</h1>
<hr class="hr--small">
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<p class="cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t: link: routes.all_products_collection_url }}</p>
<p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
</header>
{% endif %}
</div>
</div>
User | RANK |
---|---|
68 | |
65 | |
63 | |
53 | |
47 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023