Shopify Debut theme help center code

Do you like our help center? Please follow the steps.

Step 1: Add a new section name "help-center":

 Paste the code blow:

 <style>
ul#help-center-category > li {
border: {{ section.settings.border_px }}px solid transparent;
}
ul#help-center-category :hover {
background: {{ section.settings.color_category_active }};
}

.background-active {
background: {{ section.settings.color_category_active }};
}

ul#help-center-category > li:hover {
border-color:{{ section.settings.border_color }};
box-shadow: 10px 10px 2px 1px {{ section.settings.shadow_box_color }};
}
</style>
{%- assign cat_per_row = section.settings.category_per_row -%}
{%- assign blocks_size = section.blocks.size -%}

{% if blocks_size <= cat_per_row %}
{%- assign grid_item_width = 'category-per-row-' | append: blocks_size -%}
{% else %}
{%- assign grid_item_width = 'category-per-row-' | append: cat_per_row -%}
{% endif %}


<ul id="help-center-category" class="{{ grid_item_width }} category-per-row">
{% for block in section.blocks %}
<li>
<a href="{{ block.settings.url }}">
{% if section.settings.show_image %}
{{ block.settings.image | img_url: '50x50' | img_tag: block.settings.image.alt, 'image-category' }}
{% endif %}
{% if section.settings.show_text %}
<h6 title="{{ block.settings.category_name }}">
<span><strong>{{ block.settings.category_name }}</strong></span><br/>
</h6>
<p style="font-size:16px;">{{ block.settings.category_des }} </p>
{% endif %}
</a>
</li>
{% endfor %}
</ul>

{% schema %}
{
"name": "Category",
"settings": [
{"type": "range",
"id": "category_per_row",
"label": "Category Per Row",
"default": 5,
"min": 1,
"max": 6,
"step": 1},

{
"type": "checkbox",
"id": "show_image",
"label": "Show Image",
"default": true
},
{
"type": "checkbox",
"id": "show_text",
"label": "Show Text",
"default": true
},
{
"type": "color",
"id": "color_category_active",
"label": "Category Active",
"default": "#3d4246"
},
{
"type": "range",
"id": "border_px",
"label": "Border Width",
"default": 1,
"min": 1,
"max": 5,
"step": 1},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#eee"
},
{
"type": "color",
"id": "shadow_box_color",
"label": "Shadow Box color",
"default": "#eee"
}
],
"blocks": [
{
"type": "category",
"name": "Category",
"settings": [
{
"type": "text",
"id": "category_name",
"label": "Title",
"default": "Category Name"
},
{
"type":"text",
"id":"category_des",
"label":"Description"
},
{
"type": "url",
"id": "url",
"label": "Url"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
}

]
}
],
"presets": [
{
"name": "Category",
"category": "category"
}
]
}
{% endschema %}

{% stylesheet %}


ul#help-center-category {
list-style: none;
display: grid;
margin: 0;
padding: 0;
margin-bottom: 30px;
justify-items: center;
width: 100%;
cursor: pointer;
}

.category-per-row{
grid-template-columns: 100%;
}

@media only screen and (min-width: 600px) {

.category-per-row-1 {
grid-template-columns: 100%;
}

.category-per-row-2 {
grid-template-columns: 50% 50%;
}

.category-per-row-3 {
grid-template-columns: 33% 34% 33%;
}

.category-per-row-4 {
grid-template-columns: repeat(4, 25%);
}

.category-per-row-5 {
grid-template-columns: repeat(5, 20%);
}

.category-per-row-6 {
grid-template-columns: 16.6% 16.7% 16.7% 16.7% 16.7% 16.6%;
}

}

ul#help-center-category > li {
text-align: center;
margin: 0;
padding: 12px;
width: 100%;
height: 100%;
overflow: hidden;
box-shadow: none;
position: relative;
top: 0;
left: 0;
transition: 0.3s;
}

img.image-category {
width: 50px;
height: 50px;
}

ul#help-center-category > li:hover {
top: -10px;
left: -10px;
}

{% endstylesheet %}

 

Step 2: Create a new page template name help_center.

 

The same copy and past the code below:

 <div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte help-center">
{% section 'help-center' %}
</div>
</div>
</div>
</div>

If your store theme isn't debut theme, please replace

{{ page.content }}
with 
{% section 'help-center' %}

Step 3: Create a page with template page.help_center.

Step 4: Setting your own category on your theme customize.

Did we mention that it is free?

We are here for you! Growing your business is a tough job. We've got your back.
Talk to us if you have any questions!

START FREE