Our brands

Guide Ves Floristy Magento2

Getting Started

Getting Started

Floristy comes with modern, elegant, professional product-oriented design, the theme lets you showcase your items at it’s best.

Are you seeking theme for magento 2? Floristy is designed for magento 2 with tons of improvements in performance and scales. Also, it delivers engaging and rich user experience on any devices. Thus customer can shop anytime anywhere

Floristy is one of our responsive magento 2 themes. This magento 2 theme created with new magento 2 UI and integrate bootstrap 3.3.6 layout components. Also, it is inherited from magento 2 blank theme

Advanced Guide: Developer Guide For Magento 2

Compatibility:

Floristy is fully compatible with Magento Community Edition 2.0.0, 2.0.2, 2.0.4, 2.0.6, 2.0.7, 2.1.0, 2.1.x

Demo Link: http://demo4coder.com/floristy/

Purchase It Now

Theme Configuration

Homepage Configuration

Floristy have 1 homepage built by Ves Page Builder module.

Floristy Home Page Default:


link demo

To configure the default home page for your store, go to Store > Configuration > General > Web > Default Pages tab, select the desired page in the CMS Home Page field and save configuration.

Manage Page Home: Go to back-end > Venustheme > Manager page  > Edit profile name “Floristy Home Page Default

Manage Elements Page: Go to back-end > Venustheme > Ves Page Builder > Manage Elements

In the back-end, we used the element, namely “Floristy Home Silder” on Manage Elements. To change image slider, please Go to back-end > Venustheme > Ves Page Builder > Manager Elements > Choose to edit block “Floristy Home Slider” > Edit “Content Carousel” widget.




ex: content for “Floristy Default Slider 1“:

<div><a href="{{store url="women.html"}}"><img src="{{media url="wysiwyg/ves_floristy/slide01.jpg"}}" alt="" /></a></div>
<div class="slider-content text-center">
<h2 style="color: #ffffff;">7 Day Satisfaction Guarantee</h2>
<h1 style="color: #ffffff;">Fall Sale</h1>
<div class="slide-button"><a class="btn style01" href="#">Shop Now</a> <a class="btn style02" href="#">Discover</a></div>
</div>

 

Floristy Image + HTML:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Home Banner 1, Floristy Home Banner 1”.

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Home Featured Content”.

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Featured Product”.

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Home Newsletter”.

Header Configuration

Floristy provides 1 header styles

>> How To Config  Header for storeview

To Config Other Header, Go to Admin Panel >> VenusTheme >> VES THEMESETTING >> Header >> General Settings >> Choose Your Header Layout

Code HTML at this path file

app\design\frontend\Venustheme\floristy\Ves_Themesettings\templates\header\default.phtml

To change Logo, Go to Admin Panel > Content > Configuration > Edit theme_name

After that, you need to open “Header” Tab > Upload your logo(GIF, PNG, JPG, or SVG file type) with the uploader

Footer Profiles

Footer manager:

Admin -> VenusTheme -> Ves Pagebuilder -> Manage Elements:

#Footer

Design in: VenusTheme -> Ves Pagebuilder -> Manage Elements -> edit item pages builder element “Floristy Footer”:

Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Footer”.


Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Footer”.




Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Footer”.


Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Footer”.


Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Footer”.


Back-end Setting:
please Go to back-end > VenusTheme > Ves Pages Builder > Manage Elements > Edit page builder element profile “Floristy Footer”.


Admin Theme Settings

Config Generals

In this tab, you are able to:

– Choose maximum page width on dropdown or change value input

– Choose skin color store view

– Choose director support LTR or RTL Languages

– Enable or disable panel tool

– Config body background, padding

– Add custom google font for body

– Config color text body, text link, text link hover

– Config button color, background and hover, focus

 

Please Go to Admin Panel > VenusTheme > Ves ThemeSettings > General

Floristy provides Custom Page Width (960px, 1024 px, 1280px, 1360px, 1440px, 1680px,…), and Maximum Page Width mode, you can choose the one that you prefer. You can apply this option to any home versions.

We created 15+ skins in Floristy: You can view it in folder:

..\Venustheme\floristy\Ves_Themesettings\web\css\skins\

Config header

1. General tab: Choose Header Layout : “Default”

2. Top Link tab: Show link my account, sign in, create an account, and custom link

You can add a custom top link.

 

3. Search tab:
– Enable: Yes or No
– Custom style
– Add maximum width of search box
– Change format button search

 

4. Language Switcher and Currency Switcher tab:

This block setting group custom code in this file

app\design\frontend\Venustheme\floristy\Magento_Theme\templates\html\setting.phtml

How it is show on front-end:
5. Sticky Header tab:

Config “Scroll To Fixed” header ( keep header when scrolling window). You can choose all sticky elements (all header )or choose specify element

6. Top cart tab:

– There are 4 options for you to show Top Cart, you can choose to show what you want

  • Text Only
  • Icon Class Only
  • Text + Icon Class
  • Icon Class + Text

Config Footer

Floristy allows you to config various footer sections: Footer top, Footer center, Footer Bottom

app\design\frontend\Venustheme\floristy\Ves_Themesettings\layout\default.xml

 

<!-- Footer Container -->
        <referenceContainer name="footer-container">
            <container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="ves-footer">
                <container name="footer-top" label="Footer Top" htmlTag="div" htmlClass="footer-top">
                    <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.top" template="Ves_Themesettings::html/footer/footer-top.phtml"/>
                </container>
                <container name="footer-center" label="Footer Center" htmlTag="div" htmlClass="footer-center" after="footer-top">
                    <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.center" template="Ves_Themesettings::html/footer/footer-center.phtml"/>
                </container>
                <container name="footer-bottom" label="Footer Bottom" htmlTag="div" htmlClass="footer-bottom" after="footer-center">
                    <block class="Ves\Themesettings\Block\Html\Footer" name="ves.footer.bottom" template="Ves_Themesettings::html/footer/footer-bottom.phtml"/>
                </container>
                <remove name="form.subscribe"/>
                <block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
            </container>
        </referenceContainer>
<!-- End Footer Container -->

 

You can configure the options related to the footer section in VenusTheme > Ves Themesettings > Footer

– General Settings:

+ You can custom style if use value Yes, change text color and link color on footer

+ You can style background color or set background image, patent for footer by option “Outer Container”

 

– Footer Top setting:

+ You can enable or disable position

+ You can choose static block or custom html redirect on text editor

+ You can custom style if use value Yes: Text color, Link color, Link hover color

+ You can style “Outer Container”, ” Inner Content” – Main content at here

 

– For Footer Center Setting, Footer Bottom setting, you can config it like Footer Top setting. But in case the theme do NOT have, please set ” Enable Footer Center” or ” Enable Footer Bottom” to :NO

 

Config Cart Page

Config in Admin panel > Venustheme > Ves Themesetting > Cart page:

 

+ Config number product for cross-sell on cart page:

Front-end showing

Note: config show / hidden element (name, price, review…) as related, upsell

 

Config Category page

Floristy themes provides several types of category layout. You can choose one as your choice.

+ Go to the Admin Panel > Products > Inventory > Categories.

+ Select “Default Category” in the treeview area at the left side.

+ Click “Add Subcategory” button, then input Category name, Description, etc. Notes: set the options “Is Active” to “Yes”, “Include in Navigation Menu” to “Yes” in “General Information” tab.

 

+ You can change layout category on Design tab:

 

Go to Admin Panel > Venustheme > Ves Themesetting > Category page:

1. General tab:

– Show name, description, image of category

– Show Top toolbar and Bottom Toolbar

2. Product settings tab:

– Show element for each product item:

+ Config to select element of each product: name, description, price, review, lable sale or new, ect

+ Config format button add to cart, quickview, add to wishlist, add to compare

+ Config product image: image size, swap image

Config Product View Page

– Other elements:

+ Config enable / disable elements by change value Yes / No

+ Specify you can change position of thumnail slider: horizonal or vetical, Top or bottom

– Config show tab- Custom tab

+ Tab By Product Attribute Code

+ Tab By CMS Block

+ Tab By Static Html Content

– Config Related Products: number items and item show on responsive

Back-end Setting:

Frontend result:

– Config Upsell product:

Back-end Setting:

Frontend result:

Config Contact Page

Link page: demo4coder.com/floristy/contact

How To config: Go To VenusTheme > Ves Themesetting > Contact page:

 

+ Contact Form tab:

 

+ Google map tab:

– You can change address, Longitude, Latitude

– You can add contact information : email, address, telephone, fax, custom html about us, etc…

 

+ Edit Form :

You can edit form at this path file:

app\design\frontend\Venustheme\floristy\Magento_Contact\templates\form.phtml

Blocks Diagram

Static Blocks Diagram

This is all CMS static blocks we are using on the Floristy.

To Open Cms Static Blocks, Go To Admin Panel > Content > Blocks

 

1. “Floristy Header Our Services”

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="our-services our-services-1">
<div class="pull-left our-services-icon"><img src="{{media url="wysiwyg/ves_floristy/online-support.png"}}" alt="" /></div>
<div class="pull-left our-services-content">
<h4 class="services-title">688-000-6868</h4>
<p>To order by phone</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="our-services our-services-2">
<div class="pull-left our-services-icon"><img src="{{media url="wysiwyg/ves_floristy/potted-plant.png"}}" alt="" /></div>
<div class="pull-left our-services-content">
<h4 class="services-title">Perfect Gifts</h4>
<p>Flowers &amp; Gifts Guaranteed.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="our-services our-services-3">
<div class="pull-left our-services-icon"><img src="{{media url="wysiwyg/ves_floristy/in-transit.png"}}" alt="" /></div>
<div class="pull-left our-services-content">
<h4 class="services-title">Delivery</h4>
<p>Deliver to 190+ countries</p>
</div>
</div>
</div>
</div>

 

2. Floristy Banner Categories Page

Back End:

Extensions

Blog module

1. How To Change URL link:

Go to Admin Panel > Stores -> Configuration > Venus Theme Extension >  Blog

2. Config show/hidden elements in post page (detail post)

Show on frontend:

 

3. Config show/hidden elements in Category page

Show on frontend

 

4. How To Change page layout for each blog category

Go to Admin Panel > Venustheme > Blog Management > Manage Blog Categories > Edit 1 category or add new category

On Design tab : you can choose page layout for category

 

5. How To Custom Category Blog Page: Show grid, list or Masonry View Mode

Go to Admin Panel > Venustheme >  Blog Management > Manage Blog Categories > Edit 1 category or add new category > Design tab:

 

Megamenu

Floristy includes the fantastic Megamenu in an additional module called Ves MegaMenu. The Megamenu module comes with a custom admin interface through which you can create powerfull Menu. No coding is required. Follow these steps to create a module:

 

Front-end:

 

Back-end:

– Create new Menu item:

– General Information:

– Header:

– Left Block:

– Main content:

– Right block:

– Bottom block:

– Custom design for menu item:

– Dynamic Content Tab:

Front-end showing:

Back-end config:


Config menu item dynamic:

Top
Do NOT follow this link or you will be banned from the site!