Home on Creatify

10 Web Development Trends

Wed, 08 Jul 2026 00:00:00 +0000

Web development is changing every year as there are new innovations and upgrades in technologies that make user experience and development better.

Free Shopify Sections – (100+ All Free Sections)

Tue, 07 Jul 2026 00:00:00 +0000

Are you tired of broken CSS, z-index wars, and buggy AI-generated code on your Shopify store?

As a Shopify Partner that has built over 200 stores, we’ve heard that frustration. We’ve been sharing free Shopify sections on GitHub for a while now, so we built something better for you.

Shopify Spring 2026 Edition: The Only Updates That Matter

Mon, 06 Jul 2026 00:00:00 +0000

Shopify’s Spring 2026 edition introduces groundbreaking features designed to help merchants build, scale, and sell more effectively online. In this comprehensive guide, we’ll explore the most important updates and how they can transform your ecommerce business.

Shopify SEO Tips for Beginners: How to Rank Your Store Higher on Google

Sun, 05 Jul 2026 00:00:00 +0000

“AI is here… will SEO die?”

If you’ve been hearing this a lot, you’re not alone. But here’s the truth: AI actually needs SEO to work.

How To Add Custom Button To Product Page

Sat, 04 Jul 2026 00:00:00 +0000

In this step-by-step guide, I’ll show you exactly how to add a fully customizable button to any product page on Shopify. This method requires no advanced coding skills, works with any theme, and blends seamlessly with your store’s design. Let’s dive in.

Story Timeline In Shopify(Without app- Free)

Fri, 03 Jul 2026 00:00:00 +0000

Create a new section file called story-timeline.liquid and add the following code:

Show Code


{% assign wbs_id = block.id | replace: '_', '' | downcase %}

{% style %}
 .wbs-journey-map-{{ wbs_id }} {
 padding: 60px 20px;
 background-color: {{ section.settings.background_color }};
 overflow: hidden;
 }

 .wbs-journey-map__heading-{{ wbs_id }} {
 text-align: center;
 margin-bottom: 20px;
 color: {{ section.settings.text_color }};
 font-size: {{ section.settings.heading_size }}px;
 }

 .wbs-journey-map__subheading-{{ wbs_id }} {
 text-align: center;
 margin-bottom: 60px;
 color: {{ section.settings.subtext_color }};
 font-size: {{ section.settings.subheading_size }}px;
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
 }

 .wbs-journey-map__container-{{ wbs_id }} {
 max-width: {{ section.settings.max_width }}px;
 margin: 0 auto;
 position: relative;
 }

 .wbs-journey-map__timeline-{{ wbs_id }} {
 position: relative;
 padding: 40px 0;
 }

 .wbs-journey-map__line-{{ wbs_id }} {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 4px;
 height: 100%;
 background: linear-gradient(to bottom, {{ section.settings.timeline_start_color }}, {{ section.settings.timeline_end_color }});
 border-radius: 2px;
 }

 @media screen and (max-width: 768px) {
 .wbs-journey-map__line-{{ wbs_id }} {
 left: 30px;
 }
 }

 .wbs-journey-map__stage-{{ wbs_id }} {
 position: relative;
 margin-bottom: 80px;
 opacity: 0;
 transform: translateY(30px);
 transition: all 0.6s ease;
 }

 .wbs-journey-map__stage-{{ wbs_id }}.visible {
 opacity: 1;
 transform: translateY(0);
 }

 .wbs-journey-map__stage-{{ wbs_id }}:last-child {
 margin-bottom: 0;
 }

 .wbs-journey-map__stage-content-{{ wbs_id }} {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
 align-items: center;
 }

 @media screen and (max-width: 768px) {
 .wbs-journey-map__stage-content-{{ wbs_id }} {
 grid-template-columns: 1fr;
 gap: 20px;
 padding-left: 80px;
 }
 }

 .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-content-{{ wbs_id }} {
 direction: rtl;
 }

 .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-text-{{ wbs_id }},
 .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-image-{{ wbs_id }} {
 direction: ltr;
 }

 @media screen and (max-width: 768px) {
 .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-content-{{ wbs_id }} {
 direction: ltr;
 }
 }

 .wbs-journey-map__stage-marker-{{ wbs_id }} {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: {{ section.settings.marker_size }}px;
 height: {{ section.settings.marker_size }}px;
 background-color: {{ section.settings.marker_color }};
 border: 4px solid {{ section.settings.background_color }};
 border-radius: 50%;
 z-index: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 0 8px {{ section.settings.marker_ring_color }};
 }

 @media screen and (max-width: 768px) {
 .wbs-journey-map__stage-marker-{{ wbs_id }} {
 left: 30px;
 }
 }

 .wbs-journey-map__stage-marker-{{ wbs_id }} svg {
 width: 50%;
 height: 50%;
 color: {{ section.settings.marker_icon_color }};
 }

 .wbs-journey-map__stage-number-{{ wbs_id }} {
 font-size: 18px;
 font-weight: 700;
 color: {{ section.settings.marker_icon_color }};
 }

 .wbs-journey-map__stage-text-{{ wbs_id }} {
 padding: 30px;
 background-color: {{ section.settings.card_background }};
 border-radius: {{ section.settings.card_border_radius }}px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
 }

 .wbs-journey-map__stage-text-{{ wbs_id }}:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .wbs-journey-map__stage-label-{{ wbs_id }} {
 display: inline-block;
 padding: 6px 16px;
 background-color: {{ section.settings.label_background }};
 color: {{ section.settings.label_text_color }};
 border-radius: 20px;
 font-size: 12px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 15px;
 }

 .wbs-journey-map__stage-title-{{ wbs_id }} {
 font-size: 28px;
 font-weight: 700;
 margin-bottom: 15px;
 color: {{ section.settings.text_color }};
 }

 .wbs-journey-map__stage-description-{{ wbs_id }} {
 font-size: 16px;
 line-height: 1.6;
 color: {{ section.settings.subtext_color }};
 }

 .wbs-journey-map__stage-image-{{ wbs_id }} {
 position: relative;
 border-radius: {{ section.settings.image_border_radius }}px;
 overflow: hidden;
 aspect-ratio: {{ section.settings.image_aspect_ratio }};
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .wbs-journey-map__stage-image-{{ wbs_id }} img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.5s ease;
 }

 .wbs-journey-map__stage-image-{{ wbs_id }}:hover img {
 transform: scale(1.05);
 }

 .wbs-journey-map__stage-image-placeholder-{{ wbs_id }} {
 width: 100%;
 height: 100%;
 background-color: #f4f4f4;
 display: flex;
 align-items: center;
 justify-content: center;
 }

 .wbs-journey-map__stage-image-placeholder-{{ wbs_id }} svg {
 width: 80px;
 height: 80px;
 opacity: 0.3;
 }

 .wbs-journey-map__cta-{{ wbs_id }} {
 text-align: center;
 margin-top: 60px;
 }

 .wbs-journey-map__cta-button-{{ wbs_id }} {
 display: inline-block;
 padding: 16px 40px;
 background-color: {{ section.settings.button_color }};
 color: {{ section.settings.button_text_color }};
 text-decoration: none;
 border-radius: {{ section.settings.button_border_radius }}px;
 font-size: 18px;
 font-weight: 600;
 transition: all 0.3s ease;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .wbs-journey-map__cta-button-{{ wbs_id }}:hover {
 background-color: {{ section.settings.button_hover_color }};
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
 }

 .wbs-journey-map__empty-state-{{ wbs_id }} {
 text-align: center;
 padding: 80px 20px;
 color: {{ section.settings.subtext_color }};
 }

 .wbs-journey-map__empty-state-{{ wbs_id }} svg {
 width: 100px;
 height: 100px;
 margin-bottom: 20px;
 opacity: 0.3;
 }
{% endstyle %}

<wbs-journey-map-{{ wbs_id }} class="wbs-journey-map-{{ wbs_id }}" {{ section.shopify_attributes }}>
 {% if section.settings.heading != blank %}
 <h2 class="wbs-journey-map__heading-{{ wbs_id }}">{{ section.settings.heading }}</h2>
 {% endif %}

 {% if section.settings.subheading != blank %}
 <div class="wbs-journey-map__subheading-{{ wbs_id }}">{{ section.settings.subheading }}</div>
 {% endif %}

 <div class="wbs-journey-map__container-{{ wbs_id }}">
 {% assign has_stages = false %}
 {% for i in (1..6) %}
 {% assign title_key = 'stage_' | append: i | append: '_title' %}
 {% if section.settings[title_key] != blank %}
 {% assign has_stages = true %}
 {% break %}
 {% endif %}
 {% endfor %}

 {% if has_stages %}
 <div class="wbs-journey-map__timeline-{{ wbs_id }}">
 <div class="wbs-journey-map__line-{{ wbs_id }}"></div>

 {% for i in (1..6) %}
 {% assign title_key = 'stage_' | append: i | append: '_title' %}
 {% assign label_key = 'stage_' | append: i | append: '_label' %}
 {% assign description_key = 'stage_' | append: i | append: '_description' %}
 {% assign image_key = 'stage_' | append: i | append: '_image' %}
 {% assign icon_key = 'stage_' | append: i | append: '_icon' %}

 {% if section.settings[title_key] != blank %}
 <div class="wbs-journey-map__stage-{{ wbs_id }}" data-stage>
 <div class="wbs-journey-map__stage-marker-{{ wbs_id }}">
 {% if section.settings[icon_key] == 'number' %}
 <span class="wbs-journey-map__stage-number-{{ wbs_id }}">{{ i }}</span>
 {% elsif section.settings[icon_key] == 'lightbulb' %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
 </svg>
 {% elsif section.settings[icon_key] == 'pencil' %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
 </svg>
 {% elsif section.settings[icon_key] == 'cube' %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
 </svg>
 {% elsif section.settings[icon_key] == 'gift' %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
 </svg>
 {% elsif section.settings[icon_key] == 'truck' %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
 </svg>
 {% elsif section.settings[icon_key] == 'heart' %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
 </svg>
 {% else %}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 </svg>
 {% endif %}
 </div>

 <div class="wbs-journey-map__stage-content-{{ wbs_id }}">
 <div class="wbs-journey-map__stage-text-{{ wbs_id }}">
 {% if section.settings[label_key] != blank %}
 <span class="wbs-journey-map__stage-label-{{ wbs_id }}">{{ section.settings[label_key] }}</span>
 {% endif %}
 <h3 class="wbs-journey-map__stage-title-{{ wbs_id }}">{{ section.settings[title_key] }}</h3>
 {% if section.settings[description_key] != blank %}
 <div class="wbs-journey-map__stage-description-{{ wbs_id }}">{{ section.settings[description_key] }}</div>
 {% endif %}
 </div>

 <div class="wbs-journey-map__stage-image-{{ wbs_id }}">
 {% if section.settings[image_key] != blank %}
 <img 
 src="{{ section.settings[image_key] | image_url: width: 800 }}" 
 alt="{{ section.settings[image_key].alt | escape }}"
 loading="lazy"
 width="{{ section.settings[image_key].width }}"
 height="{{ section.settings[image_key].height }}"
 >
 {% else %}
 <div class="wbs-journey-map__stage-image-placeholder-{{ wbs_id }}">
 {{ 'image' | placeholder_svg_tag }}
 </div>
 {% endif %}
 </div>
 </div>
 </div>
 {% endif %}
 {% endfor %}
 </div>

 {% if section.settings.show_cta and section.settings.cta_text != blank %}
 <div class="wbs-journey-map__cta-{{ wbs_id }}">
 <a href="{{ section.settings.cta_link }}" class="wbs-journey-map__cta-button-{{ wbs_id }}">
 {{ section.settings.cta_text }}
 </a>
 </div>
 {% endif %}
 {% else %}
 <div class="wbs-journey-map__empty-state-{{ wbs_id }}">
 {{ 'image' | placeholder_svg_tag }}
 <p>{{ section.settings.empty_state_text }}</p>
 </div>
 {% endif %}
 </div>
</wbs-journey-map-{{ wbs_id }}>

<script>
 (function() {
 class JourneyMap{{ wbs_id }} extends HTMLElement {
 constructor() {
 super();
 this.stages = this.querySelectorAll('[data-stage]');
 this.observerOptions = {
 threshold: 0.2,
 rootMargin: '0px 0px -100px 0px'
 };
 }

 connectedCallback() {
 this.setupIntersectionObserver();
 }

 setupIntersectionObserver() {
 const observer = new IntersectionObserver((entries) => {
 entries.forEach((entry, index) => {
 if (entry.isIntersecting) {
 setTimeout(() => {
 entry.target.classList.add('visible');
 }, index * {{ section.settings.animation_delay }});
 observer.unobserve(entry.target);
 }
 });
 }, this.observerOptions);

 this.stages.forEach(stage => {
 observer.observe(stage);
 });
 }
 }

 customElements.define('wbs-journey-map-{{ wbs_id }}', JourneyMap{{ wbs_id }});
 })();
</script>

{% schema %}
{
 "name": "Story Timeline",
 "settings": [
 {
 "type": "header",
 "content": "Content"
 },
 {
 "type": "inline_richtext",
 "id": "heading",
 "label": "Heading",
 "default": "Our Product Journey"
 },
 {
 "type": "richtext",
 "id": "subheading",
 "label": "Subheading",
 "default": "<p>Discover the story behind every product we create</p>"
 },
 {
 "type": "inline_richtext",
 "id": "empty_state_text",
 "label": "Empty state text",
 "default": "Add stages to create your product journey"
 },
 {
 "type": "header",
 "content": "Stage 1"
 },
 {
 "type": "inline_richtext",
 "id": "stage_1_label",
 "label": "Label",
 "default": "Step 1"
 },
 {
 "type": "inline_richtext",
 "id": "stage_1_title",
 "label": "Title",
 "default": "Idea"
 },
 {
 "type": "richtext",
 "id": "stage_1_description",
 "label": "Description",
 "default": "<p>Every great product starts with a spark of inspiration and a vision to create something meaningful.</p>"
 },
 {
 "type": "image_picker",
 "id": "stage_1_image",
 "label": "Image"
 },
 {
 "type": "select",
 "id": "stage_1_icon",
 "label": "Icon",
 "options": [
 { "value": "number", "label": "Number" },
 { "value": "lightbulb", "label": "Lightbulb" },
 { "value": "pencil", "label": "Pencil" },
 { "value": "cube", "label": "Cube" },
 { "value": "gift", "label": "Gift" },
 { "value": "truck", "label": "Truck" },
 { "value": "heart", "label": "Heart" },
 { "value": "check", "label": "Check" }
 ],
 "default": "lightbulb"
 },
 {
 "type": "header",
 "content": "Stage 2"
 },
 {
 "type": "inline_richtext",
 "id": "stage_2_label",
 "label": "Label",
 "default": "Step 2"
 },
 {
 "type": "inline_richtext",
 "id": "stage_2_title",
 "label": "Title",
 "default": "Design"
 },
 {
 "type": "richtext",
 "id": "stage_2_description",
 "label": "Description",
 "default": "<p>Our talented designers bring ideas to life with careful attention to detail and aesthetics.</p>"
 },
 {
 "type": "image_picker",
 "id": "stage_2_image",
 "label": "Image"
 },
 {
 "type": "select",
 "id": "stage_2_icon",
 "label": "Icon",
 "options": [
 { "value": "number", "label": "Number" },
 { "value": "lightbulb", "label": "Lightbulb" },
 { "value": "pencil", "label": "Pencil" },
 { "value": "cube", "label": "Cube" },
 { "value": "gift", "label": "Gift" },
 { "value": "truck", "label": "Truck" },
 { "value": "heart", "label": "Heart" },
 { "value": "check", "label": "Check" }
 ],
 "default": "pencil"
 },
 {
 "type": "header",
 "content": "Stage 3"
 },
 {
 "type": "inline_richtext",
 "id": "stage_3_label",
 "label": "Label",
 "default": "Step 3"
 },
 {
 "type": "inline_richtext",
 "id": "stage_3_title",
 "label": "Title",
 "default": "Production"
 },
 {
 "type": "richtext",
 "id": "stage_3_description",
 "label": "Description",
 "default": "<p>Quality craftsmanship meets modern manufacturing to create products that last.</p>"
 },
 {
 "type": "image_picker",
 "id": "stage_3_image",
 "label": "Image"
 },
 {
 "type": "select",
 "id": "stage_3_icon",
 "label": "Icon",
 "options": [
 { "value": "number", "label": "Number" },
 { "value": "lightbulb", "label": "Lightbulb" },
 { "value": "pencil", "label": "Pencil" },
 { "value": "cube", "label": "Cube" },
 { "value": "gift", "label": "Gift" },
 { "value": "truck", "label": "Truck" },
 { "value": "heart", "label": "Heart" },
 { "value": "check", "label": "Check" }
 ],
 "default": "cube"
 },
 {
 "type": "header",
 "content": "Stage 4"
 },
 {
 "type": "inline_richtext",
 "id": "stage_4_label",
 "label": "Label",
 "default": "Step 4"
 },
 {
 "type": "inline_richtext",
 "id": "stage_4_title",
 "label": "Title",
 "default": "Packaging"
 },
 {
 "type": "richtext",
 "id": "stage_4_description",
 "label": "Description",
 "default": "<p>Thoughtfully packaged with sustainability in mind, ready to delight from the moment you receive it.</p>"
 },
 {
 "type": "image_picker",
 "id": "stage_4_image",
 "label": "Image"
 },
 {
 "type": "select",
 "id": "stage_4_icon",
 "label": "Icon",
 "options": [
 { "value": "number", "label": "Number" },
 { "value": "lightbulb", "label": "Lightbulb" },
 { "value": "pencil", "label": "Pencil" },
 { "value": "cube", "label": "Cube" },
 { "value": "gift", "label": "Gift" },
 { "value": "truck", "label": "Truck" },
 { "value": "heart", "label": "Heart" },
 { "value": "check", "label": "Check" }
 ],
 "default": "gift"
 },
 {
 "type": "header",
 "content": "Stage 5"
 },
 {
 "type": "inline_richtext",
 "id": "stage_5_label",
 "label": "Label",
 "default": "Step 5"
 },
 {
 "type": "inline_richtext",
 "id": "stage_5_title",
 "label": "Title",
 "default": "Delivery"
 },
 {
 "type": "richtext",
 "id": "stage_5_description",
 "label": "Description",
 "default": "<p>Fast and reliable shipping ensures your product arrives safely at your doorstep.</p>"
 },
 {
 "type": "image_picker",
 "id": "stage_5_image",
 "label": "Image"
 },
 {
 "type": "select",
 "id": "stage_5_icon",
 "label": "Icon",
 "options": [
 { "value": "number", "label": "Number" },
 { "value": "lightbulb", "label": "Lightbulb" },
 { "value": "pencil", "label": "Pencil" },
 { "value": "cube", "label": "Cube" },
 { "value": "gift", "label": "Gift" },
 { "value": "truck", "label": "Truck" },
 { "value": "heart", "label": "Heart" },
 { "value": "check", "label": "Check" }
 ],
 "default": "truck"
 },
 {
 "type": "header",
 "content": "Stage 6"
 },
 {
 "type": "inline_richtext",
 "id": "stage_6_label",
 "label": "Label",
 "default": "Step 6"
 },
 {
 "type": "inline_richtext",
 "id": "stage_6_title",
 "label": "Title",
 "default": "You"
 },
 {
 "type": "richtext",
 "id": "stage_6_description",
 "label": "Description",
 "default": "<p>The final and most important step - bringing joy and value to your life every day.</p>"
 },
 {
 "type": "image_picker",
 "id": "stage_6_image",
 "label": "Image"
 },
 {
 "type": "select",
 "id": "stage_6_icon",
 "label": "Icon",
 "options": [
 { "value": "number", "label": "Number" },
 { "value": "lightbulb", "label": "Lightbulb" },
 { "value": "pencil", "label": "Pencil" },
 { "value": "cube", "label": "Cube" },
 { "value": "gift", "label": "Gift" },
 { "value": "truck", "label": "Truck" },
 { "value": "heart", "label": "Heart" },
 { "value": "check", "label": "Check" }
 ],
 "default": "heart"
 },
 {
 "type": "header",
 "content": "Call to action"
 },
 {
 "type": "checkbox",
 "id": "show_cta",
 "label": "Show button",
 "default": true
 },
 {
 "type": "inline_richtext",
 "id": "cta_text",
 "label": "Button text",
 "default": "Explore Our Products"
 },
 {
 "type": "url",
 "id": "cta_link",
 "label": "Button link"
 },
 {
 "type": "header",
 "content": "Layout"
 },
 {
 "type": "range",
 "id": "max_width",
 "min": 800,
 "max": 1400,
 "step": 50,
 "unit": "px",
 "label": "Maximum width",
 "default": 1200
 },
 {
 "type": "range",
 "id": "heading_size",
 "min": 24,
 "max": 56,
 "step": 2,
 "unit": "px",
 "label": "Heading size",
 "default": 40
 },
 {
 "type": "range",
 "id": "subheading_size",
 "min": 14,
 "max": 24,
 "step": 1,
 "unit": "px",
 "label": "Subheading size",
 "default": 18
 },
 {
 "type": "range",
 "id": "marker_size",
 "min": 40,
 "max": 80,
 "step": 5,
 "unit": "px",
 "label": "Marker size",
 "default": 60
 },
 {
 "type": "range",
 "id": "card_border_radius",
 "min": 0,
 "max": 40,
 "step": 2,
 "unit": "px",
 "label": "Card border radius",
 "default": 16
 },
 {
 "type": "range",
 "id": "image_border_radius",
 "min": 0,
 "max": 40,
 "step": 2,
 "unit": "px",
 "label": "Image border radius",
 "default": 12
 },
 {
 "type": "select",
 "id": "image_aspect_ratio",
 "label": "Image aspect ratio",
 "options": [
 { "value": "1 / 1", "label": "Square (1:1)" },
 { "value": "4 / 3", "label": "Landscape (4:3)" },
 { "value": "16 / 9", "label": "Wide (16:9)" },
 { "value": "3 / 4", "label": "Portrait (3:4)" }
 ],
 "default": "4 / 3"
 },
 {
 "type": "header",
 "content": "Animation"
 },
 {
 "type": "range",
 "id": "animation_delay",
 "min": 0,
 "max": 500,
 "step": 50,
 "unit": "ms",
 "label": "Delay between stages",
 "default": 150
 },
 {
 "type": "header",
 "content": "Colors"
 },
 {
 "type": "color",
 "id": "background_color",
 "label": "Background",
 "default": "#ffffff"
 },
 {
 "type": "color",
 "id": "card_background",
 "label": "Card background",
 "default": "#ffffff"
 },
 {
 "type": "color",
 "id": "text_color",
 "label": "Text",
 "default": "#000000"
 },
 {
 "type": "color",
 "id": "subtext_color",
 "label": "Subtext",
 "default": "#666666"
 },
 {
 "type": "color",
 "id": "timeline_start_color",
 "label": "Timeline start",
 "default": "#a42325"
 },
 {
 "type": "color",
 "id": "timeline_end_color",
 "label": "Timeline end",
 "default": "#780406"
 },
 {
 "type": "color",
 "id": "marker_color",
 "label": "Marker background",
 "default": "#a42325"
 },
 {
 "type": "color",
 "id": "marker_icon_color",
 "label": "Marker icon",
 "default": "#ffffff"
 },
 {
 "type": "color",
 "id": "marker_ring_color",
 "label": "Marker ring",
 "default": "#f9e6e6"
 },
 {
 "type": "color",
 "id": "label_background",
 "label": "Label background",
 "default": "#f1f1f1"
 },
 {
 "type": "color",
 "id": "label_text_color",
 "label": "Label text",
 "default": "#666666"
 },
 {
 "type": "header",
 "content": "Button"
 },
 {
 "type": "color",
 "id": "button_color",
 "label": "Background",
 "default": "#a42325"
 },
 {
 "type": "color",
 "id": "button_text_color",
 "label": "Text",
 "default": "#ffffff"
 },
 {
 "type": "color",
 "id": "button_hover_color",
 "label": "Hover background",
 "default": "#780406"
 },
 {
 "type": "range",
 "id": "button_border_radius",
 "min": 0,
 "max": 40,
 "step": 2,
 "unit": "px",
 "label": "Border radius",
 "default": 8
 }
 ],
 "presets": [
 {
 "name": "Story Timeline"
 }
 ]
}
{% endschema %}

Story Timeline Shopify Section – Build a Powerful Brand Journey Experience

Story Timeline Shopify Section is an effective way to visually communicate your brand’s journey, milestones, and values. Instead of presenting plain text on your About Us page, a timeline section allows you to tell your story step by step in a clean, engaging, and interactive format. This approach helps customers connect emotionally with your brand and builds long-term trust.

HTML5 Mobile Meta Tags

Thu, 02 Jul 2026 00:00:00 +0000

HTML5 Mobile Meta Tags

There are several tags that are specifically geared to mobile devices. Among them are tags that tell browsers to take up the entire view-port and disable scaling, and to change the status bar color, which we will cover in the following section.

HTML5-Intro

Wed, 01 Jul 2026 00:00:00 +0000

HTML5 has long since become the standard markup language for web development, and it’s the foundation nearly every modern site is still built on today. Despite that, plenty of developers never fully learn its properties beyond the basics. This article covers the key features worth knowing to build a solid foundation.

How To Embed ANY Social Media Content in Shopify (800+ Platforms Supported)

Tue, 30 Jun 2026 00:00:00 +0000

Tired of boring product pages? What if you could add Instagram reels, YouTube demos, or customer reviews with just a copy and paste? No coding. No complex widgets. Just pure, simple magic.

How To Show Sale Discount Percentage on Shopify

Mon, 29 Jun 2026 00:00:00 +0000

Step 1: Replace the code in _product-card-gallery.liquid

Replace the following code in _product-card-gallery.liquid

{%- if product.available == false or product.compare_at_price > product.price and product.available -%}
 <div
 class="
 product-badges__badge product-badges__badge--rectangle
 {% if product.available == false %} color-{{ settings.badge_sold_out_color_scheme }}{% elsif product.compare_at_price > product.price %} color-{{ settings.badge_sale_color_scheme }}{% endif %}
 "
 >
 {%- if product.available == false -%}
 {{ 'content.product_badge_sold_out' | t }}
 {%- elsif product.compare_at_price > product.price -%}
 {{ 'content.product_badge_sale' | t }}
 {%- endif -%}
 </div>
{%- endif -%}

With the following code

Shopify Agentic Storefront – RANK Your Shopify Store in ChatGPT

Sun, 28 Jun 2026 00:00:00 +0000

Your Shopify store is missing out on a massive opportunity. While everyone’s focused on Google search rankings, AI models like ChatGPT, Google Gemini, and Microsoft Copilot are becoming the new discovery channels. And here’s the thing: most store owners have no idea how to optimize for them.

How To Add a Price Range Slider in Shopify (Free Code)

Sat, 27 Jun 2026 00:00:00 +0000

In today’s e-commerce world, providing a seamless shopping experience is key to increasing sales. Shopify’s default filters are great, but sometimes you want a more interactive and visually appealing way for customers to filter products. In this tutorial, we’ll show you how to add a custom Price Range Slider Filter to your Shopify theme for free.

How To Give Shopify Store Access Safely

Fri, 26 Jun 2026 00:00:00 +0000

Running a Shopify store often means you need help. Whether you’re hiring a developer for custom theme work, a contractor to add products, or a team member to manage orders you need a safe way to grant access.

How To Setup Abandoned Cart In Shopify

Thu, 25 Jun 2026 00:00:00 +0000

Did you know that out of every 10 people who visit an online store, 7 of them leave without finishing their purchase? That is a massive 70% of your potential revenue walking out the door!

How To Use Claude Connector For Shopify

Wed, 24 Jun 2026 00:00:00 +0000

Shopify is evolving fast and now, connecting your store with AI tools like Claude is easier than ever.

Previously, this required custom apps and technical setup. But now, you can connect your Shopify store and start chatting with your data in just a few clicks.

Google May 2026 Core Update Explained: Key SEO Changes and Recovery Tips

Tue, 23 Jun 2026 00:00:00 +0000

Thursday, May 21, 2026, it began – on June 2, 2026, it was over. Google marked the May 2026 Core Update as officially complete after roughly twelve days. The entry in the Google Search Status Dashboard is unambiguous: “The rollout was complete as of June 2, 2026.” The second confirmed broad core update of 2026 is done – and the phase in which reacting would only have produced noise is over.

How Build a No-Code Political Tweet Analyzer with N8N [Free Workflow]

Mon, 22 Jun 2026 00:00:00 +0000

Tired of manually reading hundreds of Twitter comments to gauge public opinion? Whether you’re a marketer analyzing brand sentiment, a politician understanding your audience, or a researcher studying social trends, this process is tedious and time-consuming.

Why SEO Matters in Today’s World

Sun, 21 Jun 2026 00:00:00 +0000

Introduction: Why SEO Matters in Today’s World

Imagine having a stunning website or online store, but no one can find it. Sounds frustrating, right? That’s where SEO Services come in. Search Engine Optimization (SEO) is the key to getting your business noticed on Google, Bing, and other search engines. Whether you’re a small business owner, an E-commerce seller, or a service provider, ranking higher on search results can bring you more customers and skyrocket your sales. At Creatify, our expert SEO Services help you climb the ranks, attract the right audience, and grow your business, all without breaking the bank. Let’s explore how we can make this happen for you!

What Is SEO and How Does It Work?

Sat, 20 Jun 2026 00:00:00 +0000

If you’ve ever wondered why some websites appear at the top of Google
While others stay buried on page 10, the answer is simple: SEO.
Search Engine Optimization (SEO) is one of the most powerful digital marketing strategies used today, helping businesses improve their online visibility, attract the right audience, and generate long-term organic traffic.

What Is SEO?

Definition
- SEO (Search Engine Optimization) is the process of improving your website so it ranks higher on search engines like Google, Bing, and Yahoo. When your website appears higher in search results, more people can find your business, visit your website, and convert into customers.
- In simple terms: Better SEO = Higher Ranking = More Traffic = More Sales
- Unlike paid ads, SEO focuses on organic traffic, meaning you don’t pay Google for clicks. Your website earns visibility by being relevant, trustworthy, and user-friendly.