View Categories

Swag Instructions

3 min read

Thank you for choosing Swag theme to build your Woo and WordPress website.

Theme installation

Unzip file swag_unzip_first.zip that you downloaded from us and install swag.zip file. Read more how to install a theme → 

Theme setup wizard

Swag comes with a setup wizard that enables you to create the demo layout with a just a few clicks.

  1. After installing the theme, in your Dashboard go to Appearance > Theme Setup.
  2. The setup wizard will ask you to install and activate necessary plugins, and import the demo content. Please be patient while WordPress imports all the content.
  3. After the setup ends, all you need to do is assign the menu’s to their respective navigation blocks edit the content and make it your own
Swag WordPress theme setup wizard

Recommended plugins

  1. Variation Swatches: Create images and buttons variation swatches for WooCommerce product attributes..
  2. Icon Block: A simple little block that allows you to add a custom SVG icon or graphic.
  3. Contact Form 7: The plugin is recommended for creating contact forms.

Editing the theme’s elements

Swag is a full site editing theme, thus you can edit most elements from the front end. In your Dashboard go to Appearance > Editor and there you can select and edit any element you like, change their color, font etc. You can edit the global styles, to change the elements throughout the websites as shown in the picture below.

Specific elements can be edited by selecting the template part you want to edit, like large header, small header or footer.

Static front page

In case you want to configure the theme manually instead of importing the demo content.

  1. Create a page and assign Page (Large Header) template to it.
  2. In your Dashboard go to Settings > Reading and assign the page to display in front and another page to display the latest posts.
  3. Add blocks and patterns you like to the page.

Instagram feed in the front page

While there are many plugins that can help you display your instagram feed or a feed based in a hashtag, in our demo we have setup a hashtag based feed, powered by curator.io. You need to sign up in their website (it’s free), generate your feed, and add the embed code in a html block in any page you need it.

Custom block patterns list

Swag comes with some pre-designed patterns that you can include in any page or post. Learn how to add block patterns 

Available block patterns we have used in our demo

  1. Main slogan: Used in the home page below the video section.
  2. Product carousel sliders: Three product carousels, featured products, new products and products on sale
  3. Features pattern: Four columns of text and icon that help display store features.
  4. Featured category block: A pattern that can display featured content using text in the left and an image in the right.
  5. Team Members: Display your team members in four columns, including a description and their social media accounts.

Product carousel sliders

We have included the ability to include up to three product carousels in any page of your website. Each carousel is a block pattern. Add them to any page or post as explained above.

You can define the number of products displayed in each carousel by selecting the amount of rows in each blocks settings. You can replace the block grid of a carousel with another one, say Product Grid from a category to have the carousel display products from only one category.

Page templates

Swag comes with different page templates to help you achieve a different look for any page.

  1. Default: This template creates a page with a simple header in the top.
  2. Page (Large Header): This template uses a large header that has a background image, text and call to action button. You can replace the image or with another one, or a video instead. Used only for the front page of the website.
  3. Blank: As the name says, this is a blank canvas that you can use any of of the template parts and patterns to achieve a different look.

Pre-designed pages

If you import the demo content there will be three pre-designed pages included. HomeAbout us and Contact.

Template parts

Template parts are pre-designed sections that are included in page templates to organize and add structure to the theme to avoid having to repeat code. To edit a template part in your Dashboard go to Appearance > Editor > Templates. Note that when you edit a template part it will change in all sections of your website. You can always reset customizations if you make a mistake.

Animated blocks

Swag enables you to animate any block when entering the screen using css3 animations by adding classes. Learn how to add animations 

If you need more help regarding this theme, please contact us.