Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 Heading Cart: Replace SVG with Text


jdillagodzilla

Question

14 answers to this question

Recommended Posts

  • 0

Yes, I added a button to the navigation and changed the style – couldn't figure out how to put it to the left of the cart quantity... here's the code for anyone who wants it!

 



/* Remove cart icon */ 
  header#header span.Cart-inner {

  }
  svg.icon.icon--cart {
    display: none;
    
  }

  /* Style cart quantity */ 
  header#header .icon-cart-quantity {
  
    color: #E3E2E0;
    background-color:#151515;
    text-align:center;
	padding:8px;
    font-size: .7em;
    font-family: 'circular-book';
    position:absolute;
   right:!important;
    left:0!important;
    top:0!important;
    bottom:0!important;

  }

/* Style button */
.sqs-block-button-element, .image-button a, .header-actions .btn, .header-skip-link {
    color: #151515;
  font-family: 'circular-book';
  text-transform: uppercase;
    font-size: .7em;
    letter-spacing: .1em;
    font-weight: 400;
  background-color:transparent!important;
}

 

Link to comment
  • 0
Quote

couldn't figure out how to put it to the left of the cart quantity

Try the following code. Make a copy of your code somewhere.

/* Begin style header cart link */

  /* reset to baseline to build our effect */
  
    .header .header-actions-action--cart .icon {
    
      height : unset;
      width : unset;
      
      }
      
    .icon-cart-quantity {
    
      all : unset;
      
      }
      
    .Cart-inner .icon--cart { /* remove cart icon */ 
    
      display : none;
      
      }
      
  .Cart-inner { /* common settings */
  
    font-family : circular-book;
    font-size : 0.7em;
    vertical-align : middle;
    
    }
    
  /* cart quantity */ 
  
    .icon-cart-quantity {
    
      background-color : #151515;
      padding : 8px;
      
      }
      
    body:not( .header--menu-open ) .header-actions .icon-cart-quantity {
    
      color : #E3E2E0;
      
      }
      
  .Cart-inner:before {   /* cart text */
  
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.1em;
    margin-right : 0.5em;
    
    }
    
  /* End style header cart link */

This is for v7.1 and specific to the OP's needs.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@artisanalies

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Hello everyone,

I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it.

Here is the code:

@media screen and (min-width:100px) {
span.sqs-cart-quantity:before {
    content: "Panier (";
    font-size: 1rem !important;
}
span.sqs-cart-quantity:after {
    content: ")";
}
header#header svg.icon.icon--cart {
    display: none;
}
.header .header-actions-action--cart .icon {
    width: auto !important;
}
.icon-cart-quantity {
    position: static !important;
  font-size: 0.9rem !important;
}}

Thanks for your help!

Capture d’écran 2021-12-22 à 11.49.09.png

Link to comment
  • 0
On 12/22/2021 at 5:50 PM, nicolusse88 said:

Hello everyone,

I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it.

Here is the code:

@media screen and (min-width:100px) {
span.sqs-cart-quantity:before {
    content: "Panier (";
    font-size: 1rem !important;
}
span.sqs-cart-quantity:after {
    content: ")";
}
header#header svg.icon.icon--cart {
    display: none;
}
.header .header-actions-action--cart .icon {
    width: auto !important;
}
.icon-cart-quantity {
    position: static !important;
  font-size: 0.9rem !important;
}}

Thanks for your help!

Capture d’écran 2021-12-22 à 11.49.09.png

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 12/26/2021 at 5:41 PM, nicolusse88 said:

@tuanphanabsolutely maisonmariet.fr

Hi. I see it is fine here. Did you solve or which screen size do you see problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 12/28/2021 at 7:49 PM, nicolusse88 said:

Hi Tuanphan. No I didn't. On mobile and tablet it doesn't look right when the orientation is vertical

Try adding to Design > Custom CSS

@media screen and (max-width:1024px) {
.header-actions.header-actions--right {
    flex: 0 0 100px !important;
    position: relative;
    left: -50px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...