Customizing The Registration Page

New Member
2 0 0


I'm just getting started in coding and web development. The following is my Shopify startup store. My template used here is 'Vistarapid t1'.

My Question is if it's possible to put content in on the right side of my register page, or to move the registration form to the center (see image below). You can see that I managed to add a rich.text section to the page. Preferably what I'm looking to do is have information provided down the right side of the page, and the registration form down the left side.

I'm very unsure of what's all capable of being done with liquid. My second question is, is this a help forum that I can constantly post questions to for all my coding issues? There are many things I want to change throughout my store (mostly these types of design changes and adding features), and while I'm working very hard to learn how to code, I'm trying to complete this project in the process.

Thank you in advance for your input. It's much appreciated.


<div class="grid">

  <div class="grid__item wide--one-third large--one-half small--text-center">

    <div class="section-header section-header--large">
      {%-section 'rich-text'-%}
      <h1 class="section-header__title">{{ 'customer.register.title' | t }}</h1>
    {% comment %}
      This form must use 'create_customer'
    {% endcomment %}
    {% form 'create_customer' %}

      {{ form.errors | default_errors }}

      <label for="FirstName" class="label--hidden">{{ 'customer.register.first_name' | t }}</label>
      <input type="text" name="customer[first_name]" id="FirstName" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus>

      <label for="LastName" class="label--hidden">{{ 'customer.register.last_name' | t }}</label>
      <input type="text" name="customer[last_name]" id="LastName" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words">

      <label for="Email" class="label--hidden">{{ '' | t }}</label>
      <input type="email" name="customer[email]" id="Email" placeholder="{{ '' | t }}" {% if form.errors contains "email" %} class="error"{% elsif %} value="{{ }}"{% endif %} autocorrect="off" autocapitalize="off">

      <label for="CreatePassword" class="label--hidden">{{ 'customer.register.password' | t }}</label>
      <input type="password" name="customer[password]" id="CreatePassword" placeholder="{{ 'customer.register.password' | t }}" {% if form.errors contains "password" %} class="error"{% endif %}>

        <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
      <a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

    {% endform %}





Screenshot 2021-06-17 184135.png