Top

Change the Styling or Display Settings of an App

Many of our apps have a "Display Settings" page to make changes to the way your app looks by default.

The display settings definitely do not contain a complete list of possible things to style, and what you can style from here will just be the essentials. If you want to customize something outside of these options, there is the ability to do so with CSS. CSS is the language that is used to style websites, more specifically it's used to style HTML. HTML is the code that your browser renders into a website. Customizing the way your app looks outside of these controls using CSS is an advanced modification, you can inadvertently cause major changes to the look of your store.

Many elements will have a "class" or "ID" assigned to them during website development which can be referenced with CSS to control the styling of the 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 specific characteristics of that element. When using a selector to reference an element to style with CSS, there is a specific coding format depending upon if you are using 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. Here's the format using this method using "bolded_text", but as an ID instead:

#bolded_text {
font-weight: bold;
}

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.

Performing an "inspect element" will 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 element's class name is product-single_title and that can be targeted with CSS):

Element Inspector  

There are a wide variety of element properties that you can customize with CSS, and each property will require a specific line 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.

Visit CSS Properties for a complete list of properties that can be used on a wide variety of element types.

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 the CSS section in the Product Options app:

CSS Section

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

Sample CSS File

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 inspect 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 theme's 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