Shopify themes, liquid, logos, and UX
What code or methods do I use to make the text side by side? I am using the pipeline theme.
Please and thanks
https://es3v7yla23rylj65-46142587048.shopifypreview.com here is the website
Hi There!
To do that you have to first create a parent <div> then create two <div> with 50% width each and the place the relevant content in each.
Hello, @HewittShophere
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for the store URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 769px) {
#contact-us .grid__item div {
float: left;
width: 50%;
}
}
hello, will this be added to all the pages/throughout the whole website
or just the page.contact / contact page ( contact us page)
Just want to make sure as I only need it to be side by side for just one page?
:0
code apply to only contact page
You're a life saver thank you!
I added your code but it looks like this can you help?
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.
My website is not live yet. It's in process. I'm using a Minimal theme. I just want to add side by side pattern on the contact page. like contact form should be on left and all the text should be on right.
oh i see not an issue please share store preview url
can you please share contact page code
Here is the code:
<div class="grid">
<div class="grid__item post-large--two-thirds push--post-large--one-sixth">
<div class="section-header">
<h1 class="section-header--title">{{ page.title }}</h1>
</div>
<div class="rte">
{{ page.content }}
</div>
<div>
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="note form-success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}
{{ form.errors | default_errors }}
{% assign name_attr = 'contact.form.name' | t | handle %}
<label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">
<label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
{% assign name_attr = 'contact.form.phone' | t | handle %}
<label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">
{% endform %}
</div>
</div>
</div>
Yes, please confirm this look
It's perfect. You're a Gem. but can you guide me on how to switch sides too by myself? like if I want the Text on left and Form on right?
can we achieve this layout?
can we make this please?
yes please change content as per you code we don't control your admin so please update custom code
I am using Debut theme and I have 2 forms in the two different pages below:
https://beytibyarabesque.com/pages/special-orders
https://beytibyarabesque.com/pages/contact-beyti
I would like to be able to put the text and forms side by side in those 2 pages, is that doable?
Thanks,
M
yes please add 2 form code at one page so i will check and update
yes please add code contact template
@KetanKumar do you mean like the screenshot below: Online store > Theme template > Contact ? I did that for the Contact Page
But for the Special Order page, I have another form than the Contact page...should I do the same?
no sorry your have add code backend code contact template
@KetanKumar is there a way you show me how to do that with a screenshot? i am not sure i understood
thanks
please check your backend code
yes that current file
contact page code pasted below (However for the special order page where can I find the code https://beytibyarabesque.com/pages/special-orders?)
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>
{% if page.content.size > 0 %}
<div class="rte" >
{{ page.content }}
</div>
{% endif %}
<div class="contact-form form-vertical" >
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>
</div>
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
</div>
</div>
</div>
yes i can see form
@KetanKumar In contact page, I am good with the layout i don't want to change it
but in the special orders https://beytibyarabesque.com/pages/special-orders, i would like to have the form next to the text, is that possible? I added the form from an third party app
@KetanKumar i posted the question here, can u help me? https://community.shopify.com/c/shopify-discussions/debut-theme-form-side-by-side-text-amp-image-and...
yes sure i will do customization code
Please can you help me with the same issue?
can you please send store url so i will check and guide you
yes, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 1024px) {
section#shopify-section-template--15663130083485__main {
float: left;
width: 40%;
}
section#shopify-section-template--15663130083485__form {
float: left;
width: 50%;
}
section#shopify-section-template--15663130083485__main .page-width {
max-width: 170px;
}
section#shopify-section-template--15663130083485__form .page-width {
max-width: 650px;
}
}
yes, please try and let me know if any changes
Hi KetanKumar, I facing the same issue on my contact form, it will be wonderful if you could help me 🙂
Can you make my form 50% less width? I want to put an image beside the form.
Impulse theme.
Page URL: https://kitojewlery.com/pages/%D7%A7%D7%91%D7%99%D7%A2%D7%AA-%D7%A4%D7%92%D7%99%D7%A9%D7%94
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