Canvas Support

Cart icon in PHOTOGRAPHER prebuilt demo

3 replies · opened Dec 23, 2023

Ssmartware_itDec 23, 2023

HI,
I'm building a website based on the PHOTOGRAPHER pre-built website. It's going to be a memorial e-commerce site to sell photos of a photographer who died and give the money to the Italian cancer research charity, so I should place a shopping cart icon somewhere in the header to show the number of photos added to cart (something as showed in the attached picture). I tried to add the cart icon in the header but in the mobile version isn't completely visible and it's not correctly positioned in the page. It's possible? Can you help me please?

Thanks in advance and best wishes for a peaceful Christmas,
Manu

SSemicolon WebSTAFFDec 23, 2023

Hello,

Firstly, We would like to Thank You so much for using Canvas for this great cause! We will be thrilled to help you out with this!

Consider using the following code for your Header:
[ch_pre]<div class="header-row">

attachment 

&lt;div class="header-misc ms-auto me-4"&gt;
	&lt;!-- Top Cart
	============================================= --&gt;
	&lt;div id="top-cart" class="header-misc-icon" style="margin-top: -15px;"&gt;
		[5](#)
		&lt;div class="top-cart-content"&gt;
			&lt;div class="top-cart-title"&gt;
				&lt;h4 class="mb-0"&gt;Shopping Cart&lt;/h4&gt;
			&lt;/div&gt;
			&lt;div class="top-cart-items"&gt;
				&lt;div class="top-cart-item"&gt;
					&lt;div class="top-cart-item-image"&gt;
						[

attachment
](#)
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
Blue Round-Neck Tshirt with a Button
<span class="top-cart-item-price d-block">$19.99</span>
</div>
<div class="top-cart-item-quantity">x 2</div>
</div>
</div>
<div class="top-cart-item">
<div class="top-cart-item-image">

attachment
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
Light Blue Denim Dress
<span class="top-cart-item-price d-block">$24.99</span>
</div>
<div class="top-cart-item-quantity">x 3</div>
</div>
</div>
</div>
<div class="top-cart-action">
<span class="top-checkout-price">$114.95</span>
View Cart
</div>
</div>
</div><!-- #top-cart end -->
</div>

&lt;div&gt;
	&lt;div class="primary-menu-trigger hamburger"&gt;
		&lt;i class="bi-list"&gt;&lt;/i&gt;
		&lt;i class="bi-x-lg"&gt;&lt;/i&gt;
	&lt;/div&gt;
	&lt;div class="global-menu"&gt;
		&lt;div class="global-menu__wrap"&gt;
			[Home](#)
			[Photography](#)
			[About](#)
			[Contact](#)
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;svg class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none"&gt;
		&lt;path class="shape-overlays__path" d=""&gt;&lt;/path&gt;
		&lt;path class="shape-overlays__path" d=""&gt;&lt;/path&gt;
		&lt;path class="shape-overlays__path" d=""&gt;&lt;/path&gt;
		&lt;path class="shape-overlays__path" d=""&gt;&lt;/path&gt;
	&lt;/svg&gt;
&lt;/div&gt;

</div>[/ch_pre]

The Code you need to add to your existing Header Code starts from .header-misc DIV. Please check this out and let us know if you need to change anything and we will be more than happy to assist you.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Merry Christmas! :)

Ssmartware_itDec 28, 2023

Hello,
thank you! This is a really smart solution and it is useful for me. ut there is a problem because the minicart doesn't open when I click on it. It must be a CSS problem somewhere. Can you please check it and help me?

Thank you in advance and happy new year!

Manu

Ssmartware_itJan 3, 2024

Hello,
can you please help me with the problem I reported in the previous post from December 29th?
Thank you and best regards,
Manu

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard