Supplement Warehouse Sections

On our dedicated sales event features page, we offer a comprehensive overview of all the tools and options at your disposal. From website alterations to code snippets and schema settings, this resource provides you with the insights and guidance needed to make your sales events a resounding success. Explore how you can optimize your online presence, boost conversions, and enhance the customer shopping experience with these powerful features.

BOILERPLATECode Boilerplate

Section Boilerplate

Boilerplate code for building sections from scratch

  <div class="x-boilerplate">
    <div class="container {% if section.settings.use_container %} x-container {% endif %} {{ section.settings.css_class }}">
      <h1>Boilerplate</h1>
    </div>
  </div>

  <style>
  {% comment %}/* Section Styles */{% endcomment %}
  #shopify-section-{{ section.id }} .x-boilerplate {
    background: {{ section.settings.background_colour }};
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}px;
  }

  /* Mobile */
  @media (max-width: 640px) {}
  /* Mobile */

  {% comment %}/* Container */{% endcomment %}
  #shopify-section-{{ section.id }} .x-container {width: 100% !important; margin: 0 auto;}
  @media (min-width: 640px) {#shopify-section-{{ section.id }} .x-container {max-width: 640px !important;}}
  @media (min-width: 768px) {#shopify-section-{{ section.id }} .x-container {max-width: 768px !important;}}
  @media (min-width: 1024px) {#shopify-section-{{ section.id }} .x-container {max-width: 1024px !important;}}
  @media (min-width: 1280px) {#shopify-section-{{ section.id }} .x-container {max-width: 1280px !important;}}
  @media (min-width: 1536px) {#shopify-section-{{ section.id }} .x-container {max-width: 1536px !important;}}
  {% comment %}/* Container */{% endcomment %}

  {% comment %}/* Advanced */{% endcomment %}
  {{ section.settings.custom_css }}
  {% comment %}/* Advanced */{% endcomment %}
  </style>

  {% schema %}

  {
    "name": "Boilerplate 🏝",
    "class": "x-boilerplate",
    "settings": [
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "checkbox",
        "id": "use_container",
        "label": "Use Container",
        "default": true
      },
      {
        "type": "color",
        "id": "background_colour",
        "label": "Background Colour",
        "default": "#FFF"
      },
      {
        "type": "header",
        "content": "Spacing"
      }, {
        "type": "range",
        "id": "padding_top",
        "label": "Padding Top",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "range",
        "id": "padding_bottom",
        "label": "Padding Bottom",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "range",
        "id": "margin_top",
        "label": "Margin Top",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "range",
        "id": "margin_bottom",
        "label": "Margin Bottom",
        "default": 25,
        "min": -100,
        "max": 200,
        "step": 5,
        "unit": "px"
      }, {
        "type": "header",
        "content": "Advanced"
      }, {
        "type": "text",
        "id": "css_class",
        "label": "CSS Class"
      }, {
        "type": "textarea",
        "id": "custom_css",
        "label": "Custom CSS",
        "info": "Write your css here to make advanced adjustments"
      }
    ],
    "presets": [
      {
        "name": "Boilerplate 🏝",
        "category": "boilerplate"
      }
    ]
  }

  {% endschema %}

SECTION_SETTINGSSections > X Homepage Specials 🏝

X Homepage Specials

Homepage promotional tiles for displaying large deals and sales.

Images

Name
Background image
Type
JPEG | PNG | GIF
Description
Example image with shop button on hover.

Preview

SECTION_SETTINGSSections > Homepage Brands 🏝

Homepage Brands

Group of small links usually connected to collections which show the available brands. Stacks on mobile

Preview

SECTION_SETTINGSSections > Collection Row 🏝

Collection Row

Product row section with multiple selectable collections.