{"id":129,"date":"2020-05-03T19:33:10","date_gmt":"2020-05-03T19:33:10","guid":{"rendered":"http:\/\/redhost:8888\/documentation\/?page_id=129"},"modified":"2025-02-14T11:05:19","modified_gmt":"2025-02-14T11:05:19","slug":"shop-page","status":"publish","type":"page","link":"https:\/\/docs.redsun.design\/marni\/shop-page\/","title":{"rendered":"SHOP page"},"content":{"rendered":"\n

Setting up the Shop<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
    \n
  1. The shop pages requires the Woocommerce<\/a> plugin.
    You can install this plugin in Appearance > Install Plugins<\/strong>.<\/li>\n\n\n\n
  2. Immediately after activating the plugin, you are taken to the setup wizard<\/a>.
    You can use the wizard, or skip it and manually set up everything.<\/li>\n\n\n\n
  3. Now create your products<\/a><\/li>\n\n\n\n
  4. You can optionally display a left sidebar on the shop pages by going to Appearance > Widgets and adding widgets to the “Woocommerce” sidebar.<\/li>\n\n\n\n
  5. Set the number of products per row in Appearance > Customize > WooCommerce > Product Catalog<\/strong><\/li>\n\n\n\n
  6. Detailed information and videos on how to work with WooCommerce can be found here:
    Documentation<\/a>
    WooCommerce Guided Tour Videos<\/a><\/li>\n<\/ol>\n\n\n\n

    Setting up the Shop Front Page<\/h3>\n\n\n\n

    1. Adding the Front Page<\/h4>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    1. Click Pages > Add New<\/strong>.<\/li>\n\n\n\n
    2. Look for Page Attributes<\/strong> on the right side and click on the Template<\/strong> drop-down menu. Select the “Shop Frontpage Template”.<\/li>\n\n\n\n
    3. You can give this page a title, eg. “Shop”.<\/li>\n\n\n\n
    4. Click Publish<\/strong>.<\/li>\n\n\n\n
    5. Now you can add the new page to your menu.<\/li>\n<\/ol>\n\n\n\n

      2. Adding a Top Image<\/h4>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
        \n
      1. Go to Appearance > Customize > Shop > Shop Frontpage Image and upload your image.
        Into the field “Title Over Image” enter the text that you wish to appear above the image.
        You can use HTML, shortcodes and icons in this field as well, for example in order to add an icon, add:
        <i class=\"fa fa-heart\"><\/code>
        More info about icons you can find in this documentation under Theme Features > Icons.

        Example from the theme demo:<\/li>\n<\/ol>\n\n\n\n
        we <i class=\"fa fa-heart\"><\/i> basics \n<br>\n[button size=\"large\" color=\"#101020\" style=\"outline\" link=\"http:\/\/marni.redsun.design\/shop\/\"]shop now[\/button]<\/code><\/pre>\n\n\n\n
        3. Adding Promo Boxes<\/h4>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
          \n
        1. Go to Appearance > Customize > Shop > Shop Frontpage Promo Boxes<\/li>\n\n\n\n
        2. Click “Add new Promo Box”, upload an image and enter Overlay Text and an URL where you want the box to link to. Repeat this step for each Promo Box.<\/li>\n\n\n\n
        3. Below you have the option to adjust the Promoboxes Text Font and add a transparent background color over the images so that the text above it is better readable.<\/li>\n<\/ol>\n\n\n\n
          4. Adding Products to the Shop Frontpage<\/h4>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
            \n
          1. In order to add products to the Shop Front Page, you can simply put any\u00a0WooCommerce Product Shortcode<\/a>\u00a0into the text editor of the page that you’ve created in Step 1. Make sure to add the shortcode into the Text (not Visual) editor.

            For example show 4 products from the “accessories” category:
            [product_category category=\"accessories\"]<\/code> 

            or list 4 products on sale:
            [sale_products per_page=\"4\" columns=\"4\"] <\/code>

            Combine the WooCommerce shortcodes for exampel with headlines and Marni button shortcodes to create a nice layout. Example from the Marni Theme demo:
            <\/li>\n<\/ol>\n\n\n\n
            <h4 style=\"text-align: center;\">New Arrivals<\/h4>\n[recent_products per_page=\"3\" columns=\"3\"]\n<p style=\"text-align: center;\">[button window=\"new\" style=\"outline\" size=\"large\" link=\"http:\/\/www.marni.redsun.design\/shop\"]shop all new arrivals[\/button]<\/p><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Setting up the Shop The shop pages requires the Woocommerce plugin.You can install this plugin in Appearance > Install Plugins. Immediately after activating the plugin, you are taken to the setup wizard.You can use ...","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-129","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":5,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages\/129\/revisions"}],"predecessor-version":[{"id":5284,"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/pages\/129\/revisions\/5284"}],"wp:attachment":[{"href":"https:\/\/docs.redsun.design\/marni\/wp-json\/wp\/v2\/media?parent=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}