Support Articles » Plugin Customization

Customizing the Look and Feel of the Plugin

This article is going to provide information on customizing both the Plugin Components and how the plugin works within the Theme.

STOP AND TAKE NOTE - We highly recommend having knowledge of CSS and HTML before attempting the concepts discussed in this article.

If you do not have these skills we recommend contacting a website designer that specializes in WordPress Development. If you do not have a preferred WordPress Developer contact us for a referral.

Component Customization

To customize the Plugin Components login to the Content Shelf Dashboard

Click Sell (1) then Store Settings (2) then Store Appearance (3) then choose the CSS Stylesheet (4) that best fits your needs.

We have 3 pre-developed colors that include Grey, Blue and Beige. We also offer complete customization by choosing Custom.

When choosing Custom (as seen in the below screenshot) you'll have the ability to completely customize the look and feel by changing the code within the code editor box.

Customizable CSS Styles include:

Typical Styles
Search Styles
Cart Styles
Category Styles
Catalog Styles
Product Detail Styles
Checkout, Renewal, Confirmation, & Form Styles
Wrapper Styles
Wrapper -> Desktop Styles
Wrapper -> Tablet Styles
Wrapper -> Phone Styles

Note - After making adjustments to these styles make sure to Save Changes (5). Then review your changes by reloading/refreshing the Store Page in your browser.

Theme Customization - Plugin Editor

To access the Plugin Editor click Plugins (6) then Editor (7).

Make sure the editor is set to Content Shelf Shopping Cart (8)

From this screen access for all plugin files can be found. Choose which file you want to edit from the right side and that file code will appear in the code editor box. Make sure to "Update File" to save your changes when you are done.

Theme Customization - Theme Editor

To access the Theme Editor click Apperance (9) then Editor (10).

From this screen access for all theme files can be found. Choose which file you want to edit from the right side and that file code will appear in the code editor box. Make sure to "Update File" to save your changes when you are done.