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.

Preview

SECTION_SETTINGSSections > Block product Slider 🏝

Block product Slider

Display the custom products in a carousel.

Theme Settings

Name
Dynamic ID
Type
text
Description
Add a unique ID for the section.
Name
Background Color
Type
color
Description
Able to select a baclground color for the section.

Preview

SECTION_SETTINGSSections > 💪 Promo FAQ Section

A helpful FAQ section designed to answer common questions quickly, providing users with clear information and a smoother browsing experience.

Theme Settings

Name
Background Color
Type
color
Description
Able to select a baclground color for the section.