Share Search Button

When a client conducts a search on your website, a 'Share' option will be available to copy a link to that search.  This is a great resource for your clients to send the search to a loved one.

You could also use this link on your website (if you didn't want to build a hotsheet)- however, we don't recommend this, as it's not indexable by Google like a hotsheet would be. Find out more about how to build pages that rank here- click link).

Customization Options

• This button has a transparent background by default, but you can apply a background to this button.
  
  Here is an example making the background color of the box to a light gray:

  

  *To change the background color of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  background-color: #hexcode !important;
  }
  

• The button by default has a 1px solid border set, however, you can change the border thickness if you like.  '1px' sets the thickness of the border and 'solid' defines the style of the border. 
  
  Here is an example of a 5px solid border:
  

  

  *To change the border thickness of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  border: 5px solid !important;
  }
  

• You can also change the color of the border.  
  
  Here is an example of a green border color:

  

  *To change the border color of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  border-color: #hexcode !important;
  }
  

• Border-radius changes the squareness of the button. The higher the number, the more round the button will be. 
  
  Here is an example of the border radius set to 20px:  

  

  *To change the border-radius of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  border-radius: 20px !important;
  }

• The button by default does not have a box shadow.  The first number sets the shadow directly under the button. The first '1px' sets the size of the shadow. The second '1px' sets the fade of the shadow and the hexcode sets the color.
  
  Here is an example of the box-shadow set to 0 7px 7px #1acb98:

  

  *To change the box-shadow of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  box-shadow: 0 7px 7px #1acb98 !important;
  }
  

• Padding changes how much space is inside the button, between the text and the border. The first number changes the top and bottom padding.  The second number changes the left and right padding.   
  
  Here is an example of the padding set to 10px 15px:

  

  *To change the padding of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  padding: 10px 15px !important;
  }
  

• The default text or font color is set to blue. The "color" line indicator of the code designates font color. 
  
  Here is an example of the text color to green:

  

  *To change the font color of the share search button: 
  .sidx-container .sidx-share-search-pill.sidx-share-search-pill {
  color: #hexcode !important;
  }

Applying Multiple Changes

If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:

.sidx-container .sidx-share-search-pill.sidx-share-search-pill {
padding: 10px 15px !important;
border-radius: 20px !important;
box-shadow: 0 7px 7px #1acb98 !important;
background: #1acb98 !important;
color: #1acb98 !important;
border: 5px solid !important;
border-color: #1acb98 !important;
}