All Collections
How to strategically recover your Abandoned Users?
How can I set up the correct position of a store block?
How can I set up the correct position of a store block?

Learn how to position a widget correctly

Kay! avatar
Written by Kay!
Updated over a week ago


​
When you're adding store blocks to your store, it's important to ensure that you position them correctly. If you're having trouble finding a store block that you've added, it's likely that it's not in the right position.


What is the Position of a store block?

The position of a store block is the CSS selector on your store page where you want the store block to be displayed.

Here's the list of store blocks for which position has to be set up-

Note: Default positions are set up already in the app, but it varies across store themes.

  • New Arrivals

  • Shop By Category

  • Product Bundles

  • Frequently Bought Together

  • Product Information

  • Bestselling Products

Here's the list of store blocks for which the position is already set up in the app & requires no changes-

  • Abandoned Cart

  • Welcome Incentives


Types of Positions of a store block

  • Floating Position

    • Preferrable for the following store blocks

      • Abandoned Cart

      • Welcome Incentives


        ​

  • Custom Position

    • Preferrable for the following store blocks

      • Shop By Category

      • New Arrivals

      • Product Bundles

      • Frequently Bought Together

      • Product Information

      • Bestselling Products


How to pick the CSS selector from your store?

  1. Right-click on the page where you want to display the store block

  2. Click on Inspect

  3. Select the mouse icon on the top right to inspect any element on the page

  4. Find a position above or below which you'd like the store block to be displayed

  5. There are two types of CSS selectors:-

    1. Class

    2. ID

  6. Copy the class or id by double-clicking & selecting it


How to set the position in the ModeMagic app?

  1. Select Position from the right side of the screen

  2. Select Custom

  3. From the "Position in Page" drop-down menu, select from the following options-

    1. below

    2. above

    3. at the top of the page

    4. at the bottom of the page

    5. at the top of the page always

    6. at the bottom of the page always

  4. In the element at the CSS selector dialog box, enter the CSS selector which you have copied to your clipboard
    ​

    1. If the CSS Selector is a class add "." (dot) in front of it

      Example: .css-slider-navigation-container
    2. If the CSS Selector is an id add "#" (hashtag) in front of it

      Example: #shopify-section-template--16228896145557__featured-collection

  5. Note: If the CSS Selector (class or id) has a space in between it, the spaces should be replaced with a "." (dot)

    1. Example: If a class or id is shopify-section mount-css-slider mount-slideshow

      then it should be set up in the ModeMagic app as follows:
      ​

      1. If its a class: .ProductForm__BuyButtons.custom-fixed-buy-now

      2. If its an id: #wishlisthero-popup-display-container


Did this answer your question?