Shopify themes, liquid, logos, and UX
Hi guys, we have a Shopify store using the Pipeline theme.
On the bottom of our page, we have a footer that looks like this:
Our end goal is to add a second input field, under the email box, where a customer can put his phone number in, like this:
In our theme, we have a snipped called newsletter-form.liquid, and it looks like this
If I take that div section, and duplicate it, I can make a second contact box.
Now our website looks like this
However, after this, I'm not really sure how to proceed.
We need to integrate this second input field with Attentive, using their Subscribers API
At this point, I'm a little lost on how to proceed. I have a coding background, but I usually work with Python, not CSS or Javascript. If anyone can provide any help at all, even just pointing me in the right direction or telling me which lines I probably need to look at, I would be extremely grateful.
I need to find out how to make the second input box functional, and so when a customer adds their phone number there, it connects to Attentive API.
Here is the code of newsletter-form.liquid,
<!-- /snippets/newsletter-form.liquid -->
{% comment %}
{% render 'newsletter-form', unique: unique, text: block.settings.button_text, style: block.settings.button_style, color: block.settings.button_color %}
{% endcomment %}
{%- liquid
assign style = style | default: 'btn'
assign color = color | default: 'btn--secondary'
assign translation = 'general.newsletter_form.submit' | t
assign text = text | default: translation
assign class = 'newsletter--default-messages'
if success_text != blank
assign class = ''
endif
-%}
{%- if unique -%}
{% form 'customer', id: unique, data-newsletter-form: '', class: class %}
{% if content != blank %}
{{ content }}
{% endif %}
{% if success_text != blank %}
<p class="newsletter__message newsletter__message--success">{{ success_text | newline_to_br }}</p>
<p class="newsletter__message newsletter__message--error"><em>{{ 'general.newsletter_form.error_message' | t }}</em></p>
{% else %}
{% if form.posted_successfully? %}
<p><em>{{ 'general.newsletter_form.subscribed' | t }}</em></p>
{% elsif form.errors %}
{% for field in form.errors %}
<p><em>{{ field }} - {{ form.errors.messages[field] }}</em></p>
{% endfor %}
{% endif %}
{% endif %}
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="hidden" name="contact[accepts_marketing]" value="true">
<div class="input-group input-group--inner-button float__wrapper">
<label for="mail-{{ unique }}">{{ 'general.newsletter_form.email' | t }}</label>
<input class="input-group-field"
type="email"
placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}"
id="mail-{{ unique }}"
aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}"
autocorrect="off"
autocapitalize="off"
name="contact[email]"
data-newsletter-field />
<span class="input-group-button">
<button
type="submit" {% unless show_icon %}class="{{ style }} {{ color }} uppercase"{% endunless %}
aria-label="{{ text }}"
name="subscribe"
id="subscribe-{{ unique }}">
{%- if show_icon -%}
{%- render 'icon-arrow-right-long' -%}
{%- render 'icon-check-slim' -%}
{%- else -%}
{{ text }}
{%- endif -%}
</button>
</span>
</div>
{% endform %}
{%- endif -%}
Once again, an help at all, even just some advice, would be extremely appreciated.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024