Theme Settings

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

On this page, you must define settings corresponding to your theme markup.

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.

 

Click here to view the video tutorial. 

Step 1 

Hover the cursor over the image of a product in the Collections 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 upwards until you reach an element with the words "shopify-section" in it. It may be easier to use the up and down arrow key to scroll.

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.

 

 

 

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

 

 

 

Apply the same steps to Collection List Settings.

 

 

And once again for the sections that apply to your theme.  You can enable/disable sections and add a section if it is not listed.

 

 

 

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