Adding a button to the top right to replace the cart icon

Solved
fannynordmark
Tourist
4 0 0

Hi,

I have already been able to remove the cart icon in the top right corner, but I wanted to ask if it was possible to move this pink button I added in the top menu to the right where the cart icon would normally be. Here is a preview of the theme: https://nq71bi765ho5r37w-57314803883.shopifypreview.com/

Thank you!

Accepted Solutions (2)

Accepted Solutions
JHKCreate
Shopify Partner
2920 504 723

This is an accepted solution.

This can surely be fined-tuned but would thus require custom coding to add this button in the Cart's stead. Let me know if you'd like to have this done, however this will be a paid service. 

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

JHKCreate
Shopify Partner
2920 504 723

This is an accepted solution.

Final solution detailed below:

theme.css content:

#shopify-section-header > div:nth-child(2) > header > div > div.grid__item.medium-up--one-quarter.text-right.site-header__icons > div > li
{
      background: #C4618C;
     padding: 10 18px;
    padding: 10px 18px;
    font-size: 12px;
  text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 3px;
}

#shopify-section-header > div:nth-child(2) > header > div > div.grid__item.medium-up--one-quarter.text-right.site-header__icons > div > li > a > span
{
  color:white;
  
}


  @media only screen and (min-width: 750px) {
    
#SiteNav > li:nth-child(5)
{
  display:none;
}
  }

 

header.liquid code edited to include this in the Cart Section:

       <li>
        <a href="https://wallride.wondr.se/page/boka-nu" class="site-nav__link site-nav__link--main" aria-describedby="a11y-external-message">
          <span class="site-nav__label">Boka Nu</span>
        </a>
      </li>

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

Replies 4 (4)
JHKCreate
Shopify Partner
2920 504 723

Hi @fannynordmark 

You can try using the following code:

#SiteNav > li:nth-child(5) {
    float: right;
}


Please add it at the end of your theme's CSS file, let me know if that works!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

fannynordmark
Tourist
4 0 0

Thank you! That seems to be working, but perhaps since I didn't remove the cart/search properly it is a bit close to the nav text still. Do you have any thoughts on how to better remove the cart/search so it'll truly float to the far right?

JHKCreate
Shopify Partner
2920 504 723

This is an accepted solution.

This can surely be fined-tuned but would thus require custom coding to add this button in the Cart's stead. Let me know if you'd like to have this done, however this will be a paid service. 

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post

JHKCreate
Shopify Partner
2920 504 723

This is an accepted solution.

Final solution detailed below:

theme.css content:

#shopify-section-header > div:nth-child(2) > header > div > div.grid__item.medium-up--one-quarter.text-right.site-header__icons > div > li
{
      background: #C4618C;
     padding: 10 18px;
    padding: 10px 18px;
    font-size: 12px;
  text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 3px;
}

#shopify-section-header > div:nth-child(2) > header > div > div.grid__item.medium-up--one-quarter.text-right.site-header__icons > div > li > a > span
{
  color:white;
  
}


  @media only screen and (min-width: 750px) {
    
#SiteNav > li:nth-child(5)
{
  display:none;
}
  }

 

header.liquid code edited to include this in the Cart Section:

       <li>
        <a href="https://wallride.wondr.se/page/boka-nu" class="site-nav__link site-nav__link--main" aria-describedby="a11y-external-message">
          <span class="site-nav__label">Boka Nu</span>
        </a>
      </li>

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community | Should you need any direct help: contact@jhkcreate.com
| Learn more about us: jhkcreate.com


| Satisfied with our solutions? Drop a review on Google

View solution in original post