Skip to content

Instantly share code, notes, and snippets.

@ronipl
Last active April 15, 2019 10:13
Show Gist options
  • Save ronipl/6a744b01698a8d283a6afddcbfba8464 to your computer and use it in GitHub Desktop.
Save ronipl/6a744b01698a8d283a6afddcbfba8464 to your computer and use it in GitHub Desktop.
Shopify section - Text and image side by side *classes works on testament theme. just remove classes
<section id="text-and-image-side-by-side-{{ section.id }}" class="text-and-image-side-by-side index-section" data-section-id="{{ section.id }}" data-section-type="image-section">
<div class="row">
<div class="desktop-6 tablet-2 mobile-2">
<h2>{{section.settings.heading}}</h2>
<div class="h2-border"></div>
<p>{{section.settings.content}}</p>
<div class="cta">
<a href="{{section.settings.button_url_link}}">{{section.settings.button_text}}</a>
</div>
</div>
<div class="desktop-6 tablet-2 mobile-2">
{%- if section.settings.image -%}
<img src="{{ section.settings.image | img_url: 'master' }}" />
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
</div>
</section>
{% schema %}
{
"name": "Image / Text side by side",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Heading here"
},
{
"type": "textarea",
"id": "content",
"label": "Content here",
"default": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,"
},
{
"type": "text",
"id": "button_text",
"label": "Button text here",
"default": "Shop now"
},
{
"type": "url",
"id": "button_url_link",
"label": "Link for button"
},
{
"type": "image_picker",
"id": "image",
"label": "Image on the side"
}
],
"presets": [
{
"name": "Image / Text side by side",
"category": "Image"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment