WARNING: Product filtering may not work unless these settings are configured properly. 

On this page, you must define settings corresponding to your theme markup. You can see a more in-depth look at this in the Getting Started video guide.

 

Instead of forwarding a visitor to the homepage if they land on a product that has been filtered for their region, you can redirect them to another page.  You can also disable flicker reduction if products are not displaying before filtering.

 

 

In the following fields, you must define some information about your product list template including CSS selectors for wrappers and blocks.  A CSS Selector refers to a specific element on a page and can be found by following these steps:

  1. Hover your cursor over the image of a product in the Collections section of your homepage.
  2. Right-click your mouse and select "Inspect".
  3. In the inspector, scroll through each line of code upwards until you reach the first element with the words "div id=shopify-section..." in it.
  4. Once you have located the correct line of code, right-click and select "Copy", then "Copy selector".
  5. Paste the code you have just copied into the "CSS selector of product list wrapper" field.

 

Now we need to grab the code for an individual item, so back to the homepage.

  1. We follow the same steps but are looking for code in a different area this time.
  2. Hover your cursor over the same image we looked at the code for earlier, right-click and click 'Inspect'.
  3. Scroll downwards until you reach a line starting with "<li class=...".
  4. Double click the first word after "class=" twice and copy it by right-clicking, which in our case is "grid__item".
  5. Now paste the item into the "CSS selector of product item block" field.
  6. Finally, click the "Save Product Settings Configuration" button around halfway down the page.

 

Step 1:

Hover the cursor over the image of a product in the collections/all section on your homepage and right-click your mouse to Inspect.

Step 2:

View the highlighted code in the inspector and move your cursor through each line of code to find the one that selects the product block for the page. Find the one that is most specific, while still including all products.

Here are some examples:

<div id="shopify-section-custom....">

<div id="shopify-section-featured-collections..."> 

Right-click your mouse, then hover over 'Copy', then choose 'Copy Selector' in the drop-down menu.

 

 

 

Step 3:

Paste the code you have just copied into the 'CSS selector of product list wrapper' field and click the 'Save Product Settings Configuration' around halfway down the page.

 

 Step 4:

 Apply these same steps to the individual product and paste the code into the CSS selector of product item block field.

 

 

Step 5:

Apply the same steps to Collection List Settings using the same method as above, and for the sections that you've added to your theme, such as the recommended block and best seller block. You can enable/disable any section, and add a section if it is not listed.

Make sure to save before leaving this setting page!

 

Still, need help?  Please do not hesitate to click the "Support" button at the top of the app interface.