Overview

Monk app create a unique <div /> element for each of its widgets. By adding these <div /> elements into your Store’s theme files you will be able to customize the placements of Monk app’s widgets.

Steps

This guide will show you how you can customize the placement of the Cart Value Bar Widget on cart page in Dawn theme.

Step 1: Go to the Online Store Section in your Shopify admin dashboard.

Step 2: Click on the Menu button before the Customize button and Select Edit Code. You will be redirected to the Shopify theme editor where you can edit your theme files.



Step 3: Use the Search bar to find the right .liquid file.



Step 4: Type ‘cart’ in the search bar and open the main-cart-items.liquid file



Step 5: Navigate through the file and paste the following code snippet where you would wish to place the Cart Value Bar widget on cart page.

{% comment %}Monk Commerce - Cart Value bar - Cart Page Widget{% endcomment %}
<div id="mr-div-embedded-cp-cvb-page" />

For Example, to place your widget above the Cart Page form paste the snippet as shown in the image below.



Step 6: Save your file.

All code snippets

Progress Bar on Cart Page

{% comment %}Monk Commerce - Cart Value bar - Cart Page Widget{% endcomment %}
    <div id="mr-div-embedded-cp-cvb-page" />

Progress Bar on Cart Drawer

{% comment %}Monk Commerce - Cart Value bar - Cart Drawer Widget{% endcomment %}
<div id="mr-div-embedded-cp-cvb-drawer" />

Free gift manual selection in Cart Page

{% comment %}Monk Commerce - Manual Freegift - Cart Page Widget{% endcomment %}
<div id="mr-div-embedded-cp-freegift_manual-page" />

Free gift manual selection in Cart Drawer

{% comment %}Monk Commerce - Manual Freegift - Cart Drawer Widget{% endcomment %}
<div id="mr-div-embedded-cp-freegift_manual-drawer" />

Cross-sell offer on Cart Page. Example Cross-sell widget

{% comment %}Monk Commerce - Cross sell - Cart Page Widget{% endcomment %}
<div id="mr-div-embedded-cp-any-page" />

Cross sell offer in Cart Drawer. Example Cross-sell widget

{% comment %}Monk Commerce - Cross sell - Cart Drawer Widget{% endcomment %}
<div id="mr-div-embedded-cp-any-drawer" />

Discount code widget on Cart Page

{% comment %}Monk Commerce - Discount code - Cart Page Widget{% endcomment %}
<div id="mr-div-embedded-discount-code-any-page" />

Discount code widget in Cart Drawer

{% comment %}Monk Commerce - Discount code - Cart Drawer Widget{% endcomment %}
<div id="mr-div-embedded-discount-code-any-drawer">

Volume Discount/ Quantity Break on Product Page

{% comment %}Monk Commerce - Volume Discount - Product Page Widget{% endcomment %}
<div id="mr-div-embedded-prp-vd-page" />

Frequently Bought Together on Product Page

{% comment %}Monk Commerce - Frequently Bought Together - Product Page Widget{% endcomment %}
<div id="mr-div-embedded-prp-fbt-page" />

Cross-sell on Product Page. Example Cross-sell (product page)

{% comment %}Monk Commerce - Cross sell - Product Page Widget{% endcomment %}
<div id="mr-div-embedded-prp-any-page" />

Updated on: 24/04/2023