Top

Change the Styling of Specific Elements of My App

Display Settings

Many of our apps have a "Display Settings" menu to make changes to the way your app looks by default. Here's an example of the display settings page for Products Options:

 

The display settings definitely does not contain a complete list of possible things to style, and what you can style from here will just be the essentials. If you will want to customize something outside of these options, there is the ability to add CSS. CSS is the language that is used to style websites, more specifically its used to style HTML. HTML is the code that your browser turns in to a website.  Customizing the way your app looks outside of these controls using CSS is an advanced modification. You can potentially cause major accidental changes to the look of your store!

 

How do I use CSS?

Many elements will have a "class" or "ID" assigned to them during website development which then can be referenced with CSS to control the styling of said element.

 

Here's an example of a p tag (paragraph tag) with a class applied to it:

<p class="bolded_text" name="updates[{{ item.id }}]">This text will display on your browser as bolded<p>

With the above example you can use CSS to reference the "bolded_text" class to style specfic characteristics of that element. When using a selector to reference an element to style with CSS, there is a specific coding format that you need to use depending upon if you are selecting by a class or an ID.

 

If a class is used then put "." in front of the name to tell the selector that the name is a class name. Here's the format for modifying an element according to its assigned class using the class name from the example above (the CSS selector is "bolded_text", which is selecting the class of the same name):

.bolded_text {
font-weight: bold;
}

If an ID is used then put "#" in front of the name to tell the selector that the name is an ID name. Here's the format using this method using "bolded_text", but as an ID instead:

#bolded_text {
font-weight: bold;
}

 

How can I find out which selector to use for CSS?

As mentioned above your CSS will need a selector to select the class/ID/tag type/etc. of a particular element to apply the styling to.  You can get this information through your browser while on a particular web page.  The process is a little different depending upon the browser you are using.


Chrome

right-click on an element, like a paragraph or image. On the pop-up menu, select Inspect Element

Firefox

right-click on an element, like a paragraph or image. On the pop-up menu, select Inspect Element

Internet Explorer

Internet Explorer is a little different. For versions before Internet Explorer 8, you can download the Developer Toolbar.

For IE8 and above, the developer tools are included.
Press F12 to activate them.

This toolbar is similar to the Inspect Element feature in the other browsers, but I don't find it as easy and flexible.

 

Performing an "inspect element" should bring up a console at the bottom of the screen pointing out that element in the HTML.  Each element on your website will have been created by HTML and that HTML will be visible in the console. When you brought up the console it should have highlighted the particular HTML that's creating it.  When you find the element in the console you will be able to see if it has a "class" or "id" name that you can reference and modify with CSS.

 

Here's an example where an element had the element inspector opened on it (this elements class name is title and that can be targeted with CSS):

  

What CSS do I use?

There are a wide variety of element properties that you can customize with CSS, and each each property will require a specific line of code of CSS to change it.

 

Here are some examples of properties:

font-size: will control the size of the font.

color: will control the color of the text.

margin: will add an amount of margin spacing around an element.

 

Here is a pretty extensive list of CSS properties that can be used on a wide variety of element types:

http://www.htmldog.com/reference/cssproperties/

 

Where do I use CSS?

Many of our apps will have a CSS section within the app administration where you can add your own CSS, and this will be located at the bottom of the "display settings" page.  Here's an example of a CSS section in the Options app:

 

However, since it may take a few minutes for these changes to show up on your storefront, you may consider inputting the CSS directly into your themes CSS files. The advantage of doing this is that when you save this file the style changes will take place IMMEDIATELY.  Here's an example of a stores CSS file:

Common ID's/Classes for Bold Apps

Product Options:

All option sets (both titles and input fields): class="shappify_option"

All option names: class="shappify_option_name"

All option values: class="shappify_option_value"

All check box options: class="shappify_check_option"

All radio buttons: class="shappify_radio_option

Specific option input field: class="shappify_option_##### (replace ##### with specific option number)

 

Customer Pricing:

Your special customer pricing will use the same class/ID as your themes prices. You can find that using the inpect element function

Product Bundles

Widget container: id="shappify_bundle"

Widget title: class="bundle-title"

Widget product image container: class="product-image

Widget product image: class="product-image img

Widget product dropdown: class="product-options"

Widget regular price: class="bdl-product-price regular"

Widget sale price: class="bdl-product-price sale"

Widget "Add bundle to cart" button: class="bundle-total"

Widget "Add bundle to cart" button text: class="top-button

 

Product Upsell

*Note* All CSS must be set in the Upsell app admin with the exception of the "continue" and "no thanks" buttons, which must be set in the themes CSS files.

Top Title: class="upsell-description"

Top Description (right under the title): class="upsell-description-small"

Product container: class="product-wrapper"

Product title: class="product-name"

Product SKU: class="product-partnum"

Product Price: class="product-price"

Variant Dropdown: class="product-group-variants"

Product Image: class="product-image"

Add to cart buttons: class="addtocart"

"No thanks" button: id="giveclosebtn"

"Continue" button: id="giveacceptbtn"

Have more questions? Submit a request