How to customize location/position of Monk's widgets?
Depending upon the funnel you have setup & the theme you're using there are multiple ways to edit the position of a widget.
If you're setting up a funnel on the product page (Offer Type = Cross Sell or Volume Discount or Frequently Bought Together) or checkout page (Only for Shopify Plus stores) and your theme is compatible with Shopify OS 2.0 you can edit your theme settings to add a Monk app block and customize it's position from within your theme editor. Here are the steps to do so:
If you're trying to setup a funnel on the cart page/drawer/popup you can skip these steps and jump to the next section of the document
The below mentioned points outline the steps to change widget position on the Product page-
Go to Online Store in your Shopify admin and click on Customize theme.
Under Product Information select 'Add block' and select the Monk app block as per the offer type you're trying to setup
A visual representation of the position of Monk’s widget will be visible on the product page
You can drag and drop the app block and customize the position of the widget as per your requirement
If you're trying to set-up a funnel on the cart page/drawer/popup (Offer Type = Cross Sell or Free Gift or Cart Value Progress Bar) and/or your theme is not updated to Shopify OS 2.0 - the above steps won't be very effective. In this case you can
- contact our support team via live chat or email (support@monkcommerce.com) with the exact position change that you want and we'll get it changed for you
OR
- work with your developer/agency & follow the steps mentioned below:
The 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 location of the app’s widgets.
This sample guide will show you how you can customize the placement of the Cart Value Progress Bar widget on cart page in Dawn theme.
Step 1: Go to Online Store in your Shopify admin
Step 2: Click on the menu next to 'Customize' and select 'Edit code'. You will be re-directed to the Shopify theme editor where you can edit your theme files
Step 3: Use the search bar to find the right .liquid file for your cart page/drawer/popup
Step 4: In this sample, we'll 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 Progress Bar widget on cart page
For example, to place your widget above the cart page form paste the snippet as shown in the image below (the same can be done for the relevant files for the cart drawer or cart popup depending upon how your theme is coded)
Step 6: Save your file
Progress bar on cart page
Progress bar on cart drawer
Free gift - manual selection on cart page
Free gift - manual selection on cart drawer
Cross-sell on cart page
Cross sell on cart drawer
Volume discount on product page
Frequently bought together on product page
Cross-sell on product page
If you do not have a developer or an agency that can make the above changes for your store - feel free to contact us via live chat or email support and we'll get the widget's position customized for your store at no additional cost. It's a quick and easy change for us to make.
If you're setting up a funnel on the product page (Offer Type = Cross Sell or Volume Discount or Frequently Bought Together) or checkout page (Only for Shopify Plus stores) and your theme is compatible with Shopify OS 2.0 you can edit your theme settings to add a Monk app block and customize it's position from within your theme editor. Here are the steps to do so:
If you're trying to setup a funnel on the cart page/drawer/popup you can skip these steps and jump to the next section of the document
The below mentioned points outline the steps to change widget position on the Product page-
Go to Online Store in your Shopify admin and click on Customize theme.
Under Product Information select 'Add block' and select the Monk app block as per the offer type you're trying to setup
A visual representation of the position of Monk’s widget will be visible on the product page
You can drag and drop the app block and customize the position of the widget as per your requirement
If you're trying to set-up a funnel on the cart page/drawer/popup (Offer Type = Cross Sell or Free Gift or Cart Value Progress Bar) and/or your theme is not updated to Shopify OS 2.0 - the above steps won't be very effective. In this case you can
- contact our support team via live chat or email (support@monkcommerce.com) with the exact position change that you want and we'll get it changed for you
OR
- work with your developer/agency & follow the steps mentioned below:
The 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 location of the app’s widgets.
Steps
This sample guide will show you how you can customize the placement of the Cart Value Progress Bar widget on cart page in Dawn theme.
Step 1: Go to Online Store in your Shopify admin
Step 2: Click on the menu next to 'Customize' and select 'Edit code'. You will be re-directed to the Shopify theme editor where you can edit your theme files
Step 3: Use the search bar to find the right .liquid file for your cart page/drawer/popup
Step 4: In this sample, we'll 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 Progress 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 (the same can be done for the relevant files for the cart drawer or cart popup depending upon how your theme is coded)
Step 6: Save your file
List of all code snippets based on Offer Type and Cart
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 on cart page
{% comment %}Monk Commerce - Manual Freegift - Cart Page Widget{% endcomment %}
<div id="mr-div-embedded-cp-freegift_manual-page" />Free gift - manual selection on cart drawer
{% comment %}Monk Commerce - Manual Freegift - Cart Drawer Widget{% endcomment %}
<div id="mr-div-embedded-cp-freegift_manual-drawer" />Cross-sell on cart page
{% comment %}Monk Commerce - Cross sell - Cart Page Widget{% endcomment %}
<div id="mr-div-embedded-cp-any-page" />Cross sell on cart drawer
{% comment %}Monk Commerce - Cross sell - Cart Drawer Widget{% endcomment %}
<div id="mr-div-embedded-cp-any-drawer" />Volume discount 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
{% comment %}Monk Commerce - Cross sell - Product Page Widget{% endcomment %}
<div id="mr-div-embedded-prp-any-page" />If you do not have a developer or an agency that can make the above changes for your store - feel free to contact us via live chat or email support and we'll get the widget's position customized for your store at no additional cost. It's a quick and easy change for us to make.
Updated on: 13/05/2024