Shopify custom button
Shopify custom button
Here I implemented Shopify Custom Button. Where you will full freedom to customize button as your wish.
Features
- Button background color and hover background color
- Button roundness
- Text color and hover text color
- Horizontal padding and vertical padding
To implement this button in your shopify store you should follow this step by step
Goto your shopify store
Goto your shopify store. Then find online store and then click three dot then press edit code.
store > online store > edit code
Find section folder
In section folder, you have to create a file name like "custom-image-text.liquid" then press enter.
Copy and paste the code
Copy and paste the code in that file and save
{% schema %}
{
"name": "Custom Button",
"settings": [
{
"type": "url",
"id": "ms_button_link",
"label": "Button link"
},
{
"type": "text",
"id": "ms_button_text",
"label": "Button text",
"default": "Shop Now"
},
{
"type": "text",
"id": "ms_button_border_radius",
"label": "button_border_radius",
"default": "12"
},
{
"type": "text",
"id": "ms_button_text_size",
"label": "Button text size",
"default": "12"
},
{
"type": "select",
"id": "ms_btn_align",
"label": "ms_btn_align",
"options": [
{
"label": "Start",
"value": "left"
},
{
"label": "Center",
"value": "center"
},
{
"label": "End",
"value": "right"
}
]
},
{
"type": "text",
"id": "ms_button_horizontal_padding",
"label": "button_horizontal_padding",
"default": "30"
},
{
"type": "text",
"id": "ms_button_vertical_padding",
"label": "button_vertical_padding",
"default": "15"
},
{
"type": "select",
"id": "ms_button_font_weight",
"label": "Button font weight",
"options": [
{
"label": "Bold",
"value": "bold"
},
{
"label": "Normal",
"value": "500"
}
]
},
{
"type": "color",
"id": "ms_hero_button_color",
"label": "Button Color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "ms_hero_button_hover_color",
"label": "hero-button-hover-color",
"default": "#D6D6D6"
},
{
"type": "color",
"id": "ms_hero_button_text_color",
"label": "hero-button-text-color",
"default": "#000000"
},
{
"type": "color",
"id": "ms_hero_button_text_hover_color",
"label": "hero-button-text-hover-color",
"default": "#000000"
}
],
"presets": [
{
"name": "Custom Button"
}
]
}
{% endschema %}
<div class="my-16 flex justify-{{ section.settings.ms_btn_align }}">
<a
href="{{ section.settings.ms_button_link }}"
class="ms_custom_btn gradient duration-150"
style="font-size: {{ section.settings.ms_button_text_size }}px; background-color: {{ section.settings.ms_hero_button_color}}; color: {{ section.settings.ms_hero_button_text_color }}"
>
{{- section.settings.ms_button_text -}}
</a>
</div>
<style>
.ms_custom_btn {
padding: {{ section.settings.ms_button_vertical_padding }}px {{ section.settings.ms_button_horizontal_padding }}px;
text-decoration: none;
font-weight: {{ section.settings.ms_button_font_weight }} !important;
border-radius: {{ section.settings.ms_button_border_radius }}px;
}
.ms_custom_btn:hover {
background-color: {{ section.settings.ms_hero_button_hover_color }} !important;
color: {{ section.settings.ms_hero_button_text_hover_color }} !important;
}
</style>Find the section
Goto to your theme and click on add section find out the named
"Custom Button"
and select it.
Not found it
If you don't find it, you should refresh the page. I hope will find it.
Predien