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.
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.