How to move EXPO section around

Within EXPO admin dashboard, you can move each option up and down using the drag and drop handle.

In order to change the position of the whole section of extra product options, you will need to edit theme code. Please, before using this method, make sure that you are already comfortable with editing code.

When it comes to moving the whole EXPO block, editing code isn't that hard. Here's how.

Below you will find the shortcode for extra product options' injection, also the single line you need to copy and paste in your theme code.

<div id="expo-section" ></div>

Place EXPO section before variant picker

Navigate to the liquid file that defines your product page. This could vary from theme to theme, but the most popular file you can find it is product-template.liquid.

Look for the code for the product form, which starts with {% form 'product' and ends with {% endform %}.

Paste the copied EXPO section code line within the product form.

Then click Save the liquid file, and re-visit your product page. You will see the EXPO section placed right above the variant picker.

Place EXPO section after variant picker and before quantity selector

Similarly, navigate between the variant select section and quantity section. And paste the code for EXPO section. Then click Save the file.

Then EXPO section will be moved to below the variant buttons, like this:

Your theme structure can be very different from the screenshots above. If you're not sure where to put the code, please feel free to contact us to get help.

Last updated