Adding the function of Sections to a custom Page

Highlighted
New Member
1 0 0

Hello,

Following the guide here https://goo.gl/tCHBqG, I have been able to utilize Sections in Pages to insert Text, Images etc. But what I really wanted was to insert Image with Text sections like we can in the homepage so that I can create a product description page. I understand that I can use the rich text editor to insert image and then wrap texts around it but if i can use Sections instead it would be really more productive. I tried modifying the code as below:

<div class="wrapper">
  <div class="page-width feature-row">
    {% capture image_layout %}
      <div class="feature-row__item">
        {% if section.settings.image != blank %}
          <noscript>
            {{ section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image-no-js' }}
          </noscript>
          <div class="feature-row__image-wrapper" style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
            {% assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="feature-row__image lazyload"
              src="{{ section.settings.image | img_url: '300x300' }}"
              data-src="{{ img_url }}"
              data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
              data-aspectratio="{{ section.settings.image.aspect_ratio }}"
              data-sizes="auto"
              alt="{{ section.settings.image.alt | escape }}">
        </div>
        {% else %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
    {% endcapture %}

    <div class="feature-row">
      {% if section.settings.layout == 'left' %}
        {{ image_layout }}
      {% endif %}

      <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
        {% if section.settings.title != blank %}
          <h2 class="h3">{{ section.settings.title | escape }}</h2>
        {% endif %}
        {% if section.settings.text != blank %}
          <div class="rte-setting featured-row__subtext">{{ section.settings.text }}</div>
        {% endif %}
        {% if section.settings.button_label != blank and section.settings.button_link != blank %}
          <a href="{{ section.settings.button_link }}" class="btn">
            {{ section.settings.button_label | escape }}
          </a>
        {% endif %}
      </div>

      {% if section.settings.layout == 'right' %}
        {{ image_layout }}
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
  {
  "name": "Product Desc",

    "class": "index-section",

    "settings": [

      {

        "type": "text",

        "id": "title",

        "label": "Heading",

        "default": "Product Description"

      }

    ],
    "blocks": [
        {

        "type": "text",

        "name": "Text",

        "settings": [

          {

            "type": "text",

            "id": "title",

            "label": "Heading",

            "default": "Talk about your brand"

          },

          {

            "type": "richtext",

            "id": "text",

            "label": "Text",

            "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

          },

          {

            "type": "select",

            "id": "width",

            "label": "Container width",

            "default": "50%",

            "options": [

              {

                "value": "25%",

                "label": "25%"

              },

              {

                "value": "33%",

                "label": "33%"

              },

              {

                "value": "50%",

                "label": "50%"

              },

              {

                "value": "66%",

                "label": "66%"

              },

              {

                "value": "75%",

                "label": "75%"

              },

              {

                "value": "100%",

                "label": "100%"

              }

            ]

          },      
{

            "type": "select",

            "id": "alignment",

            "label": "Vertical alignment",

            "default": "center",

            "options": [

              {"value": "top-middle", "label": "Top"},

              {"value": "center", "label": "Middle"},

              {"value": "bottom-middle", "label": "Bottom"}

            ]

          },

          {

            "type": "select",

            "id": "align_text",

            "label": "Horizontal alignment",

            "default": "left",

            "options": [

              {"value": "left", "label": "Left"},

              {"value": "center", "label": "Centered"},

              {"value": "right", "label": "Right"}

            ]

          }

        ]

      },
{
    "type": "image"
    "name": "Image with Text",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Image alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
           ]
        },
        {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
         },
         {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
         },
         {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
         },
         {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
          }
        ]
      }
    ],

 "presets": [

      {

        "name": "Product Flyleaf",

        "category": "Image",

        "blocks": [

              {

            "type": "text"

              },
            
          {

            "type": "image"

          }

        ]

      }

    ]
  }
{% endschema %}
 

This was taken from the feature-row.liquid in the Brooklyn theme and I'm trying to use blocks so that I can add multiple Image with texts but I can't seem to get pass the error. Would anyone be able to assist?

Many thanks in advance,

Sam

0 Likes
Highlighted
Tourist
9 0 4

Hi,

 

I am not sure to have understood your questions but : do you want to add "image with text" sections to pages ? 

 

If yes this is what I did. For example, I had an "about" page and I wanted there to be 3 images with text.
I created a new template : about.page.liquid

in this template, the code is : 

{% section 'featurerow-about1' %}

{% section 'featurerow-about2' %}

{% section 'featurerow-about3' %}

(I deleted the default code as I didn't want the title to appear)

 

I created 3 new sections : featurerow-about1.liquid ; featurerow-about2.liquid ; featurerow-about3.liquid

In these sections I just copied/paste the feature-row.liquid code.

 

In the page editor, I chose to use the template "about.page" instead of "page" only.

When I customize my theme and I go the the page, I can insert photos and texts.

 

Let me know if you have questions, I'm pretty sure there is an easier way to do it, but I am new to css etc.

 

Hope this helps!

 

http://poppybiarritz.com/
3 Likes
Highlighted
New Member
2 0 0

Hello, Alyssa2

0 Likes
Highlighted
New Member
1 0 0

This was really helpful thank you!

0 Likes