Home Support Bigshop How to set up my homepage like the demo

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #3083

    charliexertion
    Participant

    I like the demo homepage is why i brought the theme. I just want to know step by step how do i create my homepage like that. What dimension do the images need to be to to fix on my phone?
    I have the bigboom and i use 925×450 and it don’t fix on my phone.
    How do i remove the home page title? I clicked on the hide page title but it still appear on the page.
    If i wanted to use the 4 image display like the homepage demo 2, how would i do that?

    #3094

    ThemeAlien
    Keymaster

    Hi,

    1. The fastest way to have to homepage like our demo is editing our homepage. I will send you the content of Homepage 2 in bellow reply.

    2. Could you give us a screenshot of your website on mobile? This theme is fully responsive. But maybe there are something need to be configured again, because you used the Bigboom theme before.

    3. You have to select the page template Home Page for your front page to remove the page title.

    4. This element is Product Categories Banner. You just need to upload 4 images and select 4 categories for them. In next reply, I will show you the detail in bellow reply, because of it pretty long.

    #3095

    ThemeAlien
    Keymaster

    In order to have the homepage link our Homepage 2, please follow these steps:

    1. Create new page and set the page template as Home Page

    2. Copy the following content to page content. You should paste it in the “Text” content tab:

    [vc_row][vc_column width="1/3"][banner image="3697" subtitle="23 July 2015" button_text="Join now!" button_link="#" background="#0d4d9c" color="#ffffff" overlay="rgba(0,0,0,0.38)"]
    
    <span style="color: #fe2f2f;">Special</span> Event!
    
    [/banner][/vc_column][vc_column width="1/3"][banner image="3698" desc="Men’s Training " stars="8" button_text="Shopnow!" button_link="#" color="#f79215"]
    
    Fingertrap Max
    
    [/banner][/vc_column][vc_column width="1/3"][banner image="3699" desc="Men’s Running Collection 2015" button_text="View more!" button_link="#" background="#cf2f1d" color="#ffffff"]
    
    Men’s Style
    
    [/banner][/vc_column][/vc_row][vc_row][vc_column][products_tabs_carousel title="Recent Products" categories="running,trainning,football,soccer"][/vc_column][/vc_row][vc_row][vc_column][category_products_carousel title="Skateboarding" cat_image="3713" view_more_text="View More" view_more_link="#" category="skateboarding"][/vc_column][/vc_row][vc_row][vc_column][category_products_carousel title="Tranning Shoes" cat_image="3714" view_more_text="View More" view_more_link="#" category="trainning"][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image="3700" img_size="full" link="#"][/vc_column][/vc_row][vc_row][vc_column][category_products_carousel title="Basketball Shoes" cat_image="3667" view_more_text="View More" view_more_link="#" category="basketball"][/vc_column][/vc_row]

    3. In the Page Header Content meta box bellow, paste this code:

    [vc_row full_width="stretch_row_content_no_spaces"][vc_column][cat_banner image1="3702" image2="3703" image3="3704" image4="3705" cat1="soccer" cat2="running" cat3="trainning" cat4="basketball"][/vc_column][/vc_row]

    4. In the Page Footer Content meta box, select what type of product carousel to display and upload some logo images for image carousel.

    5. Go to Settings > Reading and set that page as front page.

    PS: You will see all images are broken. You have to upload broken images again. You can go to our demo and save images to your computer for later usage.

    #3221

    charliexertion
    Participant

    screenshot of mobile screen

    #3257

    ThemeAlien
    Keymaster

    Hi,

    If you want to make your homepage looks like our demo (Homepage 2), you should use this element Product Categories Banner instead of using Revolution Slider.

    If you need more help, please send us your admin credentials, we will help you config it.

    Best regards

    #3399

    charliexertion
    Participant
    This reply has been marked as private.
    #3402

    ThemeAlien
    Keymaster

    Hi,

    I checked your website and saw you are using element Category Products Carousel. This element doesn’t support tabs.
    If you want to have tabs, you must use Products Tabs Carousel element.

    And if you want to show tabs on mobile, please add this CSS code to Theme Options > Styles > Custom CSS

    @media only screen and (max-width: 479px)
    .products-carousel .section-heading .tabs-nav {
        display: block;
        margin-right: -90px;
    }
    #3409

    charliexertion
    Participant
    This reply has been marked as private.
    #3410

    charliexertion
    Participant
    This reply has been marked as private.
    #3411

    ThemeAlien
    Keymaster

    Hi,

    I think I misunderstood you. When you said “tabs”, I thought about this:

    And now I know you are talking about text labels on the top banner. We hide them on mobile because they are too large to display there. They can’t be readable when viewing on mobile, therefore we hide them.

    If you want to make the banner display as grid on mobile, please paste this CSS code to Theme Options > Style > Custom CSS:

    @media only screen and (max-width: 767px) {
    	.bigshop-cat-banner li,
    	.bigshop-cat-banner li img,
    	.bigshop-cat-banner li .cat-link {
    		-webkit-transform: skew(0);
    		-ms-transform: skew(0);
    		transform: skew(0);
    	}
    
    	.bigshop-cat-banner li {
    		width: 50%;
    		height: auto !important;
    		padding: 15px;
    	}
    
    	.bigshop-cat-banner li:first-child {
    		margin-left: 0 !important;
    	}
    
    	.bigshop-cat-banner li img {
    		position: static;
    		max-width: 100%;
    	}
    
    	.bigshop-cat-banner li .cat-link {
    		display: block;
    		left: 15px;
    		right: 15px;
    		top: auto;
    		bottom: 0;
    		margin: 0;
    		padding: 15px;
    		font-size: 14px;
    		text-align: center;
    	}
    
    	.bigshop-cat-banner li:last-child .cat-link {
    		right: 15px;
    	}
    }
    #3412

    charliexertion
    Participant
    This reply has been marked as private.
    #3413

    charliexertion
    Participant
    This reply has been marked as private.
    #3414

    charliexertion
    Participant
    This reply has been marked as private.
    #3420

    ThemeAlien
    Keymaster

    Hello,

    We are sorry it is impossible. It wasn’t designed to display like your idea.

    Regards

    #3421

    charliexertion
    Participant
    This reply has been marked as private.
Viewing 15 posts - 1 through 15 (of 32 total)