Making a theme ShopBuilder compatible

You can make your theme compatible with the Shopbuilder with only a few adjustments. You should make sure that the scripts and styles of the ShopBuilder are loaded in the theme and that you provide several Ceres LayoutContainers in there as well. For information on how to create widgets for the ShopBuilder, see this tutorial.

Preparations

{{ get_shop_builder_styles() }}
{{ get_shop_builder_scripts() }}

General info

The ShopBuilder works with 3 different areas where widgets can be placed: the homepage, the header and the footer. Each of these three areas requires the integration of a LayoutContainer. In this container, a dropzone is initialised and all of the widgets that are already placed there are loaded. The user can also add further widgets. The identifiers of these containers are:

  • "Ceres::Homepage"
  • "Ceres::Header"
  • "Ceres::Footer"

See below for further information about each area.

Homepage

{% if config("Ceres.homepage.showShopBuilderContent") == "true" or request.get('isContentBuilder') == 1 %}
    ...
{% endif %}
{% for content in container("Ceres::Homepage") if content.plugin == "Plenty" %}
    {{ content.result | raw }}
{% endfor %}
{% if config("Ceres.homepage.showShopBuilderContent") == "true" or request.get('isContentBuilder') == 1 %}

    {% for content in container("Ceres::Homepage") if content.plugin == "Plenty" %}
        {{ content.result | raw }}
    {% endfor %}

{% endif %}
{% set headerContainer = LayoutContainer.show("Ceres::Header") | trim %}
{% if headerContainer is not empty %}
    {{ headerContainer | raw }}
{% endif %}
{% set footerContainer = LayoutContainer.show("Ceres::Footer") | trim %}
{{ footerContainer | raw }}

Is this article helpful?

 

Thank you for your Feedback

you can close this field now!