Shopify themes, liquid, logos, and UX
My company is using our online store for retail and wholesale ordering. The url is https://inpursuitoftea.com/ and we're using the Editions theme.
We need to add some custom text to the account and cart pages with basic rich text styling. I have very limited coding experience so am struggling with how to insert text via liquid, and the page builder apps in the app store manage to cover a lot of what we don't need while failing to include these two page formats to edit.
Could someone walk me through how to add text elements like this?
yes please shore where do you add this text give me screenshot
Thank you for the help. Here are the screenshots with the text we want to add. In both cases basic text format is fine, we just don't know how to add this! On the login page, we want the words "email us" to hyperlink to a mailto:info@inpursuitoftea.com. Thank you!
yes please bot page code so i will update code
I don't understand what you mean, what is bot code
oh sorry
i mean i need both file code
I'm still not sure I know what you mean, but this is the code under the Sections folder titled static-cart.liquid.
<script
type="application/json"
data-section-type="static-cart"
data-section-id="{{ section.id }}"
>
</script>
{% assign cart_notes = section.settings.show_cart_notes %}
<div class="cart">
<div class="cart__header">
<h1>{{ 'cart.general.title' | t }}</h1>
{% unless cart.item_count > 0 %}
<h2>{{ 'cart.general.empty' | t }}</h2>
{% endunless %}
</div>
{% if cart.item_count > 0 %}
<form action="{{ routes.cart_url }}" method="post" class="cart-form">
{% include 'cart-table' %}
<div class="cart__footer">
{% if customer.tags contains 'Wholesale' %}
<div class="cart__notes">
<label for="cart-notes-area">
{% if section.settings.cart_notes != blank %}
{{ section.settings.cart_notes }}
{%endif%}
</label>
<textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
</div>
{%else%}
{% if cart_notes %}
<div class="cart__notes">
<label for="cart-notes-area">{{ 'cart.general.special_instructions' | t }}</label>
<textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
</div>
{% endif %}
{% endif %}
<div class="cart__totals">
{% include 'cart-discounts' %}
<h2 class="cart__subtotal">
<span class="subtotal">
{{ 'cart.general.subtotal' | t }}
</span>
<span class="money total-price" data-total-price>
{% unless cart.total_price != wcp_total_price %}
<span class="wcp-original-cart-total" id="wp_original-cart-total">{{ cart.total_price | money}}</span>
{% endunless %}
<span class="wcp-cart-total"></span>
<span class="wcp-cart-total_2">{{wcp_total_price | money }}</span>
</span>
<div class="additional-notes">
<span class="wcp-minimums-note"></span>
<span class="wcp-extra-note "></span>
</div>
</h2>
<button
class="cart__checkout-button"
type="submit"
name="checkout"
value="{{ 'cart.general.checkout' | t }}"
>
{% if section.settings.enable_checkout_lock_icon %}
{% render 'icon-library', id: 'icon-lock' %}
{% endif %}
<span>{{ 'cart.general.checkout' | t }}</span>
</button>
{% if customer.tags contains 'wpdnet' %}
{% if shop.metafields.wcp_net.isNetEnabled == 'true' or shop.metafields.wcp_net.isNetEnabled == '1' %}
<div style="margin-top:30px;">
<p>{{shop.metafields.wcp_net.netCartMsg}}</p>
<a id="wcp-30-open" class="customer-login__submit">
{{shop.metafields.wcp_net.netBtnMsg}}
</a>
</div>
{% endif %}
{% endif %}
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
<script>
var v = setInterval(function()
{
if(typeof window.wcp_data != 'undefined' && typeof window.wcp_data.discounted_hash != 'undefined')
{
if((window.wcp_data.discounted_hash.discount_value || window.wcp_data.discounted_hash.shipping)
&& $('.additional-checkout-buttons').children(':visible').length > 0)
{
$('.additional-checkout-buttons').html("Other payment options are available at checkout");
clearInterval(v);
}
}
},500);
</script>
{% endif %}
</div>
</div>
</form>
{% endif %}
{% if section.settings.use_continue_shopping %}
<a href="/" class="cart__continue-shopping">
{{ 'general.continue_shopping' | t }} →
</a>
{% endif %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.wcp-cart-total_2 { display:none }
</style>
<script>
function hide_wcp_total(){
var check = $('.wcp-cart-total').text();
if(check.length > 2 || $('#wp_original-cart-total').length != 0 ){
$('.wcp-cart-total_2 ').hide();
$('#wcp-30-open').on('click',function(){
$('.net-order-prices s').hide();
$('.net-order-prices .wcp-original-cart-total').hide();
});
}else{
$('.wcp-cart-total_2 ').show();
}
}
var timesRun = 0;
var interval = setInterval(function(){
timesRun += 1;
if(timesRun === 10){
clearInterval(interval);
}
hide_wcp_total();
}, 1000);
</script>
<script>
$('#wcp-30-open').on('click',function(){
$('.net-order-prices s').hide();
$('.net-order-prices .wcp-original-cart-total').hide();
});
</script>
{% schema %}
{
"name": "Cart",
"settings": [
{
"type": "checkbox",
"id": "enable_checkout_lock_icon",
"label": "Show lock icon on checkout button",
"default": false
},
{
"type": "checkbox",
"id": "show_cart_notes",
"label": "Enable order notes"
},
{
"type": "checkbox",
"id": "use_continue_shopping",
"label": "Show 'continue shopping' button"
},
{
"type": "text",
"id": "cart_notes",
"label": "whole sale cart note"
}
]
}
{% endschema %}
And this is customers/login.liquid:
<div class="login-page">
<div id="login" class="login-page__login">
<div class="login-page__header">
<h1 class="login-page__heading">{{ 'customer.login.header' | t }}</h1>
{% if shop.checkout.guest_login %}
{% form 'guest_login' %}
<button
class="login-page__guest-login"
type="submit"
>
{{ 'customer.login.guest_checkout' | t }}
{% include 'icon-library', id: 'icon-arrow-right' %}
</button>
{% endform %}
{% endif %}
</div>
{% form 'customer_login', class: 'customer-login' %}
{{ form.errors | default_errors }}
<div class="customer-email">
<label class="customer-email__label" for="customer-email">{{ 'general.email' | t }}</label>
<input class="customer-email__input" id="customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]">
</div>
<div class="customer-password">
<label class="customer-password__label" for="customer-password">{{ 'customer.password' | t }}</label>
<input class="customer-password__input" id="customer-password" type="password" value="" name="customer[password]">
<button class="customer-password__recover-password" type="button" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot' | t }}</button>
</div>
<button class="customer-login__submit" type="submit">{{ 'customer.login.login_submit' | t }}</button>
<a class="customer-login__register" href="{{ routes.account_register_url }}">{{ 'customer.login.sign_up' | t }}</a>
{% endform %}
</div>
<div id="recover-password" class="login-page__recover-password" style="display: none">
<div class="login-page__header">
<h1 class="login-page__heading">{{ 'customer.password_reset.title' | t }}</h1>
<span class="login-page__subheading">{{ 'customer.password_reset.message' | t }}</span>
</div>
{% form 'recover_customer_password', class: 'customer-recover-password' %}
{{ form.errors | default_errors }}
<div class="customer-email">
<label class="customer-email__label" for="recover-customer-email">{{ 'general.email' | t }}</label>
<input class="customer-email__input" id="recover-customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="email">
</div>
<div class="customer-recover-password__actions">
<button class="customer-recover-password__submit" type="submit">{{ 'customer.password_reset.submit' | t }}</button>
<button class="customer-recover-password__cancel" type="button" onclick="hideRecoverPasswordForm()">{{ 'customer.cancel' | t }}</button>
</div>
{% endform %}
</div>
</div>
<script type="text/javascript">
if (window.location.hash == '#recover') { showRecoverPasswordForm() }
function showRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'block';
document.getElementById('login').style.display='none';
window.location.hash = '#recover';
return false;
}
function hideRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'none';
document.getElementById('login').style.display = 'block';
return false;
}
</script>
great thanks for code can you please find this text and update your Custom Text Here...
customers/login.liquid
<div class="login-page">
<div id="login" class="login-page__login">
<div class="login-page__header">
<h1 class="login-page__heading">{{ 'customer.login.header' | t }}</h1>
<p class="custom-text"><div class="login-page">
<div id="login" class="login-page__login">
<div class="login-page__header">
<h1 class="login-page__heading">{{ 'customer.login.header' | t }}</h1>
{% if shop.checkout.guest_login %}
{% form 'guest_login' %}
<button
class="login-page__guest-login"
type="submit"
>
{{ 'customer.login.guest_checkout' | t }}
{% include 'icon-library', id: 'icon-arrow-right' %}
</button>
{% endform %}
{% endif %}
</div>
{% form 'customer_login', class: 'customer-login' %}
{{ form.errors | default_errors }}
<div class="customer-email">
<label class="customer-email__label" for="customer-email">{{ 'general.email' | t }}</label>
<input class="customer-email__input" id="customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]">
</div>
<div class="customer-password">
<label class="customer-password__label" for="customer-password">{{ 'customer.password' | t }}</label>
<input class="customer-password__input" id="customer-password" type="password" value="" name="customer[password]">
<button class="customer-password__recover-password" type="button" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot' | t }}</button>
</div>
<button class="customer-login__submit" type="submit">{{ 'customer.login.login_submit' | t }}</button>
<a class="customer-login__register" href="{{ routes.account_register_url }}">{{ 'customer.login.sign_up' | t }}</a>
{% endform %}
</div>
<div id="recover-password" class="login-page__recover-password" style="display: none">
<div class="login-page__header">
<h1 class="login-page__heading">{{ 'customer.password_reset.title' | t }}</h1>
<span class="login-page__subheading">{{ 'customer.password_reset.message' | t }}</span>
</div>
{% form 'recover_customer_password', class: 'customer-recover-password' %}
{{ form.errors | default_errors }}
<div class="customer-email">
<label class="customer-email__label" for="recover-customer-email">{{ 'general.email' | t }}</label>
<input class="customer-email__input" id="recover-customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="email">
</div>
<div class="customer-recover-password__actions">
<button class="customer-recover-password__submit" type="submit">{{ 'customer.password_reset.submit' | t }}</button>
<button class="customer-recover-password__cancel" type="button" onclick="hideRecoverPasswordForm()">{{ 'customer.cancel' | t }}</button>
</div>
{% endform %}
</div>
</div>
<script type="text/javascript">
if (window.location.hash == '#recover') { showRecoverPasswordForm() }
function showRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'block';
document.getElementById('login').style.display='none';
window.location.hash = '#recover';
return false;
}
function hideRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'none';
document.getElementById('login').style.display = 'block';
return false;
}
</script></p>
{% if shop.checkout.guest_login %}
{% form 'guest_login' %}
<button
class="login-page__guest-login"
type="submit"
>
{{ 'customer.login.guest_checkout' | t }}
{% include 'icon-library', id: 'icon-arrow-right' %}
</button>
{% endform %}
{% endif %}
</div>
{% form 'customer_login', class: 'customer-login' %}
{{ form.errors | default_errors }}
<div class="customer-email">
<label class="customer-email__label" for="customer-email">{{ 'general.email' | t }}</label>
<input class="customer-email__input" id="customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]">
</div>
<div class="customer-password">
<label class="customer-password__label" for="customer-password">{{ 'customer.password' | t }}</label>
<input class="customer-password__input" id="customer-password" type="password" value="" name="customer[password]">
<button class="customer-password__recover-password" type="button" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot' | t }}</button>
</div>
<button class="customer-login__submit" type="submit">{{ 'customer.login.login_submit' | t }}</button>
<a class="customer-login__register" href="{{ routes.account_register_url }}">{{ 'customer.login.sign_up' | t }}</a>
{% endform %}
</div>
<div id="recover-password" class="login-page__recover-password" style="display: none">
<div class="login-page__header">
<h1 class="login-page__heading">{{ 'customer.password_reset.title' | t }}</h1>
<span class="login-page__subheading">{{ 'customer.password_reset.message' | t }}</span>
</div>
{% form 'recover_customer_password', class: 'customer-recover-password' %}
{{ form.errors | default_errors }}
<div class="customer-email">
<label class="customer-email__label" for="recover-customer-email">{{ 'general.email' | t }}</label>
<input class="customer-email__input" id="recover-customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="email">
</div>
<div class="customer-recover-password__actions">
<button class="customer-recover-password__submit" type="submit">{{ 'customer.password_reset.submit' | t }}</button>
<button class="customer-recover-password__cancel" type="button" onclick="hideRecoverPasswordForm()">{{ 'customer.cancel' | t }}</button>
</div>
{% endform %}
</div>
</div>
<script type="text/javascript">
if (window.location.hash == '#recover') { showRecoverPasswordForm() }
function showRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'block';
document.getElementById('login').style.display='none';
window.location.hash = '#recover';
return false;
}
function hideRecoverPasswordForm() {
document.getElementById('recover-password').style.display = 'none';
document.getElementById('login').style.display = 'block';
return false;
}
</script>
great thanks for code can you please find this text and update your Custom Text Here...
static-cart.liquid.
<script
type="application/json"
data-section-type="static-cart"
data-section-id="{{ section.id }}"
>
</script>
{% assign cart_notes = section.settings.show_cart_notes %}
<div class="cart">
<div class="cart__header">
<h1>{{ 'cart.general.title' | t }}</h1>
{% unless cart.item_count > 0 %}
<h2>{{ 'cart.general.empty' | t }}</h2>
{% endunless %}
</div>
{% if cart.item_count > 0 %}
<form action="{{ routes.cart_url }}" method="post" class="cart-form">
{% include 'cart-table' %}
<div class="cart__text"><p class="custom-text"><div class="login-page"></div>
<div class="cart__footer">
{% if customer.tags contains 'Wholesale' %}
<div class="cart__notes">
<label for="cart-notes-area">
{% if section.settings.cart_notes != blank %}
{{ section.settings.cart_notes }}
{%endif%}
</label>
<textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
</div>
{%else%}
{% if cart_notes %}
<div class="cart__notes">
<label for="cart-notes-area">{{ 'cart.general.special_instructions' | t }}</label>
<textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
</div>
{% endif %}
{% endif %}
<div class="cart__totals">
{% include 'cart-discounts' %}
<h2 class="cart__subtotal">
<span class="subtotal">
{{ 'cart.general.subtotal' | t }}
</span>
<span class="money total-price" data-total-price>
{% unless cart.total_price != wcp_total_price %}
<span class="wcp-original-cart-total" id="wp_original-cart-total">{{ cart.total_price | money}}</span>
{% endunless %}
<span class="wcp-cart-total"></span>
<span class="wcp-cart-total_2">{{wcp_total_price | money }}</span>
</span>
<div class="additional-notes">
<span class="wcp-minimums-note"></span>
<span class="wcp-extra-note "></span>
</div>
</h2>
<button
class="cart__checkout-button"
type="submit"
name="checkout"
value="{{ 'cart.general.checkout' | t }}"
>
{% if section.settings.enable_checkout_lock_icon %}
{% render 'icon-library', id: 'icon-lock' %}
{% endif %}
<span>{{ 'cart.general.checkout' | t }}</span>
</button>
{% if customer.tags contains 'wpdnet' %}
{% if shop.metafields.wcp_net.isNetEnabled == 'true' or shop.metafields.wcp_net.isNetEnabled == '1' %}
<div style="margin-top:30px;">
<p>{{shop.metafields.wcp_net.netCartMsg}}</p>
<a id="wcp-30-open" class="customer-login__submit">
{{shop.metafields.wcp_net.netBtnMsg}}
</a>
</div>
{% endif %}
{% endif %}
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
<script>
var v = setInterval(function()
{
if(typeof window.wcp_data != 'undefined' && typeof window.wcp_data.discounted_hash != 'undefined')
{
if((window.wcp_data.discounted_hash.discount_value || window.wcp_data.discounted_hash.shipping)
&& $('.additional-checkout-buttons').children(':visible').length > 0)
{
$('.additional-checkout-buttons').html("Other payment options are available at checkout");
clearInterval(v);
}
}
},500);
</script>
{% endif %}
</div>
</div>
</form>
{% endif %}
{% if section.settings.use_continue_shopping %}
<a href="/" class="cart__continue-shopping">
{{ 'general.continue_shopping' | t }} →
</a>
{% endif %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.wcp-cart-total_2 { display:none }
</style>
<script>
function hide_wcp_total(){
var check = $('.wcp-cart-total').text();
if(check.length > 2 || $('#wp_original-cart-total').length != 0 ){
$('.wcp-cart-total_2 ').hide();
$('#wcp-30-open').on('click',function(){
$('.net-order-prices s').hide();
$('.net-order-prices .wcp-original-cart-total').hide();
});
}else{
$('.wcp-cart-total_2 ').show();
}
}
var timesRun = 0;
var interval = setInterval(function(){
timesRun += 1;
if(timesRun === 10){
clearInterval(interval);
}
hide_wcp_total();
}, 1000);
</script>
<script>
$('#wcp-30-open').on('click',function(){
$('.net-order-prices s').hide();
$('.net-order-prices .wcp-original-cart-total').hide();
});
</script>
{% schema %}
{
"name": "Cart",
"settings": [
{
"type": "checkbox",
"id": "enable_checkout_lock_icon",
"label": "Show lock icon on checkout button",
"default": false
},
{
"type": "checkbox",
"id": "show_cart_notes",
"label": "Enable order notes"
},
{
"type": "checkbox",
"id": "use_continue_shopping",
"label": "Show 'continue shopping' button"
},
{
"type": "text",
"id": "cart_notes",
"label": "whole sale cart note"
}
]
}
{% endschema %}
Hey there, this could only be done in your situation by custom coding you can just directly go to the cart page code and and account page code and you can just simply paste your required text at that place where you want to have it. first try to inspect that pages and paste your text temporarily there and after confirmation of the exact location you can simply go to the code of the that particular page. and you can use h1 or h2 tag for heading and "style" attribute for styling your text. i hope this would help you and you can also search it on youtube and you will definitely find a complete procedure to do it.
By the way, if you want to build custom landing pages then i would suggest you to try Layoutbase shopify landing page Builder (https://apps.shopify.com/layoutbase-pagebuilder).
Thanks
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024