Reputation: 338
I need to create a custom section on Shopify and that custom section is called on every page
Upvotes: 0
Views: 4678
Reputation: 71
Create a file in the theme’s /sections
directory for each page we’ll add sections to. For example, we might create /sections/about.liquid
to be used with the About template. The markup in these files is, for the most part, a long switch statement followed by an accompanying schema. Like this:
{% when 'hero' %}
{% include 'snippet_hero-banner' %}
{% when 'program' %}
{% include 'snippet_module-program' %}
{% when 'coaching' %}
{% include 'snippet_coaching' %}
{% when 'shop' %}
{% include 'snippet_shop-now' %}
{% when 'promo' %}
{% include 'snippet_promo' %}
{% when 'comparison' %}
{% include 'snippet_comparison' %}
{% endcase %}
</div>
{% endfor %}
</div>
{% schema %}
{
"blocks": [
{
"type": "hero",
"name": "Hero Banner",
"settings": [
{
"id": "bannerImage",
"type": "image_picker",
"label": "Banner Image"
}
]
},
{
"type": "program",
"name": "Program Selector",
"settings": [
{
"id": "program",
"type": "radio",
"label": "Choose a program",
"options": [
{"value": "planA", "label": "Plan Type A"},
{"value": "planB", "label": "Plan Type B"},
{"value": "planC", "label": "Plan Type C"}
]
}
]
},
{
"type": "coaching",
"name": "Coaching",
"settings": [
{
"id": "coachingTitle",
"type": "text",
"label": "Title"
},
{
"id": "coachingSummary",
"type": "textarea",
"label": "Summary"
},
{
"id": "coachingImage",
"type": "image_picker",
"label": "Image"
}
]
},
{
"type": "shop",
"name": "Shop Now",
"settings": [
{
"id": "shopNowTitle",
"type": "text",
"label": "Title",
"default": "What do you have to lose? Shop now."
},
{
"id": "shopNowHeader1",
"type": "text",
"label": "Left Header",
"default": "The 4-1-1"
}
]
},
{
"type": "promo",
"name": "Promo",
"settings": [
{
"id": "promoTitle",
"type": "textarea",
"label": "Title"
},
{
"id": "promoSubtitle",
"type": "textarea",
"label": "Subtitle"
}
]
},
{
"type": "comparison",
"name": "Compare",
"settings": [
{
"id": "comparisonImage",
"type": "image_picker",
"label": "image"
},
{
"id": "comparisonTitle",
"type": "text",
"label": "Title"
},
{
"id": "comparisonSummary",
"type": "textarea",
"label": "Summary"
},
{
"id": "comparisonButtonLink",
"type": "url",
"label": "Button Link"
},
{
"id": "comparisonButtonText",
"type": "text",
"label": "Button Text"
}
]
}
]
}
{% endschema %}
We create snippets for each page element page that will be editable as a section. The code above uses include to reference markup from the /snippets directory based on the block’s type. That type, along with the block’s name, are denoted in the schema portion below the switch statement.
The id
is the handle for a particular editable characteristic of the
block
The type
denotes what kind of setting it is. For example:
A color
type will generate a field in the customization sidebar which will allow you to choose from a color palette.
The label
is simply the label for the field.
In the /templates
directory, replace the markup in your page (for example, /templates/page.about.liquid
) with something like this: {% section 'about' %}
This will include the /sections/about.liquid
file that we created in the previous step.
Click to edit this section, and we find that we are able to add any of the blocks we built–as long as we wrote the possibility into the case
statement.
{% schema %}
and using the {{ block.settings.yoursetting }}
liquid tag to render the content. Now you can customize images, plain text, URLs, and more.Results
Congratulations! If you’ve been following along then you’ve brought sections functionality to your entire shop.
Upvotes: 2