Help For Channel Advisor Customize Store Design

Question

itkoustubh 0 Newbie Poster

17 Years Ago

Hello Everyone,
I want to customize store from Channel Advisor. I have create customize design for the store.
But i dont know in depth how to customize the design in the channel advisor.
If any body knows how to customize the design in Channel Advisor. Please Help me out from this.

Thanks In Advance.

Koustubh
Web Developer

user-interface web-design

3 Contributors
4 Replies
105 Views
1 Week Discussion Span
Latest Post 17 Years Ago Latest Post by designgoddess

Dani AI

Generated 9 Months Ago

Short, practical plan to get a custom front end into a ChannelAdvisor store and control width/centering without breaking product output.

Start by locating the exact DOM node ChannelAdvisor injects for store content (use the browser inspector). Wrap that node with a lightweight container you control and apply layout rules only to that container. Loading your stylesheet after the platform CSS (or using higher-specificity selectors) lets you override defaults without editing the platform templates themselves. Host images and other assets on your server or a CDN so paths stay predictable.

A minimal pattern to adapt (adjust values to fit your design):

<div id="customStoreWrap">
  <!-- CA-generated HTML remains here -->
</div>

<style>
#customStoreWrap { max-width: 1000px; margin: 0 auto; }
#customStoreWrap * { box-sizing: border-box; }
#customStoreWrap table { width: 100% !important; max-width: 100% !important; }
#customStoreWrap img { max-width: 100%; height: auto; display:block; }
</style>

Troubleshooting tips and cautions:

Use DevTools to find inline width attributes on tables or images. Inline values often need either removal (server-side/script) or an overriding rule with higher specificity and !important.
Keep ChannelAdvisor template tokens and structure intact; only change presentation. Replacing or removing platform placeholders can break product rendering.
If changes do not appear, clear browser and any platform caches and retest in a private window. If the admin UI no longer exposes header/CSS fields, check current ChannelAdvisor docs or open a support ticket for template access.
Avoid global resets that could affect other pages; target only the wrapper to reduce regression risk.

References to earlier posts: correctly highlighted that the store uses predefined classes; use that as a map when building overrides. and — follow the wrapper approach, then iterate with DevTools so the custom front end and CA content integrate cleanly.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anarki2k3 0 Newbie Poster · Answer 1 · 2008-10-01T16:37:05+00:00

Hi,

Looking at the way they have their own template you'll have to customise their custom css ids and classes.

<Style Type="text/css">
<!--
A:link    { color: #59076B }
A:active  { color: #59076B }
A:visited { color: #59076B }
A:hover { color: #000000 }

body {
	font-family: Arial;
    color: #000000;
    font-size: small;
}

td {
	font-family: Arial;
    color: #000000;
    font-size: small;
}

.headerbg { background-color: #D0B8CE }
.headerbg:link { color: #FFFFFF }
.headerbg:active { color: #FFFFFF }
.headerbg:visited { color: #FFFFFF }
.headerbg:hover { color: #E1E1E1 }

.topbar { background-color: #6E2A67 }

.mainnavon { color: #FFFFFF; background-color: #BA91A8 }
.mainnavontxt { color: #FFFFFF; text-decoration: none }
.mainnavontxt:link { color: #FFFFFF }
.mainnavontxt:active { color: #FFFFFF }
.mainnavontxt:visited { color: #FFFFFF }
.mainnavontxt:hover { color: #FFFFFF; text-decoration: underline }

.mainnavdiv { color: #FFFFFF }

.mainnavoff { }
.mainnavoff:hover { color: #FFFFFF; background-color: #6E2A67 }
.mainnavofftxt { color: #FFFFFF; text-decoration: none }
.mainnavofftxt:link { color: #FFFFFF }
.mainnavofftxt:active { color: #FFFFFF }
.mainnavofftxt:visited { color: #FFFFFF }
.mainnavofftxt:hover { color: #FFFFFF; text-decoration: underline }

.framebghorizontal { background-color: #000000 }

.framebgvertical {  background-color: #000000 }

.sidebar { background-color: #E1E1E1 }

.searchtxt { font-weight: bold; color: #000000 }
.searchtxt:link { font-weight: normal; color: #000000 }
.searchtxt:hover  { font-weight: normal; color: #000000 }
.searchtxt:visited  { font-weight: normal; color: #000000 }
.searchtxt:active  { font-weight: normal; color: #000000 }
.searchboxbg { background-color: #E1E1E1 }

.catdiv { background-color: #FFFFFF }
.catalogtitle { font-weight: bold; color: #FFFFFF }
.cattitlebg { background-color: #BB82C7 }
.catoff { color: #8D22A4; font-weight: bold; text-decoration: none; background-color: #E1E1E1; }
.catoff:link { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:active { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:visited { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:hover { color: #59076B; font-weight: bold; text-decoration: none }
.catsub { font-weight: normal; text-decoration: none }
.catsub:link { font-weight: normal; text-decoration: none }
.catsub:active { font-weight: normal; text-decoration: none }
.catsub:visited { font-weight: normal; text-decoration: none }
.catsub:hover { font-weight: normal; text-decoration: none }

.caton { background-color: #59076B; }
.caton:link { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:active { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:visited { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:hover { color: #BB82C7; font-weight: bold; text-decoration: none }

.categorybg { background-color: #E1E1E1 }

.history { font-weight: bold; color: #BB82C7 }
.history:link { color: #FFFFFF }
.history:active { color: #FFFFFF }
.history:visited { color: #FFFFFF }
.history:hover { color: #BB82C7 }
.historybg { background-color: #59076B }

.bottombar { background-color: #59076B; font-size: xx-small; COLOR: #BB82C7 }
.bottombar:link { font-weight: bold; color: #FFFFFF }
.bottombar:active { font-weight: bold; color: #FFFFFF }
.bottombar:visited { font-weight: bold; color: #FFFFFF }
.bottombar:hover { font-weight: bold; color: #FFFFFF }

-->
</Style>

Don't know if you've been able to have a look at this or not but you should be able to insert this style information into the header using the advanced html mode. Don't think there's really any other way of doing it...

I'm looking for a bit of help on customising this as well.

Anyway hope I've been able to help a little.

itkoustubh 0 Newbie Poster · Answer 2 · 2008-10-01T16:55:34+00:00

Thank You Very Much anarki2k3 For your help

I used this before but i have only be changed the colors and and all other things,
but my problem is that i have my own customize template that i have designed, that i want to integrate in the Channel Advisor. Also i want to change the width of the table that CA already have and want my layout in the middle, Any help in this would be graet for me.

And again Thanks [:)]

Hi,

Looking at the way they have their own template you'll have to customise their custom css ids and classes.

<Style Type="text/css">
<!--
A:link    { color: #59076B }
A:active  { color: #59076B }
A:visited { color: #59076B }
A:hover { color: #000000 }

body {
	font-family: Arial;
    color: #000000;
    font-size: small;
}

td {
	font-family: Arial;
    color: #000000;
    font-size: small;
}

.headerbg { background-color: #D0B8CE }
.headerbg:link { color: #FFFFFF }
.headerbg:active { color: #FFFFFF }
.headerbg:visited { color: #FFFFFF }
.headerbg:hover { color: #E1E1E1 }

.topbar { background-color: #6E2A67 }

.mainnavon { color: #FFFFFF; background-color: #BA91A8 }
.mainnavontxt { color: #FFFFFF; text-decoration: none }
.mainnavontxt:link { color: #FFFFFF }
.mainnavontxt:active { color: #FFFFFF }
.mainnavontxt:visited { color: #FFFFFF }
.mainnavontxt:hover { color: #FFFFFF; text-decoration: underline }

.mainnavdiv { color: #FFFFFF }

.mainnavoff { }
.mainnavoff:hover { color: #FFFFFF; background-color: #6E2A67 }
.mainnavofftxt { color: #FFFFFF; text-decoration: none }
.mainnavofftxt:link { color: #FFFFFF }
.mainnavofftxt:active { color: #FFFFFF }
.mainnavofftxt:visited { color: #FFFFFF }
.mainnavofftxt:hover { color: #FFFFFF; text-decoration: underline }

.framebghorizontal { background-color: #000000 }

.framebgvertical {  background-color: #000000 }

.sidebar { background-color: #E1E1E1 }

.searchtxt { font-weight: bold; color: #000000 }
.searchtxt:link { font-weight: normal; color: #000000 }
.searchtxt:hover  { font-weight: normal; color: #000000 }
.searchtxt:visited  { font-weight: normal; color: #000000 }
.searchtxt:active  { font-weight: normal; color: #000000 }
.searchboxbg { background-color: #E1E1E1 }

.catdiv { background-color: #FFFFFF }
.catalogtitle { font-weight: bold; color: #FFFFFF }
.cattitlebg { background-color: #BB82C7 }
.catoff { color: #8D22A4; font-weight: bold; text-decoration: none; background-color: #E1E1E1; }
.catoff:link { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:active { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:visited { color: #8D22A4; font-weight: bold; text-decoration: none }
.catoff:hover { color: #59076B; font-weight: bold; text-decoration: none }
.catsub { font-weight: normal; text-decoration: none }
.catsub:link { font-weight: normal; text-decoration: none }
.catsub:active { font-weight: normal; text-decoration: none }
.catsub:visited { font-weight: normal; text-decoration: none }
.catsub:hover { font-weight: normal; text-decoration: none }

.caton { background-color: #59076B; }
.caton:link { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:active { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:visited { color: #BB82C7; font-weight: bold; text-decoration: none }
.caton:hover { color: #BB82C7; font-weight: bold; text-decoration: none }

.categorybg { background-color: #E1E1E1 }

.history { font-weight: bold; color: #BB82C7 }
.history:link { color: #FFFFFF }
.history:active { color: #FFFFFF }
.history:visited { color: #FFFFFF }
.history:hover { color: #BB82C7 }
.historybg { background-color: #59076B }

.bottombar { background-color: #59076B; font-size: xx-small; COLOR: #BB82C7 }
.bottombar:link { font-weight: bold; color: #FFFFFF }
.bottombar:active { font-weight: bold; color: #FFFFFF }
.bottombar:visited { font-weight: bold; color: #FFFFFF }
.bottombar:hover { font-weight: bold; color: #FFFFFF }

-->
</Style>

Don't know if you've been able to have a look at this or not but you should be able to insert this style information into the header using the advanced html mode. Don't think there's really any other way of doing it...

I'm looking for a bit of help on customising this as well.

Anyway hope I've been able to help a little.

anarki2k3 0 Newbie Poster · Answer 3 · 2008-10-01T20:00:52+00:00

The method I've used is a little messy but here it is:

<style type="text/css">
/*centre in ie*/
body { text-align: center; }
/*this is to size and centre the overall layout*/
table { width: 900px; margin: 0 auto; }
/*this stops all other tables being 900px*/
table table { width: auto; }
</style>

Hope that helps a little bit, that's all i've done that's been really custom. I'm mainly just using custom headers and manipulating their css.

Let me know how it goes.

Phil

designgoddess 0 Newbie Poster · Answer 4 · 2008-10-04T00:33:15+00:00

I too have the same concern. I have a client that uses Channel Advisor. She has not activated the store. We have a custom front-end that was developed and want to integrate this into the store so it is a seamless transition. Where do I get the CSS code that I can work with? What about the original file that it pulls to?

Nicole
Web Developer

Hello Everyone,
I want to customize store from Channel Advisor. I have create customize design for the store.
But i dont know in depth how to customize the design in the channel advisor.
If any body knows how to customize the design in Channel Advisor. Please Help me out from this.
Thanks In Advance.
Koustubh
Web Developer