Dynamic Styles - Hiding Starter Theme Page Elements

Introduction

This article contains CSS elements that can be used and modified, and then added to the Store Experience > General Settings > Dynamic Styles area, to hide certain items in the Starter theme. For more information on these take the Academy Advanced CMS course.

Hiding Widgets on the Login Panel

Hide the Account Sign Up widget on the Login Panel

.col-12.p-0.mt-3.account-signup-container.checkout-new {display: none;}

Hiding Widgets on the Homepage

Hide the Main Slider on the Homepage

.home-slider {display: none;}


Hide the Advertisement Banner on the Homepage

.advertisement-banner {display: none;}


Hide the Two-Up Advertisement Content Container on the Homepage

.container-twobannerwithtext {display: none;}


Hide the Featured Product Title and Widget on the Homepage

.featured-products{display: none;}


Hide the Featured Product Title only on the Homepage

.featured-products .key-FeaturedProductTitle {display: none;}


Hide the Featured Product Widget only on the Homepage

div#Product_List_Widget3 {display: none !Important;}


Hide the Homepage Promotion Content Container on the Homepage

.container-bannerwithtext {display: none;}


Hide the Featured Department Title and Widget on the Homepage

.featured-departments{display: none;}


Hide the Featured Department Title only on the Homepage

.featured-departments .key-FeaturedDepartmentTitle {display: none;}


Hide the Featured Department Widget only on the Homepage

div#Category_List_Widget {display: none !Important;}

Hiding Widgets in the Header

Hide the Locale Selector in the Header

    .locale-widget {display: none !important;}


Hide the Track Order link in the Top Header

    .track-order {display: none !important;}


Hide the Entire line in the top header with Track Order and Locale Selector

    .header-locale-container .mt-2 {display: none !important;}


Hide the Find Branch Link

    .div#find_branch {display: none !important;}

Hiding Widgets in the Footer

Hide the Email Signup Section in the Footer

    .news-letter {display: none;}


Hide the Phone Number in the Footer

    .footer-store-number {display: none;}

Hiding Widgets on the Cart Page

Hide the Shopping Cart  Advertisement Content Container

    .shopping-cart .Adspace-wrapper.d-md-flex {display: none !important;}

Hiding Widgets on the Checkout Page

Hide the Additional Information Section on the Checkout Page

    .checkout-promotions-section {display: none;}


Hide the In Hands Date in the Shipping Method Section

    #divInHandDate display: none;}


Hide the Shipping Constraints in the Shipping Method Section

    .shipping-constraints {display: none;}


Hide the Voucher (Gift Card) entry in the Payment Method Section

    .voucher-gift-card {display: none;}


More Information:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.