Fix Shopify Issue — Fit Quiz by Easysize APP

If you are experiencing layout issues on your Shopify site with the Vantage theme and are using the Fit Quiz by Easyzie App integration, chances are your product view has a border and the footer is floating in the middle of your page — blocking page elements (blocking sales!)

Fix it with a simple CSS override:

1. Navigate to your active theme to edit the theme files: In Shopify Admin View navigate in the left sidebar and click “Online Store > Themes”. In the “Themes” View: click “…” left of the “Customize” button on your active theme
2. Create a new asset Stylesheet: In the Theme Files Editing View search “css”, click “Add a new asset”, save it as “app-overrides.css”
3. Add CSS: .edge { position: relative !important; border: none !important; } shown in screenshots below
4. Add CSS to theme.liquid file: In the Theme Files Editing View search “theme”, click “theme.liquid”, locate theme stylesheet, copy <link rel=”stylesheet” href=”{{ ‘app-overrides.css’ | asset_url }}” type=”text/css”>, add below theme stylesheet shown in screenshots below

If you have issues, feel free to message me at siderole.com

WHY A SEPARATE CSS STYLESHEET:

• Creating a stand-alone CSS file is a best practice and ensures the work you do now, won’t be overridden in the future with a theme update.
• If you leverage 3rd-party Shopify apps, chances are the need to create additional CSS overrides will likely arise again in the future. Having a centralized place to manage these goal specific styles creates clarity and keeps the file/code intentional and goal oriented.
• Because it #SparksJoy

HOW TO CONFIRM THIS IS YOUR ISSUE:

• In a preferred browser, open developer tools (cmd+opt+i) and inspect the product module (the thing that likely has a border and/or locatevia console search “edge”. In the CSS view, look for a stand-alone .edge css class and confirm there is a “position: absolute;” on the element. Uncheck the box to confirm:

Confirm your layout issue – screenshot

Shopify Easy Size css applied .edge {position: absolute;} causing layout shift

Step 1 – Fix

Screenshot Showing CSS File Edition

1. Search “css”
2. Click “Add a new asset”
3. Save it as “app-overrides.css”
4. Add CSS as shown
5. Add CSS include to theme.js file

Step 2 – Implementation

Screenshot Showing CSS File Addition to them.liquid file

1. Search “theme”
2. Click “theme.liquid”
3. Locate theme stylesheet
4. Add link ref to “app-overrides.css”
5. Click “save” to apply updates

CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.