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.

Rate AliExpress Dropshipping Master

If you like AliExpress Dropshipping Master, we would greatly appreciate it if you could rate the app on the Shopify apps store. Your valuable review will motivate us to improve.

Thank you!

Rate now
Back to the top