Shopify themes, liquid, logos, and UX
Hi there, my store is https://sophiaandpilar.com and I am wondering if anyone has a piece of code that I can input that would enable me to request first name and last name here?
Thanks!
Appreciate the help.
yes please share your footer code so i will check and let you know
Hi there @KetanKumar ! See below:
{%- liquid
assign show_selectors = false
assign currency_selector = false
assign locale_selector = false
if section.settings.show_currency_selector and shop.enabled_currencies.size > 1
assign currency_selector = true
endif
if section.settings.show_locale_selector and shop.enabled_locales.size > 1
assign locale_selector = true
endif
if currency_selector or locale_selector
assign show_selectors = true
endif
-%}
{%- if settings.color_footer == settings.color_body_bg -%}
{%- style -%}
.site-footer {
border-top: 1px solid {{ settings.color_borders }};
}
{%- endstyle -%}
{%- endif -%}
<footer class="site-footer" data-section-id="{{ section.id }}" data-section-type="footer-section">
<div class="page-width">
<div class="grid">
{%- assign row_width = 0 -%}
{%- for block in section.blocks -%}
{%- assign row_width = row_width | plus: block.settings.container_width -%}
{%- if row_width > 100 -%}
<div class="footer__clear small--hide"></div>
{%- assign row_width = row_width | minus: 100 -%}
{%- endif -%}
<div {{ block.shopify_attributes }} class="grid__item footer__item--{{ block.id }}" data-type="{{ block.type }}">
{%- style -%}
@media only screen and (min-width: 769px) and (max-width: 959px) {
.footer__item--{{ block.id }} {
width: 50%;
padding-top: 40px;
}
.footer__item--{{ block.id }}:nth-child(2n + 1) {
clear: left;
}
}
@media only screen and (min-width: 960px) {
.footer__item--{{ block.id }} {
width: {{ block.settings.container_width }}%;
}
}
{%- endstyle -%}
{%- liquid
case block.type
when 'logo_social'
render 'footer-logo', block: block
when 'custom'
render 'footer-custom-text', block: block
when 'newsletter'
render 'footer-newsletter', block: block
when 'menu'
render 'footer-menu', block: block
endcase
-%}
</div>
{%- endfor -%}
{%- for block in section.blocks -%}
{%- if block.type == 'logo' -%}
<div class="grid__item medium-up--hide">
{%- render 'footer-logo', block: block -%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- if show_selectors -%}
<div class="footer__section">
{%- render 'multi-selectors',
locale_selector: locale_selector,
currency_selector: currency_selector,
show_currency_flags: section.settings.show_currency_flags
location: 'footer'
-%}
</div>
{%- endif -%}
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<ul class="inline-list payment-icons footer__section">
{%- for type in shop.enabled_payment_types -%}
<li class="icon--payment">
{{ type | payment_type_svg_tag }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
{%- if section.settings.show_copyright -%}
<p class="footer__small-text">
© {{ 'now' | date: '%Y' }} {{ shop.name }}
{%- if section.settings.copyright_text != blank -%}
{{ section.settings.copyright_text }}
{%- endif -%}
</p>
{%- endif -%}
<p class="footer__small-text">{{ powered_by_link }}</p>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"max_blocks": 12,
"settings": [
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "checkbox",
"id": "show_currency_flags",
"label": "Show currency flags",
"default": true
},
{
"type": "header",
"content": "Additional footer content"
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons",
"default": false
},
{
"type": "checkbox",
"id": "show_copyright",
"label": "Show copyright"
},
{
"type": "text",
"id": "copyright_text",
"label": "Additional copyright text"
}
],
"blocks": [
{
"type": "logo_social",
"name": "Logo",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "desktop_logo_height",
"label": "Logo height",
"default": 50,
"min": 20,
"max": 120,
"unit": "px"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 25,
"min": 15,
"max": 95,
"unit": "%"
}
]
},
{
"type": "menu",
"name": "Navigation",
"settings": [
{
"type": "checkbox",
"id": "show_footer_title",
"label": "Show heading"
},
{
"type": "link_list",
"id": "menu",
"label": "Choose a menu",
"default": "footer",
"info": "This menu won't show dropdown items"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 25,
"min": 15,
"max": 95,
"unit": "%"
}
]
},
{
"type": "newsletter",
"name": "Newsletter and social",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_footer_title",
"label": "Show heading",
"default": true
},
{
"type": "paragraph",
"content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Sign up and save"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"info": "Optional",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 25,
"min": 15,
"max": 95,
"unit": "%"
}
]
},
{
"type": "custom",
"name": "Custom text",
"settings": [
{
"type": "checkbox",
"id": "show_footer_title",
"label": "Show heading",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Custom text"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add your own custom text here.</p>"
},
{
"type": "range",
"id": "container_width",
"label": "Column width",
"default": 25,
"min": 15,
"max": 95,
"unit": "%"
}
]
}
],
"default": {
"settings": {},
"blocks": [
{
"type": "menu",
"settings": {}
},
{
"type": "logo_social",
"settings": {}
}
]
}
}
{% endschema %}
can you please share this file code
footer-newsletter
Hi @KetanKumar I hope this is what you are after:
{%- style -%}
.newsletter-{{ section.id }} {
background-color: {{ section.settings.color_background }};
color: {{ section.settings.color_text }};
}
.newsletter-{{ section.id }} .newsletter__input::-webkit-input-placeholder { color: {{ section.settings.color_text }}; }
.newsletter-{{ section.id }} .newsletter__input::-moz-placeholder { color: {{ section.settings.color_text }}; }
.newsletter-{{ section.id }} .newsletter__input::-ms-input-placeholder { color: {{ section.settings.color_text }}; }
{%- endstyle -%}
<div class="newsletter-section newsletter-{{ section.id }}{% if section.settings.color_background == settings.color_body_bg %} newsletter-section--with-divider{% endif %}">
<div class="page-width text-center">
{%- if section.settings.title != blank -%}
<p class="h3">{{ section.settings.title | escape }}</p>
{%- endif -%}
{%- if section.settings.text != blank -%}
<div class="rte">{{ section.settings.text }}</div>
{%- endif -%}
{%- render 'newsletter-form', section_id: section.id, snippet_context: 'section' -%}
</div>
</div>
{% schema %}
{
"name": "Newsletter",
"settings": [
{
"type": "paragraph",
"content": "Customers who subscribe will have their email address added to the 'accepts marketing' [customer list](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Sign up and save"
},
{
"type": "richtext",
"id": "text",
"label": "Subheading",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "color",
"id": "color_background",
"label": "Background",
"default": "#f9f9f9"
},
{
"type": "color",
"id": "color_text",
"label": "Text",
"default": "#1c1d1d"
}
],
"presets": [
{
"name": "Newsletter",
"category": "Promotional"
}
]
}
{% endschema %}
thanks but one more file
newsletter-form
Hi @KetanKumar , I have gone through all my files, and that one is non-existent? Let me know if you think I missed something here?
Appreciate your help!
Hi @KetanKumar , I have this one. Can you let me know if this is what you are looking for?
{%- if section.settings.mode != 'disabled' -%}
<div
id="NewsletterPopup-{{ section.id }}"
class="modal modal--square modal--mobile-friendly"
data-section-id="{{ section.id }}"
data-section-type="newsletter-popup"
data-delay-days="{{ section.settings.popup_days }}"
data-delay-seconds="{{ section.settings.popup_seconds }}"
data-test-mode="{% if section.settings.mode == 'testing' %}true{% else %}false{% endif %}">
<div class="modal__inner">
<div class="modal__centered medium-up--text-center">
<div class="modal__centered-content">
<div class="newsletter">
{%- if section.settings.popup_title != blank -%}
<h3>{{ section.settings.popup_title }}</h3>
{%- endif -%}
{%- if section.settings.popup_image -%}
<div class="image-wrap small--hide" style="height: 0; padding-bottom: {{ 100 | divided_by: section.settings.popup_image.aspect_ratio }}%;">
{%- assign img_url = section.settings.popup_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload lazypreload" role="presentation"
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080]"
data-aspectratio="{{ section.settings.popup_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.popup_image.alt }}">
</div>
{%- endif -%}
{%- if section.settings.popup_text != blank -%}
<div class="rte">
{{ section.settings.popup_text }}
</div>
{%- endif -%}
{%- if section.settings.enable_newsletter -%}
<div class="popup-cta">
{%- render 'newsletter-form', section_id: section.id, snippet_context: 'popup' -%}
</div>
{%- endif -%}
{%- if section.settings.enable_button -%}
<div class="popup-cta">
<a href="{{ section.settings.button_link }}" class="btn js-modal-close">
{{ section.settings.button_label }}
</a>
</div>
{%- endif -%}
<button type="button" class="text-close js-modal-close">{{ section.settings.close_text }}</button>
</div>
</div>
<button type="button" class="modal__close js-modal-close text-link">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
</button>
</div>
</div>
</div>
{%- endif -%}
{% schema %}
{
"name": "Popup",
"class": "index-section--hidden",
"settings": [
{
"type": "select",
"id": "mode",
"label": "Display mode",
"default": "disabled",
"options": [
{
"value": "enabled",
"label": "Enabled"
},
{
"value": "testing",
"label": "Test mode"
},
{
"value": "disabled",
"label": "Disabled"
}
],
"info": "Test mode displays your popup each time even after dismissing it. Switch to Enabled once you are happy with how your popup looks."
},
{
"type": "range",
"id": "popup_seconds",
"label": "Delay",
"info": "Delay is disabled in theme editor for visibility",
"default": 5,
"min": 2,
"max": 60,
"step": 1,
"unit": "sec"
},
{
"type": "range",
"id": "popup_days",
"label": "Frequency",
"default": 30,
"info": "Number of days before a dismissed popup reappears",
"min": 2,
"max": 30,
"step": 1,
"unit": "day"
},
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "popup_title",
"label": "Heading",
"default": "Sign up and save"
},
{
"type": "image_picker",
"id": "popup_image",
"label": "Image",
"info": "Does not appear on mobile in order to meet Google's [interstitial guidelines](https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html) for improved SEO"
},
{
"type": "richtext",
"id": "popup_text",
"label": "Text",
"default": "<p>Entice customers to sign up for your mailing list with discounts or exclusive offers. Include an image for extra impact.</p>"
},
{
"type": "text",
"id": "close_text",
"label": "Close button text",
"default": "No thanks"
},
{
"type": "header",
"content": "Newsletter"
},
{
"type": "paragraph",
"content": "Every sign up will create a Customer on your store. [View customers](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "checkbox",
"id": "enable_newsletter",
"label": "Enable newsletter",
"default": true
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Optional button"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "checkbox",
"id": "enable_button",
"label": "Enable button",
"default": false
}
],
"blocks" : []
}
{% endschema %}
User | RANK |
---|---|
229 | |
165 | |
66 | |
55 | |
49 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023