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?
Right-click on the page where you want to display the store block
Click on Inspect
Select the mouse icon on the top right to inspect any element on the page
Find a position above or below which you'd like the store block to be displayed
There are two types of CSS selectors:-
Class
ID
Copy the class or id by double-clicking & selecting it
How to set the position in the ModeMagic app?
Select Position from the right side of the screen
Select Custom
From the "Position in Page" drop-down menu, select from the following options-
below
above
at the top of the page
at the bottom of the page
at the top of the page always
at the bottom of the page always
In the element at the CSS selector dialog box, enter the CSS selector which you have copied to your clipboard
If the CSS Selector is a class add "." (dot) in front of it
Example: .css-slider-navigation-container
If the CSS Selector is an id add "#" (hashtag) in front of it
Example: #shopify-section-template--16228896145557__featured-collection
Note: If the CSS Selector (class or id) has a space in between it, the spaces should be replaced with a "." (dot)
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:
If its a class: .ProductForm__BuyButtons.custom-fixed-buy-now
If its an id: #wishlisthero-popup-display-container