Custom CSS

The Custom CSS card lets you style the Share Button and Share Pop-Up with your own CSS. Use it for changes the other Design settings don't cover, such as padding or borders.

This page shows you how to find the CSS selectors with Show Examples, lists the selectors you can use, and gives working examples.

How to Add Custom CSS#

Step 1: In your Shopify admin, under Apps, click Bevy Share Cart - Social Link. The app opens on its Dashboard.

Step 2: In the settings list, click Design.

Step 3: Click the Custom CSS card to expand it. You see a code editor. The grey text inside it is only an example and is not applied.

Custom CSS card with the code editor and the Show Examples button

Step 4: Type or paste your CSS into the editor. Use the selectors listed below. The Design Preview shows the result as you type.

Step 5: Click Save in the save bar at the top of the page. Your changes are not live on your store until you save. To undo unsaved changes, click Discard.

How Does Show Examples Work?#

Show Examples labels the elements in the Design Preview with their CSS selectors, so you can see which selector targets which element.

Step 1: Click Show Examples below the editor. The button changes to Hide Examples.

Step 2: In the Design Preview, select Share Button from the view dropdown to see the Share Button selectors, such as .share_cart_wrap, .share_cart_heading1 and .share_cart_btn.

Step 3: Select Share Pop-Up from the view dropdown to see the Share Pop-Up selectors.

Show Examples on, with selector labels around the Share Pop-Up preview

Step 4: Click Hide Examples to remove the labels. The labels are also removed when you leave the Design section with the back arrow.

Selector Reference#

Selector	Element	Preview view	Shown when
`.share_cart_wrap`	The area that holds the title and the Share Button	Share Button	Always
`.share_cart_heading1`	The title next to the Share Button	Share Button	Always
`.share_cart_btn`	The Share Button	Share Button	Always
`.custom_cart_msg`	The shared message box on the cart	Share Button	Share Message is on
`.shared_title`	The Share Pop-Up title	Share Pop-Up	Always
`.share_cart_url`	The cart link in the input bar	Share Pop-Up	Always
`.copybtn-text`	The text on the copy button	Share Pop-Up	Always
`.email_icon_wrap`	The social sharing button	Share Pop-Up	Social Sharing is on (not shown with the White & Blue theme)
`.share_cart_message_close_btn`	The button that closes the message input	Share Pop-Up	Share Message is on and the message input is open
`.input-with-emoji-picker`	The message input	Share Pop-Up	Share Message is on and the message input is open

To open the message input in the preview, click the clickable part of the footnote, such as "Click here". See Share Message.

CSS Examples#

Share Button:

.share_cart_btn {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #6bb3b3;
  border-color: #ffd699;
  border-radius: 20px;
  border-width: 5px;
}

Title next to the Share Button:

.share_cart_heading1 {
  color: #6bb3b3;
  font-size: 24px;
  font-weight: 700;
  padding: 10px;
}

Share Pop-Up title:

.shared_title {
  color: #6bb3b3;
  font-size: 22px;
  font-weight: 700;
}

Cart link:

.share_cart_url {
  color: #6bb3b3;
  font-size: 13px;
  font-weight: 400;
  background-color: transparent;
}

Copy button text:

.copybtn-text {
  color: #6bb3b3;
  font-size: 14px;
  font-weight: 400;
}

Social sharing button:

.email_icon_wrap {
  background: #6bb3b3;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 100px;
}

Note: Check your CSS carefully before you save. Share Cart saves the CSS as you typed it, and a small mistake, such as a missing }, can stop the rules after it from working on your store. Preview your store after saving to make sure the changes look right.

If you have any questions or need assistance, reach out to support via live chat or email support@bevycommerce.com. We're always happy to help!