Dawn
Align submenu to left
In header, add the following to custom css: .header--top-center .mega-menu__list { display: flex; justify-content: left; flex-wrap: wrap; column-gap: 0; }
Create a Video with Text Section
Create a new section with this code, called "video-with-text.liquid" {{ 'component-video-with-text.css' | asset_url | stylesheet_tag }} <div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% ...
Display payment method icons at the footer
From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code. In the Sections directory, click footer.liquid. If your theme doesn't include this file, ...
Remove/hide Sold out Badge for out of stock Products
In base.css file, add this code at the bottom: .grid__item .card-wrapper:has(.price--sold-out) .card--media .card__badge { display: none !important; }
Align featured collection titles to center
In the featured collection section, add the following css in custom css: .collection__title.title-wrapper { text-align-last: center; }
Add “Description” title before the description on product page
Add a custom liquid section in product page after add to cart button. Insert the following liquid in the custom liquid. {% if product.description != '' %} <br> <h3 style="color: #EC1C24; font-weight: 600;">DESCRIPTION & SPECIFICATIONS</h3> {% endif ...
Hide price when price equal to zero
In price.liquid, add the following: <div class="price_regular"> {% if product.price > 0 %} <span class="visually-hidden visually-hidden <span class="price-item price-item--regular”> {{ money_price }} </ span> {% endif %}
Add "Login" text next to account icon at the header
In header.liquid: {% render 'icon-account' %} <span style= "margin: 8px 15px 0 5px; line-height: 5px; text-decoration:none;">Login</span>
Create a Video Background section
Create the section snippet, create a new snippet named: video-background.liquid and copy the following liquid into it. {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | ...
Make parent link clickable
Snippets > header-mega-menu.liquid (l.19-25) Parentlink {%- assign parentlink = link.links[0] -%} <a href="{{ parentlink.url }}" title="{{ parentlink.title }}"> <span {%- if link.child_active %} class="header__active-menu-item" {% endif %} > {{- ...
Increase width of policy pages
Go to Online Store > Theme > Edit code of your current theme Open your base.css theme file Paste the below code at the end of the css .shopify-policy__container { max-width: 95% !important; } .shopify-policy__container h1 { text-align: left; ...
Adding Custom Fonts to Shopify
Download font file and convert it to woff2 format Upload the font to asset file 3. add it to base.css 4. We can use for any element now.
Make all filter expand by default
Go to Online Store >Theme >Edit code. Search file theme.liquid Paste the below code before </body> of the file -> Save <script> window.addEventListener('DOMContentLoaded',(event)=>{ document.querySelectorAll('facet-filters-form ...