Discussion on Vanity Shop


Diabolique supports this item


This author's response time can be up to 2 business days.

285 comments found.

Hi Diabolique, how can I add things to the right column on the “Information” pages?


Hi Diabolique,

You haven’t read my question correctly. I need to add things to the right column ON THE information pages (for example on the About us page I want to add bestsellers)

Hope to hear from you soon!

It’s impossible because this pages have a full width. It requires changes in the stylesheet.css, you can cut
#information-information #content,
from following line:
#checkout-checkout #content, #checkout-cart #content, #information-information #content, #checkout-success #content { width:855px; }

..and paste it into following 2 lines:

#account-account #container, #account-address_form #container, #account-address_list #container, #account-address #container, #account-address-insert #container, #account-download #container, #account-edit #container, #account-forgotten #container, #account-login #container, #account-newsletter #container, #account-order #container, #account-order-info #container, #account-password #container, #account-register #container, #account-return #container, #account-return #container, #account-return-insert #container, #account-return #container, #account-reward #container, #account-transaction #container, #account-wishlist #container, #product-product #container, #affiliate-login #container, #affiliate-register #container, #affiliate-account #container, #affiliate-edit #container, #affiliate-password #container, #affiliate-payment #container, #affiliate-tracking #container, #affiliate-transaction #container, #product-product #container { background-image:url("../image/bg-container.png"); }
#account-account #content, #account-address_form #content, #account-address_list #content, #account-address #content, #account-address-insert #content, #account-download #content, #account-edit #content, #account-forgotten #content, #account-login #content, #account-newsletter #content, #account-order #content, #account-order-info #content, #account-password #content, #account-register #content, #account-return #content, #account-return #content, #account-return-insert #content, #account-return #content, #account-reward #content, #account-transaction #content, #account-wishlist #content, #product-product #content, #affiliate-login #content, #affiliate-register #content, #affiliate-account #content, #affiliate-edit #content, #affiliate-password #content, #affiliate-payment #content, #affiliate-tracking #content, #affiliate-transaction #content { width:610px; padding:0 0 7px 0px; }


This one is probably staring me in the face but can you please explain how I get the dimensions I enter onto the dashboard to show for each product?



Go to System -> Settings -> Image and put the same sizes like on the following screenshot:


Sorry maybe I wasn’t clear enough with my question. I want the dimensions:

Dimensions (L x W x H):

that I enter into the products/data page to appear where the product is. Changing the sizes has just made the product image size smaller.

Is there a way of doing this or do I have to do it manually when I do the description of each product. There is a check box to display the weight on the cart page but really I need weight and dimensions to be where the product is.

Also how do I get rid of the word “only” and the star background where the price is and beneath the reward points, I don’t want to use this right away.

Thanks again!


You should use Attributes, something like on the live demo: http://www.diaboliquedesign.com/demo/vanityoc/vestibulum-gravida-mi

“Only” word and reward points are inside catalog/view/theme/vanityshop/template/product/product.tpl

<div class="price-only">Only!</div>
<li><span>&lt;?php echo $text_reward; ?&gt;</span> &lt;?php echo $reward; ?&gt;</li>
&lt;?php if ($points) { ?&gt;
<span class="reward"><small>&lt;?php echo $text_points; ?&gt; &lt;?php echo $points; ?&gt;</small></span> <br />
&lt;?php } ?&gt;
Price background you can remove from:
.product-info .price {  background-image:url("../image/bg-price.png"); background-repeat:no-repeat; }
(but do not remove whole code line)

Hi why is the main banner image out of proportion? Even when i use the correct image size. it stretches past the template on the right?


Could you post a screenshot of your frontpage or create another administrator and send me password and login?

I realized its the slideshow dimension problem. Whats the W x H for it?

thank you!

Please open theme’s documentation and read chapter called: IX. How to add new banners and display it on NivoSlider?


Nice theme, and easy to work with!

But, how do I sell giftcards in this shop?


Upload new file under Catalog -> Downloads and creating new product go to “Links” tab and select uploaded file.

I dont follow…

I don’t understand too. I gave you the solution.

Ok, well i dont understand what file to upload and how, but I´ll ask someone else.

Another thing: How ca I remove chosen pic for category? I uploaded one just to try and now it seemes to be stuck, there is no remove or delete button. The only thing I can do is to change it to another.

“Clear image” doesn’t work? http://imm.io/cz61

Anyway this is not a theme issue.

Hi Diabolique,

sorry for asking so many questions but im quite new to opencart and your my only hope for help.


thats a screen capture of all the problems i need to solve.

1. theres an annoying flashing row of dots i cant seem to remove. it looks like its trying to load something but i dont know what. how can i remove it?

2. the welcome to our shop text. where do i change that? and can i change the arrow pointing to featured items?

3. this is where the just added items go. when i remove that it leaves a strip of grey, can i remove that?

4. how do i change all the information in the footer? i cant seem to find it. been looking for it all day.

1. open catalog/view/theme/vanityshop/css/stylesheet.css and remove
background-image:url("../image/preloader.gif"); background-position:50% 45px; background-repeat:no-repeat;

2. This is an image and it’s inside: catalog/view/theme/vanityshop/template/common/home.tpl

3. Open stylesheet.css, find #container-footer selector and put inside display:none;

4. It’s inside catalog/view/theme/vanityshop/template/common/footer.tpl

No there is no such choise.

So you don’t have the latest version of Opencart. Click on this image and under Image Manager remove it.


After installing the template on opencart it seems the home/frontpage layout doesn’t match up for me.

I’ve followed the readme/config guide up untill adding products, then I stopped because I tought the lack of self-added products wouldn’t be causing “overlapped” layout.

Please take a look and tell me if I might be missing something? http://www.tweakings.nl

Also, props for providing this nice template :)


You have selected wrong position for Featured module. It must be “Content Bottom”.

Please read chapter called: IV. Featured items on frontpage

Thanks for the quick support(!), I’m still kinda new to this :)


Great theme we love it. We are however having an issue. We are using multistore functionality and have our main store using the default theme provided by opencart. We created a second store and that store is using your theme. We have noticed that the SlideShow in the main store using the default theme has stopped working ever since we installed your theme. How can we correct this.



I have a test shop with installed Vanity Shop theme and when I activate Default theme then the slideshow module works fine. What exactly doesn’t work?


The slideshow displays on the site but it does not slide over to the next slide. It remains static. I have 4 images inside the banner that should show up but it doesn’t. You can go take a look at it here.


I have a second store using your theme which I created using multishop. That store can be found at http://thetoolbox.bevan.co.za that slide works just perfectly.


Paste following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

into …common/header.tpl (default theme) just before [/head]


Thanks for the quick reply we really appreciate it. We have pasted the code into the following tpl file


However when we paste it in the slideshow does not show up at all. here is a bit of the code from the tpl file.

DD_belatedPNG.fix(’#logo img’); <![endif]—> <?php echo $google_analytics; ?>

Am i looking in the correct place. Thanks for your help as you can see I am still new to this kind of stuff.

Paste this code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

into catalog/view/theme/default/template/common/header.tpl

just before

<!--[if IE]>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.js"></script>

Now it should work.


Thank you so much, its working now. I really appreciate the time and effort you took to get back to me and solve this problem. Not only are your templates excellent but so is your service. I would recommend your template’s to anyone.

Take care

Hi I recently purchased this great template.

There is an issue with images being displayed after upload on the latest section as well as in the modules and on the product page.

The loading graphic simply spins and the image is blank. When you click on the blank thumbnail on the product page the lightbox displays the image fine.

NB This is random. Some images are fine others not.

I changed the template back to the default template in the back end settings as a test and all the images display correctly.

Please can you let me know what settings to tweak to rectify this.



When you view website code source you will see such code line with path to thumbnail:

<div class="image"><a href="..." class="lightbox" style="display:block; background-image:url('http://www.diaboliquedesign.com/demo/vanityoc/image/cache/data/thumb3_adriana_lima_with_sunglasses-s-300x300.jpg'); background-position:center center;"></a></div>

Thumbnail is loaded by background-image, it’s full compatible with W3C standards so I don’t know what I can do more. Anyway you are the 1st client who noticed this problem.

Hi Diabolique,

Thanks for the reply. The issue is in the file names. If any special characters e.g. ’ are in the file name the images are not displaying.

I am getting editorial staff to check their file names and change them, but there needs to be a check on these.


Hi I have an issue with the latest module. I set it up just as instructed in the documentation, but the images don’t line up next to eachother in one line, they are stacked up to the left two by two covering the footer content. What have I done wrong? Also I can’t figure out where to change the word ‘Latest’? Please help.

Many thanks!


1. Probably you display too many products.

2. It’s inside language files:

Thanks for your reply. 1. No it’s not that I am displaying too many products. It doesn’t make a difference if I display less products, they still line up in a row two by two. They show up underneath the word ‘Latest’ and not next to it. Any other ideas why this happens? 2. Found it. Thanks!

Maybe you have something corrupted in code. I have another test shop and everything works fine: http://imm.io/d8tk

It must work fine on your website too if you have the same code.


Two things, firstly the welcome text on the home page I replaced with a j-peg of my own text in:


as you said but it asks for the server user & password when I open the website so I’ve deleted the link for now. Any thoughts?

Secondly, is there a page that has a “Congratulations on your successful purchase” sort of message and maybe a list of what they’ve just bought that I can send people back to once they’ve paid on the merchant account or do I have to create one (if so how)?

Thanks again!



1. You have replaced welcome image’s source:


for your own and your FTP server starts to ask for user & password, but when you change it back then server doesn’t ask for user & password?

2. This page already exists: http://imm.io/dhZI

3. Sales details are under Sales -> Orders


1. Yes I replaced:


and yes if I leave it blank the FTP server doesn’t ask for user/password but if I put a jpeg in with my own text then it does. Does it need to be a .png rather than jpeg?.

2. That looks perfect in the picture but where can I find the link to this page on my site?

3. These details will automatically be put on the completed purchase page?




1. I don’t understand how it’s possible. You can put anything here. Also you can send me your login & possword for your FTP and I’ll check it.

2. This page is visible just when client will but something. Also content visible on success page is inside:

3. Yes


1. Email sent with ftp details.

2. The 3rd party merchant account asks for a link to the success page, what should I use?



1. I have changed welcome image without any problem.

2. Something like that? http://www......../index.php?route=checkout/success

haha knew you’d do that, Doh!

Thanks again!!