Many apps available in Xoot are fully customizable in terms of designs, size, templates, content, and even in modifying positions.

Talking about the position, you can either keep it default or change it as desired. Let’s proceed with how to change the position of the Frequently Bought Together app.


Steps to change Frequently Bought Together position

If you wish to change its position then XOOT offers the below two options:

  1. Using jQuery Selectors

  2. Injecting the code snippet in the liquid

Let’s understand their process step by step.

Using jQuery Selectors:

Step 1: Under the Frequently Bought Together app, click on “Design.”

Step 2: Now from the Settings option, select “Custom” from the Widget Position drop-down arrow.

Step 3: Add class or id of a div into the Custom position space. Next, select the Custom selector insert options to place this widget (inside, after, or before) to that HTML selector.

Finally, tap on the “Save and Publish” button to enable the changes.

Injecting the code snippet in the liquid:

Here are the steps to follow to inject the code snippet in the liquid:

Step 1: From your Shopify store, click on the “Online Store” option.

Step 2: Now, tap on the “Themes” option.

Step 3: Jump to the “Actions” drop-down arrow, and click on the “Edit code” option.

Step 4: Next, go to the product-template.liquid and paste the below code in the product-template.liquid file.

<div id=xoot_fbt_wrapper></div>

Step 5: Once you have pasted the code in the desired position, enable the changes by clicking on the “Save” button.

Hence through these two ways, you can change the position of your Frequently Bought Together. In case you're not able to change the position, you can take the help of our support team.

Did this answer your question?